Nuxt.js

VueFire comes with an official Nuxt module that automatically handles most of the hassle of setting up VueFire in your Nuxt project.

Installation

npm install firebase
npx nuxi@latest module add vuefire

Additionally, if you are using SSR, you need to install firebase-admin and its peer dependencies:

pnpm

pnpm install firebase-admin firebase-functions @firebase/app-types

yarn

yarn add firebase-admin firebase-functions @firebase/app-types

npm

npm install firebase-admin firebase-functions @firebase/app-types

Configuration

Next, add nuxt-vuefire to the modules section of nuxt.config.js and configure it with the credentials created in your app settings in your project overview (https://console.firebase.google.com/project/YOUR_PROJECT_NAME/overview). You can find more details in Firebase Documentation. It should look something like this:

export default defineNuxtConfig({
  modules: [
    // ... other modules
    'nuxt-vuefire',
  ],

  vuefire: {
    config: {
      apiKey: '...',
      authDomain: '...',
      projectId: '...',
      appId: '...',
      // there could be other properties depending on the project
    },
  },
})

Configuring the Admin SDK

If you are using SSR with any auth related feature, you will need to create a service account and provide its content as an environment variable named GOOGLE_APPLICATION_CREDENTIALS in the .env file.

In local development it's more convenient to put the service-account.json file alongside other files and refer to its path in the environment variable:

GOOGLE_APPLICATION_CREDENTIALS=service-account.json

TIP

This service account file contains sensitive information and should not be committed to your repository. Make sure to exclude it from your version control system:

echo service-account.json >> .gitignore

Additional configuration

If you are using the Authentication module or AppCheck, make sure to enable them as well:

export default defineNuxtConfig({
  // ...
  vuefire: {
    // ensures the auth module is enabled
    auth: {
      enabled: true
    },
    appCheck: {
      // Allows you to use a debug token in development
      debug: process.env.NODE_ENV !== 'production',
      isTokenAutoRefreshEnabled: true,
      provider: 'ReCaptchaV3',
      // Find the instructions in the Firebase documentation, link above
      key: '...',
    },
  },
})

Auto imports

Nuxt VueFire will automatically import the most commonly used functions of vuefire so you don't even need to import them in your components ✨.