I've already tried to put it as custom directive, but JS reject script tag in any strings (unterminated literal string). Also, vue-google-adsense and vue-adsense plugins doesn't work for me, because they don't get all parameters that Adsense gives, so ads becomes not responsive etc.

I've already tried to put it as custom directive, but JS reject script tag in any strings (unterminated literal string). Also, vue-google-adsense and vue-adsense plugins doesn't work for me, because they don't get all parameters that Adsense gives, so ads becomes not responsive etc.

• javascript
• vue.js
• adsense

• Have a look here, maybe it can help: stackoverflow.com/questions/6197768/… – Ren Commented Feb 17, 2019 at 11:31
• Thank you, but I've seen it before :( – Andrew Rusinas Commented Feb 17, 2019 at 18:39
• I used vue-meta and it works great for me. Article: the-koi.com/projects/… – alexcodes Commented Feb 23, 2022 at 13:19

2 Answers 2

In the index.html file, add the adsense code out of the #app :

<div id="app"></div>
<div id="divadsensedisplaynone" style="display:none;">
    <!-- put here all adsense code -->
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
        style="display:block"
        data-ad-client="ca-pub-xxxxxx"
        data-ad-slot="xxxxxx"
        data-ad-format="auto"
        data-full-width-responsive="true"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>

In your main App.vue or any Vue file, add this where you want the ad to be shown (you are free to change the style) :

<div id="adsgoeshere" style="background: #1d1f29; padding-top:60px; text-align: center;" v-html="adsenseContent"></div>

In the data add :

 adsenseContent: ''

Finally, in the mounted function, add :

this.adsenseContent = document.getElementById('divadsensedisplaynone').innerHTML

And that's it ! You don't need any library.

This is what I got working for me in vue3.

<template>
  <div id="ad-container"></div>
</template>
<script>

export default {
  name: 'AdComponent',
  mounted() {
    this.loadAd();
  },
  methods: {
    loadAd() {
      let adContainer = document.getElementById('ad-container'); 

      let ins = document.createElement('ins');
      ins.className = 'adsbygoogle';
      ins.style.display = 'block';
      ins.setAttribute('data-ad-client', 'ca-pub-xxxxxx');
      ins.setAttribute('data-ad-slot', 'xxxxxx');
      ins.setAttribute('data-ad-format', 'auto');
      ins.setAttribute('data-full-width-responsive', 'true');
      adContainer.appendChild(ins);


      (adsbygoogle = window.adsbygoogle || []).push({});
    }
  }
}
<script>