Setup

Check the Nuxt.js documentation for more information about installing and using modules in Nuxt.js.

Installation

  1. Add @nuxtjs/google-analytics dependency to your project:
yarn add --dev @nuxtjs/google-analytics
npm install --save-dev @nuxtjs/google-analytics

If you are using Nuxt < v2.9, you have to install the module as dependency (without --dev or --save-dev)

  1. Add @nuxtjs/google-analytics to the buildModules section of nuxt.config.js:
nuxt.config.js
{
  buildModules: [
    '@nuxtjs/google-analytics'
  ],
}

If you are using Nuxt < v2.9, you have to add it to modules section instead of buildModules.

Configure

Add googleAnalytics section in nuxt.config.js to set the module options:

nuxt.config.js
export default {
  googleAnalytics: {
    // Options
  }
}

Then pass your Google Analytics ID to id field of googleAnalytics:

nuxt.config.js
export default {
  googleAnalytics: {
    id: 'UA-XXX-X'
  }
}

router instance is added out of the box. You can refer here on to how to disable it if needed.

Runtime Config

You can use publicRuntimeConfig(from runtime config) to have dynamic environment variables available in production. Otherwise, the configuration options passed in nuxt.config.js will be read and hard-coded during the build once only.

nuxt.config.js
export default {
  buildModules: [
    '@nuxtjs/google-analytics'
  ],
  googleAnalytics: {
    id: process.env.GOOGLE_ANALYTICS_ID, // Use as fallback if no runtime config is provided
  },
  publicRuntimeConfig: {
    googleAnalytics: {
      id: process.env.GOOGLE_ANALYTICS_ID
    }
  }
}

For a full list of usage, refer to Vue Analytics Documentation.