# Options

# config REQUIRED

Your firebase config snippet and other Firebase specific parameters. You can retrieve this information from your Firebase project's overview page:

https://console.firebase.google.com/project/<your-project-id>/overview

config: {
  // REQUIRED: Official config for firebase.initializeApp(config):
  apiKey: '<apiKey>',
  authDomain: '<authDomain>',
  databaseURL: '<databaseURL>',
  projectId: '<projectId>',
  storageBucket: '<storageBucket>',
  messagingSenderId: '<messagingSenderId>',
  appId: '<appId>',
  measurementId: '<measurementId>',
  // OPTIONAL: Additional config for other services:
  fcmPublicVapidKey: '<publicVapidKey>' // Sets vapid key for FCM after initialization
}

TIP

Can be defined per NODE_ENV environment if put in child-objects config.production and config.development, meaning that e.g. config.production gets loaded when NODE_ENV === 'production'.

You can also specify multiple custom environments as mentioned in the customEnv option below.

# customEnv

  • Type: Boolean
  • Default: false

By default, the Firebase config will be chosen either directly from the config-object or from a child-object named after the current NODE_ENV environment variable.

If set to true, however, nuxt-fire will determine the environment based on the environment variable called FIRE_ENV, which you can define yourself. This gives you the flexibility to define as many different Firebase configs as you like, independent of your NODE_ENV.

WARNING

If you decide to turn on this option, you need to define process.env.FIRE_ENV in your code and additionally add the following code to your nuxt.config.js to make sure that the environment variable gets passed from server to client.

env: {
  FIRE_ENV: process.env.FIRE_ENV
}

After that, you can set FIRE_ENV to anything you like...

// package.json
"scripts": {
  "serveFoo": "FIRE_ENV=foofoofoo nuxt",
  "serveFaa": "FIRE_ENV=faafaafaa nuxt",
}

And then add your config to the nuxt-fire options:

// nuxt.config.js
// within nuxt-fire config
config: {
  foofoofoo: {
    apiKey: '<apiKey>',
    authDomain: '<authDomain>',
    databaseURL: '<databaseURL>',
    projectId: '<projectId>',
    storageBucket: '<storageBucket>',
    messagingSenderId: '<messagingSenderId>',
    appId: '<appId>',
    measurementId: '<measurementId>'
  },
  faafaafaa: {
    //
  }
}

# onFirebaseHosting

  • Type: Boolean or Object
  • Default: false

If your application is hosted on Firebase hosting, you can enable this flag in order to load the newest Firebase scripts in the service workers directly from there instead of www.gstatic.com.

# services REQUIRED

By default, NO Firebase products are initialized. To initialize a specific service, set its services flag to true or create a child object and name the key after the service.

Available services:

services: {
  auth: true,
  firestore: true,
  functions: true,
  storage: true,
  realtimeDb: true,
  messaging: true,
  performance: true,
  analytics: true,
  remoteConfig: true
}

# ALL SERVICES

All services mentioned below can have the following options:

[serviceName]: {
  static: false, // default
  preload: false, // default
  chunkName: process.env.NODE_ENV !== 'production' ? `firebase-${serviceName}` : '[id]' // default
}

# static

By default, each service gets imported dynamically, which splits them into separate chunks. If static = true however, we import them statically, so the services are bundled into vendors.app.js.

// static: false (default)
await import 'firebase/auth'
// static: true
import 'firebase/auth'

# preload

Preloads dynamically loaded services. More information here.

Be aware

Only applies if static === false.

# chunkName

Be default, the dynamically imported services are named vendors.firebase-${serviceName}.js in development mode, and [id] in production mode (process.env.NODE_ENV === 'production'). If you want to change this behaviour, you can do so with this option.

Be aware

Only applies if static === false.

# auth

Initializes Firebase Authentication and makes it available via $fireAuth and $fireAuthObj.

  • Type: Boolean or Object
  • Default: false
auth: true

// or

auth: {
  initialize: {
    onSuccessMutation: 'ON_SUCCESS_MUTATION',
    onSuccessAction: null,
    onErrorMutation: null,
    onErrorAction: 'onErrorAction',
    ssr: false // default
  }
}

# initialize EXPERIMENTAL

This sets up SSR-ready onAuthStateChanged() without any effort.

Just add a mutation/action to your vuex store that handles what to do with the authUser object (e.g. save it to the state or get user data from FireStore) and then define the name of the action/mutation in the initAuth configuration as below

When onAuthStateChanged() gets triggered by Firebase, the defined mutations/actions will be called either on success or error with the authUser, claims or error attributes seen below:

# onSuccessMutation / onSuccessAction / onErrorMutation / onErrorAction
ON_SUCCESS_MUTATION: (state, { authUser, claims }) => {
  // Do something with the authUser and the claims object...
}

