mazipan / vue-google-adsense

💰 Vue.js Google Adsense Component with InFeed and InArticle Ads support
https://mazipan.github.io/vue-google-adsense/
MIT License
257 stars 42 forks source link

[🐛 Bug] - Not work in Gridsome #155

Closed Lowell130 closed 3 years ago

Lowell130 commented 3 years ago

When add all the info the main.ts file and run develop i see current error in the console:

Uncaught TypeError: Cannot read property 'install' of undefined

Here is the config that I use:

// This is the main.js file. Import global CSS and scripts here.
// The Client API can be used here. Learn more: gridsome.org/docs/client-api

import DefaultLayout from '~/layouts/Default.vue'
import BootstrapVue from 'bootstrap-vue'

//custom bt style
import '~/assets/fonts/fontawesome/css/all.css';

//newlayout
import '~/assets/css/bootstrap.css'
import '~/assets/css/style.css'

export default function (Vue, { router, head, isClient }) {

//adsense
if (isClient) {
  Vue.use(require('vue-script2'));
  Vue.use(require('vue-google-adsense/dist/Adsense.min.js').default);
  Vue.use(require('vue-google-adsense/dist/InArticleAdsense.min.js').default);
  Vue.use(require('vue-google-adsense/dist/InFeedAdsense.min.js').default);
}

  // Set google font CDN
head.link.push({
    rel: 'stylesheet',
    href: 'https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap'
})

  // Set default layout as a global component
  Vue.component('Layout', DefaultLayout)
  Vue.use(BootstrapVue)

}

and i used in my template (with correct date, sure)

<Adsense
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
    data-ad-slot="1234567890">
</Adsense>
mazipan commented 3 years ago

Sorry, wrong documentation, it should remove the .default:

if (isClient) {
  Vue.use(require('vue-script2'));
  Vue.use(require('vue-google-adsense/dist/Adsense.min.js'));
  Vue.use(require('vue-google-adsense/dist/InArticleAdsense.min.js'));
  Vue.use(require('vue-google-adsense/dist/InFeedAdsense.min.js'));
}