1. Tutorials

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.
❤️ Is this article helpful?
Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.
👶 Apps I built
Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.
Pixtory App (Alpha) - easily organize photos on your phone into a blog.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings (or just quotes).
LuaPass - offline password manager
By Desmond Lua
A dream boy who enjoys making apps, travelling and gardening. Follow me on @d_luaz.
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.