onSuccessAction: (ctx, { authUser, claims }) => {
  // Do something with the authUser and the claims object...
}

ON_ERROR_MUTATION: (state, error) => {
  // Hanlde an auth error in a mutation...
}

onErrorAction: (ctx, error) => {
  // Hanlde an auth error in an action...
}

WARNING

Do not save authUser directly to the store, since this will save an object reference to the state which gets directly updated by Firebase Auth periodically and therefore throws a vuex error if strict != false.

export const mutations = {
  onSuccessMutation: (state, { authUser, claims }) => {
    // Don't do this:
    state.user = authUser
    // Do this:
    state.user.id = authUser.uid
    state.user.email = authUser.email
  }
}
# ssr EXPERIMENTAL

If ssr = true, nuxt-fire generates a service worker that refreshes the Firebase Auth idToken and sends it with each request to the server if the user is logged in, as described here

The option further adds a serverMiddleware that checks on server side if the token is valid and then returns the validated authUser object via ctx.res.verifiedFireAuthUser to the nuxtServerInit action.

A tutorial on how to set this up can be found here.

# firestore

Initializes Firebase Firestore and makes it available via $fireStore and $fireStoreObj.

  • Type: Boolean or Object
  • Default: false
firestore: true

// or

firestore: {
  static: false, // default
  preload: false, // default
  chunkName: process.env.NODE_ENV !== 'production' ? 'firebase-auth' : '[id]', // default
  enablePersistence: true
}

# enablePersistence

Enables persistence in web apps.

  • Type: Boolean or Object
  • Default: false
firestore: {
  // ...
  enablePersistence: true
}

// or

firestore: {
  // ...
  enablePersistence: {
    /**
     * Whether to synchronize the in-memory state of multiple tabs. Setting this
     * to 'true' in all open tabs enables shared access to local persistence,
     * shared execution of queries and latency-compensated local document updates
     * across all connected instances.
     *
     * To enable this mode, `synchronizeTabs:true` needs to be set globally in all
     * active tabs. If omitted or set to 'false', `enablePersistence()` will fail
     * in all but the first tab.
     */
    synchronizeTabs: true
  }
}

More information here.

# functions

Initializes Firebase Functions and makes it available via $fireFunc and $fireFuncObj.

  • Type: Boolean or Object
  • Default: false
functions: true

// or

functions: {
  location: 'us-central1',
  emulatorPort: 12345
}

# location

  • Type: String
  • Default: us-central1

More information here.

# emulatorPort

  • Type: Integer
  • Default: null

Sets up useFunctionsEmulator("http://localhost:EMULATOR_PORT") to point to a Cloud Functions emulator running locally instead of the productive one.

More information in the official Firebase API Docs and Functions Docs.

# storage

Initializes Firebase Storage and makes it available via $fireStorage and $fireStorageObj.

  • Type: Boolean or Object
  • Default: false
storage: true

# realtimeDb

Initializes Firebase Realtime Database and makes it available via $fireDb and $fireDbObj.

  • Type: Boolean or Object
  • Default: false
realtimeDb: true

# messaging

Initializes Firebase Messaging and makes it available via $fireMess and $fireMessObj.

  • Type: Boolean or Object
  • Default: false
messaging: true

// or

messaging: {
  createServiceWorker: false
}

# createServiceWorker EXPERIMENTAL

  • Type: Boolean or Object
  • Default: false

Setting the createServiceWorker flag to true automatically creates a service worker called firebase-messaging-sw.js in your static folder. The service worker is fully configured for FCM with the newest Firebase scripts.

# Notification Payload

In the same way the Notification Composer does, we expect the notification format payload be named notification and can contain the following config:

notification: {
  title: "FCM Message",
  body: "This is a message from FCM",
  image: '<imageUrl>',
  vibrate: [200, 100, 200, 100, 200, 100, 200],
  clickPath: '<egYourWebsiteUrl>'
}

# performance

Initializes Firebase Performance and makes it available via $firePerf and $firePerfObj.

  • Type: Boolean or Object
  • Default: false
performance: true

# analytics

Initializes Firebase Storage and makes it available via $fireAnalytics and $fireAnalyticsObj.

  • Type: Boolean or Object
  • Default: false
analytics: true

# remoteConfig

Initializes Firebase Storage and makes it available via $fireConfig and $fireConfigObj.

  • Type: Boolean or Object
  • Default: false
remoteConfig: true

// or

remoteConfig: {
  settings: {
    fetchTimeoutMillis: 60000, // default
    minimumFetchIntervalMillis: 43200000, // default
  },
  defaultConfig: {
    'welcome_message': 'Welcome'
  }
}