VueFireNuxt.js
WARNING
The Nuxt VueFire module is still a work in progress and it might contain breaking changes in the future. If you find any issues, please open an issue on GitHub.
Installation
pnpm install vuefire nuxt-vuefire firebasepnpm install vuefire nuxt-vuefire firebaseyarn add vuefire nuxt-vuefire firebaseyarn add vuefire nuxt-vuefire firebasenpm install vuefire nuxt-vuefire firebasenpm install vuefire nuxt-vuefire firebaseAdditionally, if you are using SSR, you need to install firebase-admin and its peer dependencies:
pnpm install firebase-admin firebase-functions @firebase/app-typespnpm install firebase-admin firebase-functions @firebase/app-typesyarn add firebase-admin firebase-functions @firebase/app-typesyarn add firebase-admin firebase-functions @firebase/app-typesnpm install firebase-admin firebase-functions @firebase/app-typesnpm install firebase-admin firebase-functions @firebase/app-typesConfiguration
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 (https://console.firebase.google.com/project/YOUR_PROJECT_NAME/overview). You can find more details in Firebase Documentation. It should look something like this:
export default defineNuxtConfig({
modules: [
// ... other modules
'nuxt-vuefire',
],
vuefire: {
config: {
apiKey: '...',
authDomain: '...',
projectId: '...',
appId: '...',
// there could be other properties depending on the project
},
},
})export default defineNuxtConfig({
modules: [
// ... other modules
'nuxt-vuefire',
],
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 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:
GOOGLE_APPLICATION_CREDENTIALS=service-account.jsonGOOGLE_APPLICATION_CREDENTIALS=service-account.jsonTIP
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 >> .gitignoreecho service-account.json >> .gitignoreAdditional 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: '...',
},
},
})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 ✨.