Skip to content


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


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 install firebase-admin firebase-functions @firebase/app-types
yarn add firebase-admin firebase-functions @firebase/app-types
npm install firebase-admin firebase-functions @firebase/app-types


Depending on your needs, you might want to set up SSR or not. The final complexity of the project is really different. If you want a starter project see the existing templates:


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 ( You can find more details in Firebase Documentation. It should look something like this:

export default defineNuxtConfig({
  modules: [
    // ... other modules

  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:



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 ✨.

Released under the MIT License.