Nuxt + VueFire Template

Nuxt template with VueFire to get started with Firebase using the Blaze Plan (pay as you go). If you are looking for the Spark Plan version instead, check this template instead.

You can check a live demo at nuxt-vuefire-example-blaze.web.app.

In order to test this locally, follow all the steps in Provisioning Firebase and Development Server. Since this example is using most of Firebase features, there are quite a few things to do. In practice, you might only use half of them.

Trying this out locally

Thanks to Firebase Emulators, you can try this template locally without even creating a Firebase project. You will need to install the Firebase Tools CLI with npm i -g firebase-tools, install dependencies with pnpm i, and then run in two different processes:

pnpm run emulators

and

pnpm run dev

Using this template

It's recommended to use git to clone this template and track any changes made by the Firebase Tools CLI to revert them if needed.

You will also need to install the Firebase Tools CLI, either globally or locally. To install globally do:

npm install -g firebase-tools

Then login to your Firebase account with firebase login.

Install dependencies with pnpm install.

Provisioning Firebase

Start by creating a Firebase Project in the console.

Activate now any of the features you want to use (note the starter uses them all):

Firestore
Authentication
Realtime Database
Storage

Create an Application in the Project Overview. This will give you a firebaseConfig object, replace the content of vuefire.config in nuxt.config.ts with it.

Before running firebase init, make sure to delete the .firebaserc file as it's what the Firebase CLI uses to know which project to use. If you forgot, you will have to set the project with firebase use <project-id>.

Now you have to run firebase init at the root of your project. Some notes:

Select the features you want to use.
Note the deployed folder of Nuxt is .output/public, not public as the firebase tools CLI will suggest.
Selecting GitHub actions will create a service account to allow GitHub to deploy to Firebase. If you don't enable this, you should also remove the .github/workflows folder as it will just won't work.

This step should overwrite some files, you can revert most of them if you want to test this template with your own project. The only file that shouldn't be reverted is .firebaserc as it contains the project ID.

You can also create the .env from the example:

mv .env.example .env

You can now clean up any files you don't need, for example, if you are not using the Realtime Database, you can delete database.rules.json.

You can also remove the ./functions folder as the Nuxt project builds that for you. Replace the "function" config in firebase.json with:

{
  "functions": [
    {
      "source": ".output/server",
      "codebase": "default",
      "ignore": [".git", "firebase-debug.log", "firebase-debug.*.log"]
    }
  ]
}

Nuxt will generate the .output/server folder when running nuxt build.

Service Account

For server side rendering to work, you will need to create a service account. You can do this from the Project Settings, Service Accounts tab. Then, download the JSON file and save it as service-account.json at the root of your project. The .env file should already have a variable pointing to it.

Authentication

To enable authentication during SSR, you will need to enable the IAM Service Account Credentials API on the Google Cloud console.

Once this API is activated, you will need to add a role to your service account. This is explained in the Firebase documentation.

App Check

If you don't want to use App Check, delete the vuefire.appCheck object from nuxt.config.ts and remove the line FIREBASE_APPCHECK_DEBUG_TOKEN=... from .env.

Once you have completed the deployment as explained above, you can optionally register App Check. You will then need to register a reCAPTCHA v3 provider. You can find the instructions for this in Firebase Documentation, they will tell you to register your site for reCAPTCHA v3 and to copy your secret key in the firebase console. Then, you will need to copy the site key in your nuxt.config.ts file:

export default defineNuxtConfig({
  // ...
  vuefire: {
    // ...
    appCheck: {
      provider: 'ReCaptchaV3',
      // site key, NOT secret key
      key: '...',
      isTokenAutoRefreshEnabled: true,
    },
  },
})

It's also recommended to generate a debug token now from the Firebase Console, on the Apps tab, and add it to your .env file:

GOOGLE_APPLICATION_CREDENTIALS=./service-account.json
FIREBASE_APPCHECK_DEBUG_TOKEN=...

Note you will need to enforce App Check on the APIs tab of the Firebase Console for each service you want to protect.

Development Server

If you added support for emulators, you will need to start them before starting the Nuxt development server.

You can start the emulators with npm run emulators or firebase emulators:start. Then start the server with npm run dev.

Debugging

You can activate VueFire logs with:

CONSOLA_LEVEL=5 npm run dev

Building for Production

Since this is an SSR app, building for production is usually done with pnpm run build.

Previewing Locally

In order to preview a production build locally, you will need to enable debug mode for App Check and also emulators:

VUEFIRE_APPCHECK_DEBUG=true VUEFIRE_EMULATORS=true pnpm run build

Then you can run the emulators to preview your app:

pnpm run emulators

Your app will then be accessible on http://localhost:5050.

You can also not use emulators but some features like auth might not work since we are on localhost.

Deploying to Firebase

Always deploy once from the CLI as it might prompt you to create some roles. Once this is done, link the hosting site with the app from the Project Settings, Your apps section.

You can deploy manually with pnpm run build && firebase deploy.

Troubleshooting

Failed deployments

In some rare occasions, an initial deployment might fail with different errors, given the complexity of some deployments, I recommend you to google the error message. Very often, deleting the function and redeploying fixes the issue.

Logs

You will find more information in the logs of the functions, accessible from the Firebase Console. Note you might want to set the CONSOLA_LEVEL environment variable to 5 in your deployment to enable debug logs.

Automatic Deployments on GitHub

If you enabled GitHub Actions, you can now push to GitHub and it will automatically deploy to Firebase Hosting. You still need to manually deploy Firestore, Realtime Database, and Storage with firebase deploy or selectively with --only, e.g. firebase deploy --only storage.

posva/nuxt--vuefire-example-blaze-plan