Set up Firebase on Nuxt3

A guide on how to set up Firebase on Nuxt3

Image by Dall-E-3

Nuxt 3 is a web framework based on Vuejs. Vuejs is a front-end web framework.

Firebase is a cloud solutions platform. It can replace part or your complete back-end.

Nuxt 3 and Firebase work great together. In this article, I am going over how to set up Firebase on Nuxt 3.

In this guide, I go over:

• Get access data.
• Install packages.
• Configure the Vuefire module on nuxt.config.js.
• Use a Firebase service.

Notes:

I assume you:

• Have a working Nuxt install.
• Know the basics of Nuxt.
• Set up a Firebase app.

Get access data

To use Firebase, we need to get the authentication data. This authentication data works for every service inside an app.

To get the data, go into your Firebase app and click on settings.

That will open a menu. Click on “Project Settings”.

That will direct you to the page that contains the credentials. Scroll down. At the end of the page, you will find the credentials.

You can find the values in the very redacted red block.

That done, let’s install the package we need to use Firebase.

Install packages

The easiest way to connect to Firebase is with its Software Development Kit (SDK). And even better, there are helpers for Vue and Nuxt.

To install the packages, run:

npm i firebase vuefire nuxt-vuefire

Let’s go over what we are installing.

• firebase. The SDK.
• vuefire. Vue helpers for Firebase.
• nuxt-vuefire. This module helps with Firebase’s base setup on Nuxt.

Now that we installed that, let’s configure it.

Configure Vuefire module on nuxt.config.js

We need to configure Firebase in Nuxt. Make each “understand” the other. Luckily for us, Vuefire simplifies this.

Add nuxt-vuefire to the modules array at nuxt.config.js.

  modules: ["nuxt-vuefire"],

After adding nuxt-vuefire, you need to add the following:

vuefire: {
  config: {
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.FIREBASE_APP_ID,
    measurementId: process.env.FIREBASE_MEASUREMENT_ID,
  },
},

That adds the configurations we need to Firebase.

Notice that you shouldn’t set the variables in the nuxt.config.js file. Instead, it’s a good practice to put the sensitive values into a .env file.

Make a .env file at the root of your project. In the file, add:

FIREBASE_API_KEY: key
FIREBASE_AUTH_DOMAIN: domain
FIREBASE_PROJECT_ID: projectid
FIREBASE_STORAGE_BUCKET: bucket
FIREBASE_MESSAGING_SENDER_ID: senderid
FIREBASE_APP_ID: appid
FIREBASE_MEASUREMENT_ID: measurement

If you want to know more about Nuxt3 env variables, check this article:

Environment variables in Nuxt 3

The module nuxt-vuefire, saves you the boilerplate code to set up Firebase. And with that, we have Firebase setup on Nuxt.

Now, let’s do a simple example of how to configure the Firestore and a collection.

Use a Firebase service

In this section, I am going to make a simple example of how to use a Firebase service. The Firestore.

Make a plugins folder at the root of your project. Inside the folder, make a firebase.client.js file.

Notice the client suffix before the extension. It tells Nuxt to run the plugin on the client only. If you forget about it, it will fail.

Inside firebase.client.js add:

import { getFirestore, collection } from "firebase/firestore";

export default defineNuxtPlugin((nuxtApp) => {
  const db = getFirestore(nuxtApp.$firebaseApp);
  const modelsRef = collection(db, "models");

  return {
    provide: {
      db,
      modelsRef,
    },
  };
});

Now you can import and use your collection. For example:

<template>...</template>
<script setup>
import { onMounted } from "vue"

const { $modelsRef } = useNuxtApp();

onMounted(() => console.log($modelsRef))
</script>

To get the documents of a collection in real-time:

<template>...</template>
<script setup>
import { onMounted } from "vue"

const { $modelsRef } = useNuxtApp();

const models = useCollection($modelsRef);
</script>

Notice the composable useCollection, courtesy of Vuefire. You don’t need to import it. It’s added by default.

Then you can use the models in your template. It’s reactive. Cool huh?

Conclusions

We went over how to set up Firebase on Nuxt3.

I hope you get some value out of this guide. Good Luck out there!