Adsense for Gridsome

components-Adsense.vue

<template>
  <ins class="adsbygoogle"
    :data-ad-client="adClient"
    :data-ad-slot="adSlot"
    :data-ad-format="adFormat"
    :style="adStyle"></ins>
</template>

<script>
export default {
  props: {
    adClient: {
      type: String,
      required: true
    },
    adSlot: {
      type: String,
      required: true
    },
    adFormat: {
      type: String,
      required: false,
      default: 'auto'
    },
    adStyle: {
      type: String,
      required: false,
      default: 'display: block'
    }
  },
  mounted() {
    (window.adsbygoogle = window.adsbygoogle || []).push({})
  }
}
</script>

main.js

import Vue from 'vue';

// default layout
import DefaultLayout from '~/layouts/Default.vue';

export default function (Vue, { head }) {
	Vue.use(VueDisqus)

	Vue.component('Layout', DefaultLayout)
  
	head.script.push(
	{
		type: 'text/javascript',
        src: '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js',
        async: true
	}
	)
}

pages-Example.vue

<template>
  <Layout>
    .... insert the following code anywhere in the layout
    <Adsense
        class="mb-5"
        ad-client="ca-pub-XXXXXXXXX"
        ad-slot="XXXXXXXXXX"
        ad-style="display:block !important;"
        ad-format="auto">
      </Adsense>
      .... 
  </Layout>
</template>

<script>
import Adsense from '~/components/Adsense.vue';
export default {
  components: {
    Adsense
  }
}
</script>