Setup Firebase Analytics for Nuxt.js

March 21, 2020

Install

npm i nuxt
npm i firebase
npm i @nuxtjs/firebase

Edit nuxt.config.js

export default {
  modules: [
    '@nuxtjs/firebase',
  ],
  firebase: {
    config: {
      apiKey: '<apiKey>',
      authDomain: '<authDomain>',
      databaseURL: '<databaseURL>',
      projectId: '<projectId>',
      storageBucket: '<storageBucket>',
      messagingSenderId: '<messagingSenderId>',
      appId: '<appId>',
      measurementId: '<measurementId>'
    },
    services: {
      analytics: true
    }
  }
}

NOTE: To get config, goto Firebase Console -> Project -> Project settings (click Gear icon beside Project Overview), click Add app if you haven’t done so, else Your apps -> Firebase SDK snippet -> Config.

The above configuration is will automatically track number of users and pageviews without additional setup required.

View Report

If you link your Firebase project with Google Analytics, you can view the report at Google Analytics as well

References:

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.