How to use Firebase 9 with Nuxt.js
2024-03-04
2022-03-13
Nuxt Firebase package exists, but it is not updated from v7.5 according to the official documentation. The latest version of its package supports the modular, but the implementation of the package is not completed. If you would like to use the modular, implement it yourself.
Installation
Install the package of Firebase v9.
terminal
$ yarn add firebase
Configuration
It is required to initialize the firebase modules.
plugins/firebase.js
import { initializeApp, getApps } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'
import { getAuth } from 'firebase/auth'
const firebaseConfig = {
apiKey: '<replace this>',
authDomain: '<replace this>',
databaseURL: '<replace this>',
projectId: '<replace this>',
storageBucket: '<replace this>',
messagingSenderId: '<replace this>',
appId: '<replace this>',
}
const apps = getApps()
const firebaseApp = !apps.length ? initializeApp(firebaseConfig) : apps[0]
const db = getFirestore(firebaseApp, {})
const auth = getAuth(firebaseApp, {})
export { db }
Edit the config file.
nuxt.config.js
export default {
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: ['~/plugins/firebase.js'],
}
Usage
Import prepared plugins in each component.
<script>
import { auth } from '@/plugins/firebase.js'
import { createUserWithEmailAndPassword } from 'firebase/auth'
export default {
methods: {
async createUser() {
try {
const userCredential = await createUserWithEmailAndPassword(
auth,
this.email,
this.password
)
} catch (e) {
console.error(e)
}
},
},
}
</script>