VuePressにGoogleAdsenseで広告を配置する方法

今回使用したライブラリです。 Vue Google Adsense | Irfan Maulana

vue-cliを使って作ったVue.js + webpackのWEBアプリケーションにGoogleアドセンスを導入したい場合は以下の記事を参考になります。【アドセンス】Vue.jsアプリケーションにアドセンス導入【vue-cli】 - The sky is the limit

VuePressに配置

npm install vue-script2 vue-google-adsense

yarn add vue-script2 vue-google-adsense

VuePressアプリは標準のVueアプリなので、ファイルを作成することでアプリレベルの拡張機能を適用することができます。ファイル.vuepress/enhanceApp.jsは、アプリケーションにインポートされます。

.vuepress/enhanceApp.jsを作成し以下を追記。

import Ads from 'vue-google-adsense'

Vue.use(require('vue-script2'))
Vue.use(Ads.Adsense)
Vue.use(Ads.InArticleAdsense)
Vue.use(Ads.InFeedAdsense)

あとはコンポーネントを設置するだけです。
ローカル環境だと<InArticleAdsense>と<InFeedAdsense>が表示されなかったのですが、本番環境にあげると表示されました。

以下は広告の表示例です。