# Show AdSense Samples

This is a VuePress and Vue Google AdSense sample site.

If you want to use Vue Google AdSense, please read a below article.
How it works

<CallAdsense>, <CallInArticleAdsense> and <CallInFeedAdsense> are wrap components that I implemented.

Please refer this repository.
https://github.com/tacck/vuepress-google-adsense-sample

# Display

Use like this.

<ClientOnly>
  <CallAdsense />
</ClientOnly>

And, edit docs/.vuepress/components/CallAdsense.vue directory.

<template>
  <div>
    <Adsense
      data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
      data-ad-slot="XXXXXXXXXX"
    />
  </div>
</template>

# InArticleAdsense

Use like this.

<ClientOnly>
  <CallInArticleAdsense />
</ClientOnly>

And, edit docs/.vuepress/components/CallInArticleAdsense.vue directory.

<template>
  <div>
    <InArticleAdsense
      data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
      data-ad-slot="XXXXXXXXXX"
    />
  </div>
</template>

# InFeedAdsense

Use like this.

<ClientOnly>
  <CallInFeedAdsense />
</ClientOnly>

And, edit docs/.vuepress/components/CallInFeedAdsense.vue directory.

<template>
  <div>
    <InFeedAdsense
      data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
      data-ad-slot="XXXXXXXXXX"
      data-ad-layout-key="-XX+XX+XX-XX+XX
    />
  </div>
</template>