How to add Google Adsense to Nuxt

Updated by Tom Wells on

Google Adsense is one of the leading advertising platforms for monetising your content on the web. However, when building a nuxt blog or web app, it's not quite so obvious where to add their code snippet when you sign up. Thankfully, in this post, we have three different and simple methods to add the Adsense snippet to your Nuxt project.

Method 1: Add to your Nuxt App Template

One of the "little-known" features of Nuxt is the ability to amend the app template. This template is the HTML file used by Nuxt to generate your app, which makes it perfect for adding global changes to your whole project. Their description of the app template is: You can customize the HTML app template used by Nuxt.js to include scripts or conditional CSS classes.

To change the app template, create an app.html file in your root directory. By default, the app.html file looks like this:

/app.html
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

As you can see, there's some stuff in here you don't want to touch. However, adding Google Adsense to this file is simple and straightforward:

/app.html
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
    <script
      data-ad-client="ca-pub-################"
      async
      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
    ></script>
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

Replace the data-ad-client with your ID and Google Adsense will now be added to your Nuxt project on every route.

Also note: this method can work with other scripts and static content for your web app. For example, rather than add Google fonts through an additional dependency, you could add them to your project globally with this method (just like a regular website!).

Method 2: Use the @nuxtjs/google-adsense package

You're probably wondering "why isn't this the first method?". Well, it could be. Using this package is about as easy, and you don't have to worry about changes to the app template with future updates etc. However, this dependency hasn't updated in three years, and for something as simple as adding a code snippet to the <head> of your app, I feel this package isn't required.

In any case, here's how to add it to your project:

yarn add @nuxtjs/google-adsense or npm i --save @nuxtjs/google-adsense to install the dependency.

Then, in your nuxt.config.js file:

/nuxt.config.js
export default {
  {
    modules: ['@nuxtjs/google-adsense'],

  'google-adsense': {
      id: 'ca-pub-################'
    }
  }
}

Once again, working with Nuxt makes this super-easy! Replace the id with your own, and you're good to go.

Method 3: Add the snippet to your config file

Finally, the last available option is to add the snippet contents into the head section of the nuxt.config.js file. Again, this is straightforward, but it's the least recommended on this list due to it being the most cumbersome (in my opinion). This method is similar to adding it to your app template, but it further clogs up your config file. Furthermore, if the vue-meta dependency changes in future, you may need to change this.

Here is how to add it to your config:

/nuxt.config.js
export default {
  head: {
    script: [
      {
        src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js',
        'data-ad-client': 'ca-pub-################',
        async: true
      }
    ]
  }
}

Once again, replace the data-ad-client property.

Wrapping up

All three of the above methods are perfectly acceptable for your Nuxt project, so use your preferred method. You'll be up and running in only a few minutes.

If you found this post useful or have any questions, follow me on twitter and show your support.

adsensenuxt