Nuxt Google Adsense

October 4, 2020

Via Nuxt Plugin

You can use @nuxtjs/google-adsense.

NOTE: The plugin has not been updated since Jan 2018, but it still works.

Install

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

Edit nuxt.config.js

export default {
  buildModules: [
    '@nuxtjs/google-adsense'
  ],
  'google-adsense': {
    id: 'ca-pub-8122716156XXXXXX'
  }
}

NOTE: Adsense is disabled in development mode

Via Meta Head Script

Edit layouts/default.vue

<script>
export default {
  head() {
    let productionScripts = []
    if (process.env.NODE_ENV === 'production') {
      productionScripts = [
        { hid: 'adsense', src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', defer: true, 'data-ad-client': 'ca-pub-8122716156XXXXXX' },
      ]
    }

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

      ].concat(productionScripts),
    }
  },
}
</script>

You might get the following warning, but it should be fine.

adsbygoogle.js:218 AdSense head tag doesn't support data-n-head attribute.
adsbygoogle.js:218 AdSense head tag doesn't support data-hid attribute.
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.