Nuxt.js Integration issues

[iiAku]

Hello, Thanks for this great adsense integration. I have seen the 2 closed issues regarding nuxt integration. I also track down how you integrated it into your blog. However it seems it's still hard to get adsense being integrated properly into nuxt.js

• I'm working locally
• I set a domain pointing to 127.0.0.1 where this sub domain is part of a verified domain in google adsense, I also added this subdomain in the google adsense console
• "nuxt": "2.9.2"
• "vue-script2": "^2.1.0"
• "vue-google-adsense": "^1.7.0"

Added this to plugin list in nuxt.configs.js: { src: "~/plugins/vue-google-adsense", ssr: false } Created plugins/vue-google-adsense.js with following content

import Vue from "vue";
import Ads from "vue-google-adsense";

Vue.use(require("vue-script2"));

Vue.use(Ads.Adsense);

Tried to integrate (with and without data-ad-test prop):

    <Adsense
      data-ad-client="ca-pub-XXXXXXXXX"
      data-ad-slot="XXXXXXXXXX"
      data-ad-test="on"
    >
    </Adsense>

I noticed 2 issues while adding a Adsense component that might need to be indicated in the README.md.

First

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

I presume this is happening because the plugin has ssr-false option, so the renderer has sent an output which is different from the one actually generated. This can be fixed with a block or more recently (since no-ssr will be deprecated) .

Second

Setting the subdomain seems to fix at least an issue, I was constantly having 2 GET requests toward googleads.g.doubleclick.net where one of them was getting either a 400 or 403 status code. Once I added the subdomain to the verified domain I did not longer had this 400/403 error. Nevertheless it did not fixed my issue.

This way everything seems to be running fine, the adsense object even create extra space into the page but does not display. I disabled my adblocker, tried from firefox/brave/chrome where tracking/adblocker are normally disabled, none of them showed the advertisement. I have put the exact same advertisement on a php page from the exact same domain name and it has been displayed properly. Do you have any leads, tips or recommandations, thanks for your help and work.

[158008001]

The code is very busy，Looking forward to updating~

[mazipan]

I am just using like this in my blog, file vue-google-adsense.js

import Vue from 'vue'
import Ads from 'vue-google-adsense'

Vue.use(require('vue-script2'))

Vue.use(Ads.Adsense)
Vue.use(Ads.InArticleAdsense)
Vue.use(Ads.InFeedAdsense)

if (process.env.ENABLE_ADS) {
  Vue.use(Ads.AutoAdsense, { adClient: process.env.ADS_CLIENT })
}