Nuxt Google Analytics

October 4, 2020


If you are using Nuxt.js to generate full static pages

Edit layouts/default.vue

export default {
  head() {
    let productionScripts = []
    if (process.env.NODE_ENV === 'production') {
      productionScripts = [
        { hid: 'analytics', src: '', defer: true },
        { hid: 'analytics-script', innerHTML: "window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-3625XXXX-1');", type: 'text/javascript' }

    return {
      title: "Test Analytics",
      script: [

      // __dangerouslyDisableSanitizers: ['script']
      __dangerouslyDisableSanitizersByTagID: {
        'analytics-script': ['innerHTML']


If you are using SSR or SPA, which vue-router is used to change pages dynamically, you can use @nuxtjs/google-analytics.


npm install --save-dev @nuxtjs/google-analytics

Edit nuxt.config.js

export default {
  buildModules: [
  googleAnalytics: {
    id: 'UA-3625XXXX-1'

NOTE: Analytics is disabled in development mode

NOTE: You will notice you will not find google analytics url in the generated html (I assume it is done via JavaScript). You can enable debug mode to check if it is working.

export default {
  googleAnalytics: {
    id: 'UA-3625XXXX-1',
    debug: {
      enabled: true,
      // sendHitTask: true

NOTE: @nuxtjs/google-analytics utilize (vue-analytics)[], where the size is not tiny.

NOTE: You can also do it manually without using plugins.

Firebase Analytics

If you are using Firebase, you can use Firebase Analytics instead of Google Analytics.

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