Skip to content
On this page

Usage

General Usage

This module injects two main utilities into your context, $fire and $fireModule.

You can access these in almost any context using app.$fire/app.$fireModule or this.$fire/this.$fireModule - including store actions.

Understand the difference!

While $fire contains the initialized service instances, $fireModule gives you access to the (not-initialized) Firebase module itself with all its static methods.

$fire

$fire gives you access to the initialized service instances:

Firebase ServiceShortcutClient/Server
Authentication$fire.authClient + Server
Realtime Database$fire.databaseClient + Server
Firestore$fire.firestoreClient + Server
Storage$fire.storageClient + Server
Functions$fire.functionsClient + Server
Messaging$fire.messagingClient-only
Performance$fire.performanceClient-only
Analytics$fire.analyticsClient-only
Remote Config$fire.remoteConfigClient-only

See Firebase's official docs for more usage information.

Be aware

Please be aware that some services are not available on server-side. In universal code, you can wrap your code in if (process.client) {} so it only gets executed on the client-side.

$fireModule

$fireModule gives you access to the Firebase modules themselves with all their static methods.

Firebase ModuleShortcut
firebase.auth$fireModule.auth
firebase.database$fireModule.database
firebase.firestore$fireModule.firestore
firebase.storage$fireModule.storage
firebase.functions$fireModule.functions
firebase.messaging$fireModule.messaging
firebase.performance$fireModule.performance
firebase.analytics$fireModule.analytics
firebase.remoteConfig$fireModule.remoteConfig

Examples

Access Firebase Authentication in a component method:

js
export default {
  methods: {
    async createUser() {
      try {
        await this.$fire.auth.createUserWithEmailAndPassword(
          'foo@foo.foo',
          'test'
        )
      } catch (e) {
        handleError(e)
      }
    },
  },
}

Access Firestore and it's Object in a vuex store action:

js
export default {
  async randomVuexAction({commit, state, rootState}, userId) {
    const ref = this.$fire.firestore.collection('users').doc(userId)
    try {
      await exerciseRef.update({
        [`randomFoo.FooFoo`]: this.$fireModule.firestore.FieldValue.delete(),
      })
    } catch (e) {
      return Promise.reject(e)
    }
  },
}