Nuxt FirebaseUsage
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 Service | Shortcut | Client/Server |
|---|---|---|
| Authentication | $fire.auth | Client + Server |
| Realtime Database | $fire.database | Client + Server |
| Firestore | $fire.firestore | Client + Server |
| Storage | $fire.storage | Client + Server |
| Functions | $fire.functions | Client + Server |
| Messaging | $fire.messaging | Client-only |
| Performance | $fire.performance | Client-only |
| Analytics | $fire.analytics | Client-only |
| Remote Config | $fire.remoteConfig | Client-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 Module | Shortcut |
|---|---|
| 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:
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:
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)
}
},
}