How to add google adsense in Vue.js component?

Question

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.

Answer 1

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.