Repository: mazipan/vue-google-adsense
Branch: master
Commit: fdffbea2cecc
Files: 56
Total size: 68.3 KB
Directory structure:
gitextract_wxo3x_en/
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ ├── PULL_REQUEST_TEMPLATE.md
│ ├── auto-comment.yml
│ └── workflows/
│ ├── codeql-analysis.yml
│ └── deploy.yml
├── .gitignore
├── .kodiak.toml
├── .prettierignore
├── .prettierrc.js
├── LICENSE
├── README.md
├── package.json
├── packages/
│ ├── demo/
│ │ ├── README.md
│ │ ├── babel.config.js
│ │ ├── package.json
│ │ ├── public/
│ │ │ ├── index.html
│ │ │ ├── robots.txt
│ │ │ └── site.webmanifest
│ │ ├── src/
│ │ │ ├── App.vue
│ │ │ ├── components/
│ │ │ │ ├── Box.vue
│ │ │ │ ├── Header.vue
│ │ │ │ └── ImageCard.vue
│ │ │ ├── main.ts
│ │ │ ├── registerServiceWorker.ts
│ │ │ ├── router/
│ │ │ │ └── index.ts
│ │ │ ├── shims-tsx.d.ts
│ │ │ ├── shims-vue.d.ts
│ │ │ └── views/
│ │ │ ├── Home.vue
│ │ │ ├── InArticle.vue
│ │ │ └── InFeed.vue
│ │ ├── tsconfig.json
│ │ └── vue.config.js
│ └── lib/
│ ├── README.md
│ ├── bili.config.ts
│ ├── package.json
│ ├── src/
│ │ ├── @types/
│ │ │ └── global.d.ts
│ │ ├── VueGoogleAdsense.ts
│ │ ├── ads/
│ │ │ ├── Adsense.ts
│ │ │ ├── AdsenseComponent.vue
│ │ │ ├── AutoAdsense.ts
│ │ │ ├── InArticleAdsense.ts
│ │ │ ├── InArticleAdsenseComponent.vue
│ │ │ ├── InFeedAdsense.ts
│ │ │ └── InFeedAdsenseComponent.vue
│ │ ├── shims-vue.d.ts
│ │ └── utils/
│ │ ├── assign.ts
│ │ ├── constant.ts
│ │ └── props.ts
│ └── tsconfig.json
├── pnpm-workspace.yaml
└── turbo.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
root = true
[*.{js,jsx,ts,tsx,vue}]
charset = utf-8
indent_style = space
end_of_line = lf
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
================================================
FILE: .eslintignore
================================================
node_modules
dist
================================================
FILE: .eslintrc.js
================================================
module.exports = {
root: true,
env: {
node: true,
},
extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/typescript/recommended', '@vue/prettier'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-tabs': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
},
parserOptions: {
parser: '@typescript-eslint/parser',
},
}
================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms
github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
patreon: # Replace with a single Patreon username
open_collective: # Replace with a single Open Collective username
ko_fi: mazipan
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
otechie: # Replace with a single Otechie username
custom: ['https://mazipan.space/support']
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.md
================================================
---
name: Bug Report
about: Something's not working as expected.
title: ''
labels: bug
assignees: mazipan
---
## Description
<!-- Describe the issue that you're seeing. -->
## Expected Behaviour
<!-- What should've happened? -->
## Additional Information
<!-- (Optional) Any additional info that you think might come in handy for debugging. -->
================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.md
================================================
---
name: Feature Request
about: Propose feature additions to the project.
title: ''
labels: enhancement
assignees: mazipan
---
## Description
<!-- Describe the proposed feature and how the project could benefit from it. -->
## Implementation Model
<!-- (Optional) If available, outline the possible steps to take (e.g. lines of code to change, architectural details, etc.) to implement the feature. -->
## Tasks
<!-- (Optional) List any available tasks for this issue with checkbox lists. -->
- [ ] ...
- [ ] ...
- [ ] ...
================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
Closes <!-- mention the issue that you're trying to close with this PR -->
## Description
<!-- Describe your implementation plan and approach -->
## Current Tasks
<!-- (Optional) List the tasks that you're planning to do in this PR.
This is to indicate how much you have been progressing before this PR is ready for review -->
- [ ] (task 1)
- [ ] (task 2)
- [ ] (task 3)
================================================
FILE: .github/auto-comment.yml
================================================
pullRequestOpened: >
Thank you for raising your pull request.
Please make sure you have followed @mazipan
And please push ⭐ button in this repository
================================================
FILE: .github/workflows/codeql-analysis.yml
================================================
# For most projects, this workflow file will not need changing; you simply need
# to commit it to your repository.
#
# You may wish to alter this file to override the set of languages analyzed,
# or to provide custom queries or build logic.
name: "CodeQL"
on:
schedule:
- cron: '0 20 * * 2'
jobs:
analyze:
name: Analyze
runs-on: ubuntu-latest
strategy:
fail-fast: false
matrix:
# Override automatic language detection by changing the below list
# Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
language: ['javascript']
# Learn more...
# https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection
steps:
- name: Checkout repository
uses: actions/checkout@v2
with:
# We must fetch at least the immediate parents so that if this is
# a pull request then we can checkout the head.
fetch-depth: 2
# If this run was triggered by a pull request event, then checkout
# the head of the pull request instead of the merge commit.
- run: git checkout HEAD^2
if: ${{ github.event_name == 'pull_request' }}
# Initializes the CodeQL tools for scanning.
- name: Initialize CodeQL
uses: github/codeql-action/init@v1
with:
languages: ${{ matrix.language }}
# If you wish to specify custom queries, you can do so here or in a config file.
# By default, queries listed here will override any specified in a config file.
# Prefix the list here with "+" to use these queries and those in the config file.
# queries: ./path/to/local/query, your-org/your-repo/queries@main
# Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
# If this step fails, then you should remove it and run the build manually (see below)
- name: Autobuild
uses: github/codeql-action/autobuild@v1
# ℹ️ Command-line programs to run using the OS shell.
# 📚 https://git.io/JvXDl
# ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
# and modify them (or add more) to build your code if your project
# uses a compiled language
#- run: |
# make bootstrap
# make release
- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@v1
================================================
FILE: .github/workflows/deploy.yml
================================================
name: 'Build and Deploy'
on:
push:
branches: [master]
jobs:
build_and_deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
with:
persist-credentials: false
fetch-depth: 0
- name: Cache turbo dir
id: turbo-cache
uses: actions/cache@v2
with:
path: .turbo
key: turbo-lite-packages-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
turbo-lite-packages-${{ runner.os }}-
- name: Cache pnpm modules
uses: actions/cache@v2
with:
path: ~/.pnpm-store
key: pnpm6-lite-packages-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
pnpm6-lite-packages-${{ runner.os }}-
- name: pnpm install recursive
uses: pnpm/action-setup@v2.2.1
with:
version: 6.32.3
run_install: |
- recursive: true
args: [--frozen-lockfile]
- name: Build library
run: pnpm run build:lib
- name: Build demo app
run: pnpm run build:demo
- name: GitHub Pages Deploy
uses: peaceiris/actions-gh-pages@v3
with:
personal_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./packages/demo/dist/
publish_branch: gh-pages
================================================
FILE: .gitignore
================================================
.DS_Store
node_modules/
npm-debug.log
yarn-error.log
yarn.lock
package-lock.json
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
dist/
.turbo/
================================================
FILE: .kodiak.toml
================================================
version = 1
[update]
always = true # default: false
ignored_usernames = ["dependabot", "snyk-bot"]
[approve]
auto_approve_usernames = ["ImgBotApp", "imgbot"]
[merge.automerge_dependencies]
versions = ["minor", "patch"]
usernames = ["dependabot", "snyk-bot"]
# https://kodiakhq.com/docs/recipes#better-merge-messages
[merge.message]
title = "pull_request_title" # default: "github_default"
body = "pull_request_body" # default: "github_default"
include_pr_number = true
include_coauthors = true
================================================
FILE: .prettierignore
================================================
node_modules
dist
================================================
FILE: .prettierrc.js
================================================
module.exports = {
bracketSpacing: true,
printWidth: 140,
singleQuote: true,
semi: false,
trailingComma: 'es5',
};
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2018 Irfan Maulana
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# 💰 Vue Google Adsense
 [](https://bundlephobia.com/result?p=vue-google-adsense) [](https://packagephobia.com/result?p=vue-google-adsense) [](https://github.com/mazipan/vue-google-adsense/actions/workflows/deploy.yml) [](https://www.npmjs.com/package/vue-google-adsense)   [](#contributors)
> Vue.js Google Adsense Component with InFeed and InArticle Ads support
## Vue 2
You are seing `vue-google-adsense@2.x.x` which ONLY compatible for Vue 3, if you want to support Vue 2, please use `vue-google-adsense@1.x.x`.
Documentation for `vue-google-adsense@1.x.x` can be found on the branch [v1-for-vue2](https://github.com/mazipan/vue-google-adsense/tree/v1-for-vue2)
## 🎉 Demo
https://mazipan.github.io/vue-google-adsense/
## :question: What is In Feed and In Article Ads?
At least there is three (3) type ads in Google Adsense :
- **Responsive Ads**: A simple way to get ads on your page. Choose the size, placement and style you want to display. [Learn more](https://support.google.com/adsense/answer/6002575?hl=en_GB)
- **In Article Ads**: Ads that fit seamlessly in between the paragraphs of your pages for an enhanced reading experience. [Learn more](https://support.google.com/adsense/answer/7320112?hl=en_GB)
- **In Feed Ads**: Ads that flow naturally inside a list of articles or products on your site, offering a great user experience. [Learn more](https://support.google.com/adsense/answer/7171765?hl=en_GB)
## 🚀 Getting started
### Installation
Need dependencies [vue-scriptx](https://www.npmjs.com/package/vue-scriptx), you need to install :
```javascript
npm install vue-scriptx vue-google-adsense@next --save
```
### Use in `main.js`
```javascript
import ScriptX from 'vue-scriptx'
app.use(ScriptX)
import Ads from 'vue-google-adsense'
app.use(Ads.Adsense)
app.use(Ads.InArticleAdsense)
app.use(Ads.InFeedAdsense)
```
### Use partial import
Import only `AdsType` you need
```javascript
import Adsense from 'vue-google-adsense/dist/Adsense.min.js'
import InArticleAdsense from 'vue-google-adsense/dist/InArticleAdsense.min.js'
import InFeedAdsense from 'vue-google-adsense/dist/InFeedAdsense.min.js'
import ScriptX from 'vue-scriptx'
app.use(ScriptX)
app.use(Adsense)
app.use(InArticleAdsense)
app.use(InFeedAdsense)
```
### Usage in Nuxt.js
Create file `plugins/vue-google-adsense.js`, with code :
```javascript
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)
```
Then update your `nuxt.config.js`, with code :
```javascript
module.exports = {
plugins: [
{ src: '~/plugins/vue-google-adsense', ssr: false }
]
}
```
### Usage in Gridsome
Insert these code in `src/main.js`:
```javascript
// The Client API can be used here. Learn more: gridsome.org/docs/client-api
export default function (Vue, { router, head, isClient }) {
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'));
}
}
```
### Template
VueAdsense Template :
```html
<Adsense
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="1234567890">
</Adsense>
```
VueInArticleAdsense Template :
```html
<InArticleAdsense
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="1234567890">
</InArticleAdsense>
```
VueInFeedAdsense Template :
```html
<InFeedAdsense
data-ad-layout-key="-fg+5n+6t-e7+r"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="1234567890">
</InFeedAdsense>
```
### Auto Ads Usage
```js
import ScriptX from 'vue-scriptx'
app.use(ScriptX)
import Ads from 'vue-google-adsense'
app.use(Ads.AutoAdsense, { adClient: 'YOUR_GOOGLE_AD_CLIENT', isNewAdsCode: true })
```
## :gift: Available Props
| Attribute | Type |Default | Description |
|------------------- |------------ |--------------|--------------------------------------- |
| `root-class` | String | `adswrapper` | Class for fill in wrapper block |
| `ins-class` | String | `empty` | Class for fill in `ins` tag |
| `ins-style` | String | `display:block;` | Style for fill in `ins` tag |
| `data-ad-client` | String | `empty` | Attribute `data-ad-client` from adsense |
| `data-ad-slot` | String | `empty` | Attribute `data-ad-slot` from adsense |
| `data-ad-layout-key` | String | `empty` | Attribute `data-ad-layout-key` from adsense |
| `data-ad-test` | String | `empty` | Attribute `data-ad-test` from adsense |
| `data-ad-format` | String | `auto` for Adsense Ads<br> `fluid` for InFeed and InArticle Ads | Attribute `data-ad-format` from adsense <br> Possible values are `auto`, `horizontal`, `vertical`, `rectangle` or `fluid` |
| `data-full-width-responsive` | String (`yes` or `no`) | `no` | Attribute `data-full-width-responsive` from adsense |
| `is-non-personalized-ads` | String (`yes` or `no`) | `no` | Props for request `non-personalized` ads, [read more](https://support.google.com/adsense/answer/9042142?hl=en&ref_topic=7670012) |
| `is-new-ads-code` | String (`yes` or `no`) | `no` | Use new Adsense code (per 19 july 2021), [read more](https://support.google.com/adsense/answer/10627874) |
| `data-ad-region` | String | `empty` | See PR [#163](https://github.com/mazipan/vue-google-adsense/pull/163) |
## :metal: Who is using this library
Already used in production for these project :
+ [Blog-2.0](https://github.com/mazipan/blog-2.0)
+ [Explore-Github](https:///mazipan.github.io/explore-github)
+ [Fire Jak](https://mazipan.github.io/FireJak)
+ [Rumah Sakit Jakarta](https://mazipan.github.io/RumahSakitJakarta)
+ [ChuckNorris](https://mazipan.github.io/chucknorris)
+ [Nuxt blog - Surmon.me](https://github.com/surmon-china/surmon.me)
+ Etc... // You can add the list here via pull request
## 🏃 Development
We are using [pnpm](https://pnpm.js.org/), please read the [Installation](https://pnpm.js.org/en/installation) section first.
``` bash
# install dependencies
pnpm run bs
# serve with demo page
pnpm run dev:demo
# build for production
pnpm run build:demo
pnpm run build:lib
```
## Support me
- 👉 🇮🇩 [Trakteer](https://trakteer.id/mazipan?utm_source=github)
- 👉 🌍 [BuyMeACoffe](https://www.buymeacoffee.com/mazipan?utm_source=github)
- 👉 🌍 [Paypal](https://www.paypal.me/mazipan?utm_source=github)
- 👉 🌍 [Ko-Fi](https://ko-fi.com/mazipan)
---
Copyright © 2018 Built with ❤️ by Irfan Maulana
================================================
FILE: package.json
================================================
{
"name": "@vue-google-adsense/monorepo",
"version": "2.0.1",
"private": false,
"description": "Vue.js Google Adsense Component with InFeed and InArticle Ads support",
"keywords": [
"vuejs adsense",
"vue2 adsense",
"vue adsense",
"vuejs google adsense",
"vue2 google adsense",
"vue google adsense"
],
"bugs": {
"url": "https://github.com/mazipan/vue-google-adsense/issues"
},
"repository": {
"type": "git",
"url": "https://github.com/mazipan/vue-google-adsense.git"
},
"license": "MIT",
"author": "Irfan Maulana <mazipanneh@gmail.com>",
"main": "dist/VueGoogleAdsense.min.js",
"jsdelivr": "dist/VueGoogleAdsense.min.js",
"unpkg": "dist/VueGoogleAdsense.min.js",
"module": "dist/VueGoogleAdsense.min.js",
"files": [
"dist"
],
"scripts": {
"bootstrap": "pnpm recursive install --reporter append-only && pnpm run build:all",
"bs": "pnpm run bootstrap",
"build:all": "turbo run build --scope=vue-google-adsense",
"build:demo": "turbo run build --scope=@vue-google-adsense/demo",
"build:lib": "turbo run build --scope=vue-google-adsense",
"dev:demo": "turbo run dev --scope=@vue-google-adsense/demo",
"lint:all": "eslint packages/** --fix",
"test": "echo \"Error: no test specified\" && exit 0"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,ts,vue}": "pnpm run lint"
},
"devDependencies": {
"@babel/core": "^7.17.2",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-syntax-jsx": "^7.16.7",
"@babel/plugin-transform-runtime": "^7.17.0",
"@babel/preset-env": "^7.16.11",
"@typescript-eslint/eslint-plugin": "4.22.1",
"@typescript-eslint/parser": "4.22.1",
"@vue/cli-plugin-eslint": "4.5.12",
"@vue/eslint-config-prettier": "^7.0.0",
"@vue/eslint-config-standard": "6.0.0",
"@vue/eslint-config-typescript": "7.0.0",
"@vue/cli-service": "~4.5.15",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-node": "11.1.0",
"eslint-plugin-promise": "5.1.0",
"eslint-plugin-standard": "5.0.0",
"eslint-plugin-vue": "7.9.0",
"husky": "3.1.0",
"lint-staged": "9.5.0",
"prettier": "^2.5.1",
"tslib": "2.2.0",
"turbo": "^1.1.4",
"typescript": "4.2.4"
},
"peerDependencies": {
"@vue/cli-service": "~4.5.15",
"vue": "^3.0.0",
"vue-scriptx": "^0.2.5"
},
"engines": {
"node": ">=14.17 <15",
"pnpm": ">=6 <7",
"yarn": ">=1.22.11"
},
"packageManager": "pnpm@6.32.3"
}
================================================
FILE: packages/demo/README.md
================================================
# 💰 Vue Google Adsense
 [](https://bundlephobia.com/result?p=vue-google-adsense) [](https://packagephobia.com/result?p=vue-google-adsense) [](https://github.com/mazipan/vue-google-adsense/actions/workflows/deploy.yml) [](https://www.npmjs.com/package/vue-google-adsense)   [](#contributors)
> Vue.js Google Adsense Component with InFeed and InArticle Ads support
## Vue 2
You are seing `vue-google-adsense@2.x.x` which ONLY compatible for Vue 3, if you want to support Vue 2, please use `vue-google-adsense@1.x.x`.
Documentation for `vue-google-adsense@1.x.x` can be found on the branch [v1-for-vue2](https://github.com/mazipan/vue-google-adsense/tree/v1-for-vue2)
## 🎉 Demo
https://mazipan.github.io/vue-google-adsense/
## :question: What is In Feed and In Article Ads?
At least there is three (3) type ads in Google Adsense :
- **Responsive Ads**: A simple way to get ads on your page. Choose the size, placement and style you want to display. [Learn more](https://support.google.com/adsense/answer/6002575?hl=en_GB)
- **In Article Ads**: Ads that fit seamlessly in between the paragraphs of your pages for an enhanced reading experience. [Learn more](https://support.google.com/adsense/answer/7320112?hl=en_GB)
- **In Feed Ads**: Ads that flow naturally inside a list of articles or products on your site, offering a great user experience. [Learn more](https://support.google.com/adsense/answer/7171765?hl=en_GB)
## 🚀 Getting started
### Installation
Need dependencies [vue-scriptx](https://www.npmjs.com/package/vue-scriptx), you need to install :
```javascript
npm install vue-scriptx vue-google-adsense@next --save
```
### Use in `main.js`
```javascript
import ScriptX from 'vue-scriptx'
app.use(ScriptX)
import Ads from 'vue-google-adsense'
app.use(Ads.Adsense)
app.use(Ads.InArticleAdsense)
app.use(Ads.InFeedAdsense)
```
### Use partial import
Import only `AdsType` you need
```javascript
import Adsense from 'vue-google-adsense/dist/Adsense.min.js'
import InArticleAdsense from 'vue-google-adsense/dist/InArticleAdsense.min.js'
import InFeedAdsense from 'vue-google-adsense/dist/InFeedAdsense.min.js'
import ScriptX from 'vue-scriptx'
app.use(ScriptX)
app.use(Adsense)
app.use(InArticleAdsense)
app.use(InFeedAdsense)
```
### Usage in Nuxt.js
Create file `plugins/vue-google-adsense.js`, with code :
```javascript
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)
```
Then update your `nuxt.config.js`, with code :
```javascript
module.exports = {
plugins: [
{ src: '~/plugins/vue-google-adsense', ssr: false }
]
}
```
### Usage in Gridsome
Insert these code in `src/main.js`:
```javascript
// The Client API can be used here. Learn more: gridsome.org/docs/client-api
export default function (Vue, { router, head, isClient }) {
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'));
}
}
```
### Template
VueAdsense Template :
```html
<Adsense
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="1234567890">
</Adsense>
```
VueInArticleAdsense Template :
```html
<InArticleAdsense
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="1234567890">
</InArticleAdsense>
```
VueInFeedAdsense Template :
```html
<InFeedAdsense
data-ad-layout-key="-fg+5n+6t-e7+r"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="1234567890">
</InFeedAdsense>
```
### Auto Ads Usage
```js
import ScriptX from 'vue-scriptx'
app.use(ScriptX)
import Ads from 'vue-google-adsense'
app.use(Ads.AutoAdsense, { adClient: 'YOUR_GOOGLE_AD_CLIENT', isNewAdsCode: true })
```
## :gift: Available Props
| Attribute | Type |Default | Description |
|------------------- |------------ |--------------|--------------------------------------- |
| `root-class` | String | `adswrapper` | Class for fill in wrapper block |
| `ins-class` | String | `empty` | Class for fill in `ins` tag |
| `ins-style` | String | `display:block;` | Style for fill in `ins` tag |
| `data-ad-client` | String | `empty` | Attribute `data-ad-client` from adsense |
| `data-ad-slot` | String | `empty` | Attribute `data-ad-slot` from adsense |
| `data-ad-layout-key` | String | `empty` | Attribute `data-ad-layout-key` from adsense |
| `data-ad-test` | String | `empty` | Attribute `data-ad-test` from adsense |
| `data-ad-format` | String | `auto` for Adsense Ads<br> `fluid` for InFeed and InArticle Ads | Attribute `data-ad-format` from adsense <br> Possible values are `auto`, `horizontal`, `vertical`, `rectangle` or `fluid` |
| `data-full-width-responsive` | String (`yes` or `no`) | `no` | Attribute `data-full-width-responsive` from adsense |
| `is-non-personalized-ads` | String (`yes` or `no`) | `no` | Props for request `non-personalized` ads, [read more](https://support.google.com/adsense/answer/9042142?hl=en&ref_topic=7670012) |
| `is-new-ads-code` | String (`yes` or `no`) | `no` | Use new Adsense code (per 19 july 2021), [read more](https://support.google.com/adsense/answer/10627874) |
| `data-ad-region` | String | `empty` | See PR [#163](https://github.com/mazipan/vue-google-adsense/pull/163) |
## :metal: Who is using this library
Already used in production for these project :
+ [Blog-2.0](https://github.com/mazipan/blog-2.0)
+ [Explore-Github](https:///mazipan.github.io/explore-github)
+ [Fire Jak](https://mazipan.github.io/FireJak)
+ [Rumah Sakit Jakarta](https://mazipan.github.io/RumahSakitJakarta)
+ [ChuckNorris](https://mazipan.github.io/chucknorris)
+ [Nuxt blog - Surmon.me](https://github.com/surmon-china/surmon.me)
+ Etc... // You can add the list here via pull request
## 🏃 Development
We are using [pnpm](https://pnpm.js.org/), please read the [Installation](https://pnpm.js.org/en/installation) section first.
``` bash
# install dependencies
pnpm run bs
# serve with demo page
pnpm run dev:demo
# build for production
pnpm run build:demo
pnpm run build:lib
```
## Support me
- 👉 🇮🇩 [Trakteer](https://trakteer.id/mazipan?utm_source=github)
- 👉 🌍 [BuyMeACoffe](https://www.buymeacoffee.com/mazipan?utm_source=github)
- 👉 🌍 [Paypal](https://www.paypal.me/mazipan?utm_source=github)
- 👉 🌍 [Ko-Fi](https://ko-fi.com/mazipan)
---
Copyright © 2018 Built with ❤️ by Irfan Maulana
================================================
FILE: packages/demo/babel.config.js
================================================
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
}
================================================
FILE: packages/demo/package.json
================================================
{
"name": "@vue-google-adsense/demo",
"version": "2.0.1",
"description": "Vue.js Google Adsense Component with InFeed and InArticle Ads support",
"author": "Irfan Maulana (https://github.com/mazipan/)",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"dev": "vue-cli-service serve",
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"@types/node": "14.11.2",
"@vue/cli-plugin-babel": "~4.5.15",
"@vue/cli-plugin-pwa": "~4.5.15",
"@vue/cli-plugin-router": "~4.5.15",
"@vue/cli-plugin-typescript": "~4.5.15",
"@vue/cli-plugin-vuex": "~4.5.15",
"@vue/cli-service": "~4.5.15",
"@vue/compiler-sfc": "^3.2.31",
"babel-eslint": "10.1.0",
"bulma-dracula": "1.0.4",
"core-js": "3.6.5",
"eslint": ">= 4.12.1",
"prismjs": "1.21.0",
"register-service-worker": "1.7.1",
"sass": "^1.49.7",
"sass-loader": "10.1.1",
"tslib": "2.0.1",
"typescript": "~4.1.5",
"vue": "^3.0.0",
"vue-google-adsense": "workspace:*",
"vue-prism-component": "1.2.0",
"vue-router": "^4.0.0",
"vue-scriptx": "^0.2.5",
"vuex": "^4.0.0",
"webpack": "^5.69.0"
},
"homepage": "https://mazipan.github.io/vue-google-adsense/",
"license": "MIT",
"dependencies": {
"@popperjs/core": "^2.10.2",
"bootstrap": "^5.1.3",
"bootstrap-vue-3": "^0.1.5"
}
}
================================================
FILE: packages/demo/public/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>💰 Vue Google Adsense | Irfan Maulana</title>
<meta name="language" content="en-EN" />
<meta name="author" content="Irfan Maulana" />
<link rel="author" href="https://plus.google.com/u/0/+irfanmaulana-mazipan/posts" />
<link rel="publisher" href="https://plus.google.com/u/0/+irfanmaulana-mazipan" />
<meta name="keywords" content="vue adsense, vue google adsense, vuejs adsense, vuejs google adsense" />
<meta name="description" content="Vue.js Google Adsense Component with InFeed and InArticle Ads support" />
<meta property="og:title" content="💰 Vue Google Adsense | Irfan Maulana" />
<meta property="og:description" content="Vue.js Google Adsense Component with InFeed and InArticle Ads support" />
<meta property="og:url" content="https://mazipan.github.io/vue-google-adsense/" />
<meta property="og:site_name" content="💰 Vue Google Adsense" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@maz_ipan" />
<meta name="twitter:creator" content="@maz_ipan" />
<meta name="twitter:title" content="💰 Vue Google Adsense | Irfan Maulana" />
<meta name="twitter:description" content="Vue.js Google Adsense Component with InFeed and InArticle Ads support" />
<meta name="twitter:domain" content="https://mazipan.github.io/vue-google-adsense/" />
<link rel="home" href="https://mazipan.github.io/vue-google-adsense/">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-25065548-2"></script>
<script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-25065548-2');</script>
</head>
<body>
<noscript>
<strong>We're sorry but vue-currency-filter doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
================================================
FILE: packages/demo/public/robots.txt
================================================
User-agent: *
Disallow:
================================================
FILE: packages/demo/public/site.webmanifest
================================================
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
================================================
FILE: packages/demo/src/App.vue
================================================
<template>
<router-view />
</template>
<script>
export default {
name: 'App',
}
</script>
================================================
FILE: packages/demo/src/components/Box.vue
================================================
<template>
<b-card :title="title">
<b-card-text>
{{ description }}
</b-card-text>
<a :href="link" rel="noreferrer noopenner" target="_blank"
><b-button class="mb-2 mr-2" variant="outline-success"> Learn More </b-button></a
>
<router-link :to="demo"><b-button class="mb-2" variant="success"> See the demo </b-button></router-link>
</b-card>
</template>
<script lang="js">
export default {
name: 'Home',
props: {
title: {
type: String,
default: ''
},
description: {
type: String,
default: ''
},
link: {
type: String,
default: '/vue-google-adsense/'
},
demo: {
type: String,
default: '/'
},
}
}
</script>
================================================
FILE: packages/demo/src/components/Header.vue
================================================
<template>
<div class="hero">
<b-row mb="4" textAlign="center" align="center" justify="center" direction="column">
<h1>Vue Google Adsense</h1>
<h3>Vue.js Google Adsense Component with InFeed and InArticle Ads support</h3>
</b-row>
<b-row mb="2" align="center" justify="center" direction="column">
<a href="https://github.com/mazipan/vue-google-adsense">
<b-button variant="success">Github Repo</b-button>
</a>
</b-row>
<b-row align="center" justify="center">
<a href="https://www.npmjs.com/package/vue-google-adsense" target="_blank" rel="noopener noreferer" style="margin-right: 0.5rem">
<img alt="NPM Version" src="https://img.shields.io/npm/v/vue-google-adsense.svg" />
</a>
<a href="https://github.com/mazipan/vue-google-adsense" target="_blank" rel="noopener noreferer">
<img alt="GitHub Stars" src="https://img.shields.io/github/stars/mazipan/vue-google-adsense.svg?style=social" />
</a>
</b-row>
</div>
</template>
<script>
export default {
name: 'Header',
}
</script>
================================================
FILE: packages/demo/src/components/ImageCard.vue
================================================
<template>
<c-box maxW="sm" :mb="5" border-width="1px" rounded="lg" overflow="hidden">
<c-image :src="property.imageUrl" :alt="property.imageAlt" />
<c-box p="6">
<c-box d="flex" align-items="baseline">
<c-badge rounded="full" px="2" variant-color="green"> New </c-badge>
<c-box color="gray.500" font-weight="semibold" letter-spacing="wide" font-size="xs" text-transform="uppercase" ml="2">
{{ property.beds }} beds • {{ property.baths }} baths
</c-box>
</c-box>
<c-box mt="1" font-weight="semibold" as="h4" line-height="tight" is-truncated>
{{ property.title }}
</c-box>
<c-box>
{{ property.formattedPrice }}
<c-box as="span" color="gray.600" fontSize="sm"> / wk </c-box>
</c-box>
<c-box d="flex" mt="2" align-items="center">
<c-icon v-for="(_, i) in Array(5).fill('')" name="star" :key="i" :color="i < property.rating ? 'green.500' : 'gray.300'" />
<c-box as="span" ml="2" color="gray.600" font-size="sm"> {{ property.reviewCount }} reviews </c-box>
</c-box>
</c-box>
</c-box>
</template>
<script>
export default {
name: 'ImageCard',
data() {
return {
property: {
imageUrl: 'https://bit.ly/2Z4KKcF',
imageAlt: 'Rear view of modern home with pool',
beds: 3,
baths: 2,
title: 'Modern home in city center in the heart of historic Los Angeles',
formattedPrice: '$1,900.00',
reviewCount: 34,
rating: 4,
},
}
},
}
</script>
================================================
FILE: packages/demo/src/main.ts
================================================
// Import Vue and libs
import { createApp } from 'vue'
// Create Vue App
import App from './App.vue'
// ScriptX
import ScriptX from 'vue-scriptx'
// Ads
import Ads from 'vue-google-adsense'
import './registerServiceWorker'
// Router
import router from './router'
// Themes
import BootstrapVue3 from 'bootstrap-vue-3'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
const app = createApp(App)
app.use(ScriptX)
app.use(Ads.Adsense)
app.use(Ads.InArticleAdsense)
app.use(Ads.InFeedAdsense)
app.use(router)
app.use(BootstrapVue3)
// Start App
app.mount('#app')
================================================
FILE: packages/demo/src/registerServiceWorker.ts
================================================
/* eslint-disable no-console */
import { register } from 'register-service-worker'
if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, {
ready() {
console.log('App is being served from cache by a service worker.\n' + 'For more details, visit https://goo.gl/AFskqB')
},
registered() {
console.log('Service worker has been registered.')
},
cached() {
console.log('Content has been cached for offline use.')
},
updatefound() {
console.log('New content is downloading.')
},
updated() {
console.log('New content is available; please refresh.')
},
offline() {
console.log('No internet connection found. App is running in offline mode.')
},
error(error) {
console.error('Error during service worker registration:', error)
},
})
}
================================================
FILE: packages/demo/src/router/index.ts
================================================
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/in-article',
name: 'in-article',
component: () => import(/* webpackChunkName: "in-article" */ '../views/InArticle.vue'),
},
{
path: '/in-feed',
name: 'in-feed',
component: () => import(/* webpackChunkName: "in-feed" */ '../views/InFeed.vue'),
},
]
const router = createRouter({
history: createWebHashHistory(),
routes: routes,
})
export default router
================================================
FILE: packages/demo/src/shims-tsx.d.ts
================================================
import Vue, { VNode } from 'vue'
declare global {
namespace JSX {
// tslint:disable no-empty-interface
interface Element extends VNode {}
// tslint:disable no-empty-interface
interface ElementClass extends Vue {}
interface IntrinsicElements {
[elem: string]: any
}
}
}
================================================
FILE: packages/demo/src/shims-vue.d.ts
================================================
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}
================================================
FILE: packages/demo/src/views/Home.vue
================================================
<template>
<div class="home VueCurrencyFilter">
<section class="container hero">
<HeaderComponent />
</section>
<section class="container ads">
<b-row align="center" justify="center" direction="column">
<b-card w="100%" border-width="1px" rounded="lg" overflow="hidden">
<Adsense
style="width: 100%; min-width: 250px"
ins-style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-5442972248172818"
data-ad-slot="7319719723"
>
</Adsense>
</b-card>
</b-row>
</section>
<section class="container">
<b-card :spacing="5">
<Box
title="Default Adsense"
description="A simple way to get ads on your page. Choose the size, placement and style you want to display."
link="https://support.google.com/adsense/answer/6002575?hl=en_GB"
demo="/"
/>
<Box
title="In Article Adsense"
description="Ads that fit seamlessly in between the paragraphs of your pages for an enhanced reading experience."
link="https://support.google.com/adsense/answer/7320112?hl=en_GB"
demo="/in-article/"
/>
<Box
title="In Feed Adsense"
description="Ads that flow naturally inside a list of articles or products on your site, offering a great user experience."
link="https://support.google.com/adsense/answer/7171765?hl=en_GB"
demo="/in-feed/"
/>
</b-card>
</section>
<section class="container ads">
<b-row align="center" justify="center" direction="column">
<b-card w="100%" border-width="1px" rounded="lg" overflow="hidden">
<InArticleAdsense style="width: 100%; min-width: 250px" data-ad-client="ca-pub-5442972248172818" data-ad-slot="7974047383" />
</b-card>
</b-row>
</section>
<footer class="footer">
<b-row m="2" align="center" justify="center">
<p textAlign="center">Built with ❤️ by <a href="https://mazipan.space">Irfan Maulana</a></p>
</b-row>
</footer>
</div>
</template>
<script lang="js">
import HeaderComponent from '../components/Header'
import Box from '../components/Box'
export default {
name: 'Home',
components: {
HeaderComponent,
Box
},
data () {
return {
}
}
}
</script>
<style lang="scss">
pre:not(:last-of-type) {
margin-bottom: 2rem;
}
.container {
margin-top: 2em;
padding-left: 1rem;
padding-right: 1rem;
@media (min-width: 760px) {
padding-left: 14rem;
padding-right: 14rem;
}
}
</style>
================================================
FILE: packages/demo/src/views/InArticle.vue
================================================
<template>
<div class="home VueCurrencyFilter">
<section class="container hero">
<b-row mb="4" align="center" justify="center" direction="column">
<h1 as="h1" fontSize="5xl">In Article Adsense</h1>
</b-row>
</section>
<section class="container">
<p :mb="2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis in nulla porttitor ultrices. Sed dictum ante sit amet
libero aliquam, vitae bibendum nisi blandit. Etiam id euismod est. Sed varius tristique libero quis porta. Nam ex ligula, semper eu
nisl at, interdum viverra nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin
vehicula commodo mauris. Sed eu blandit sem, hendrerit placerat dui. Maecenas non ante ante. Sed et mi ut quam porttitor egestas id
in sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eros nulla,
pulvinar id ante nec, vulputate bibendum lectus.
</p>
<p :mb="2">
Suspendisse dapibus sodales lorem sed pharetra. Nam pellentesque posuere lorem, sed vulputate mi varius dapibus. Suspendisse
potenti. Nulla non interdum libero. Duis ornare risus non leo posuere maximus. Fusce id urna in sapien tincidunt finibus nec eget
diam. Vivamus vitae efficitur lacus. Curabitur vel ex urna. In scelerisque lorem tellus, nec tempus magna egestas vel. In eu erat
vestibulum, euismod est eget, elementum felis.
</p>
<p :mb="2">
Duis nunc erat, ultricies sed tristique quis, luctus id risus. Aliquam erat volutpat. Praesent tincidunt ex urna, quis luctus tortor
consectetur sit amet. Phasellus ullamcorper eget sem convallis condimentum. Vivamus feugiat nisl in blandit imperdiet. Nulla laoreet
sollicitudin orci, at maximus mi posuere fermentum. Quisque porttitor leo nec purus fermentum congue. Interdum et malesuada fames ac
ante ipsum primis in faucibus. Nam in nibh at lacus consequat congue nec nec lacus.
</p>
<p :mb="2">
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vel posuere velit, et volutpat tortor.
Nullam non efficitur neque, id egestas mauris. Vivamus vehicula eget nisi nec pulvinar. In et arcu dapibus, condimentum felis quis,
mollis nibh. Duis sem eros, placerat sit amet eros porttitor, efficitur gravida augue. Donec non imperdiet enim. Cras ac consequat
est.
</p>
<p :mb="2">
Vestibulum congue convallis nisi nec vulputate. Pellentesque posuere suscipit quam, non vulputate augue porta ac. Ut quam justo,
iaculis sed ipsum imperdiet, eleifend fermentum tortor. Nam facilisis imperdiet sollicitudin. Proin ultrices nisl vel odio congue,
quis ornare turpis blandit. Proin felis odio, luctus sit amet urna id, luctus venenatis ligula. Maecenas tincidunt pulvinar diam
vitae suscipit. Suspendisse feugiat mattis elit a interdum. Fusce fermentum fringilla odio non finibus. Integer pretium rutrum
ligula, ut fringilla mauris facilisis dapibus. Integer mattis leo vel tincidunt porta.
</p>
<div class="ads">
<b-row align="center" justify="center" direction="column">
<c-box w="100%" overflow="hidden">
<InArticleAdsense style="width: 100%; min-width: 250px" data-ad-client="ca-pub-5442972248172818" data-ad-slot="7974047383" />
</c-box>
</b-row>
</div>
<p :mb="2">
Duis nunc erat, ultricies sed tristique quis, luctus id risus. Aliquam erat volutpat. Praesent tincidunt ex urna, quis luctus tortor
consectetur sit amet. Phasellus ullamcorper eget sem convallis condimentum. Vivamus feugiat nisl in blandit imperdiet. Nulla laoreet
sollicitudin orci, at maximus mi posuere fermentum. Quisque porttitor leo nec purus fermentum congue. Interdum et malesuada fames ac
ante ipsum primis in faucibus. Nam in nibh at lacus consequat congue nec nec lacus.
</p>
<p :mb="2">
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vel posuere velit, et volutpat tortor.
Nullam non efficitur neque, id egestas mauris. Vivamus vehicula eget nisi nec pulvinar. In et arcu dapibus, condimentum felis quis,
mollis nibh. Duis sem eros, placerat sit amet eros porttitor, efficitur gravida augue. Donec non imperdiet enim. Cras ac consequat
est.
</p>
<b-row>
<p :mb="2" :mr="5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis in nulla porttitor ultrices. Sed dictum ante sit amet
libero aliquam, vitae bibendum nisi blandit. Etiam id euismod est. Sed varius tristique libero quis porta. Nam ex ligula, semper
eu nisl at, interdum viverra nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin
vehicula commodo mauris. Sed eu blandit sem, hendrerit placerat dui. Maecenas non ante ante. Sed et mi ut quam porttitor egestas
id in sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eros nulla,
pulvinar id ante nec, vulputate bibendum lectus.
</p>
<b-row align="center" justify="center" direction="column">
<c-box minW="sm" overflow="hidden">
<InArticleAdsense style="min-width: 250px" data-ad-client="ca-pub-5442972248172818" data-ad-slot="2669016517" />
</c-box>
</b-row>
<p :mb="2" :ml="5">
Suspendisse dapibus sodales lorem sed pharetra. Nam pellentesque posuere lorem, sed vulputate mi varius dapibus. Suspendisse
potenti. Nulla non interdum libero. Duis ornare risus non leo posuere maximus. Fusce id urna in sapien tincidunt finibus nec eget
diam. Vivamus vitae efficitur lacus. Curabitur vel ex urna. In scelerisque lorem tellus, nec tempus magna egestas vel. In eu erat
vestibulum, euismod est eget, elementum felis.
</p>
</b-row>
<p :mb="2">
Duis nunc erat, ultricies sed tristique quis, luctus id risus. Aliquam erat volutpat. Praesent tincidunt ex urna, quis luctus tortor
consectetur sit amet. Phasellus ullamcorper eget sem convallis condimentum. Vivamus feugiat nisl in blandit imperdiet. Nulla laoreet
sollicitudin orci, at maximus mi posuere fermentum. Quisque porttitor leo nec purus fermentum congue. Interdum et malesuada fames ac
ante ipsum primis in faucibus. Nam in nibh at lacus consequat congue nec nec lacus.
</p>
<p :mb="2">
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vel posuere velit, et volutpat tortor.
Nullam non efficitur neque, id egestas mauris. Vivamus vehicula eget nisi nec pulvinar. In et arcu dapibus, condimentum felis quis,
mollis nibh. Duis sem eros, placerat sit amet eros porttitor, efficitur gravida augue. Donec non imperdiet enim. Cras ac consequat
est.
</p>
<p :mb="2">
Vestibulum congue convallis nisi nec vulputate. Pellentesque posuere suscipit quam, non vulputate augue porta ac. Ut quam justo,
iaculis sed ipsum imperdiet, eleifend fermentum tortor. Nam facilisis imperdiet sollicitudin. Proin ultrices nisl vel odio congue,
quis ornare turpis blandit. Proin felis odio, luctus sit amet urna id, luctus venenatis ligula. Maecenas tincidunt pulvinar diam
vitae suscipit. Suspendisse feugiat mattis elit a interdum. Fusce fermentum fringilla odio non finibus. Integer pretium rutrum
ligula, ut fringilla mauris facilisis dapibus. Integer mattis leo vel tincidunt porta.
</p>
<div class="ads">
<b-row align="center" justify="center" direction="column">
<c-box w="100%" overflow="hidden">
<InArticleAdsense style="width: 100%; min-width: 250px" data-ad-client="ca-pub-5442972248172818" data-ad-slot="7974047383" />
</c-box>
</b-row>
</div>
</section>
<section class="container">
<c-stack :spacing="5" is-inline>
<Box
title="Default Adsense"
description="A simple way to get ads on your page. Choose the size, placement and style you want to display."
link="https://support.google.com/adsense/answer/6002575?hl=en_GB"
demo="/"
/>
<Box
title="In Feed Adsense"
description="Ads that flow naturally inside a list of articles or products on your site, offering a great user experience."
link="https://support.google.com/adsense/answer/7171765?hl=en_GB"
demo="/in-feed/"
/>
</c-stack>
</section>
<section class="container ads">
<b-row align="center" justify="center" direction="column">
<c-box w="100%" border-width="1px" rounded="lg" overflow="hidden">
<Adsense
style="width: 100%; min-width: 250px"
ins-style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-5442972248172818"
data-ad-slot="7319719723"
>
</Adsense>
</c-box>
</b-row>
</section>
<footer class="footer">
<b-row m="2" align="center" justify="center">
<p textAlign="center">Built with ❤️ by <a href="https://mazipan.space">Irfan Maulana</a></p>
</b-row>
</footer>
</div>
</template>
<script lang="js">
import Box from '../components/Box'
export default {
name: 'InArticle',
components: {
Box
},
data () {
return {
}
}
}
</script>
<style lang="scss">
pre:not(:last-of-type) {
margin-bottom: 2rem;
}
.container {
margin-top: 2em;
padding-left: 1rem;
padding-right: 1rem;
@media (min-width: 760px) {
padding-left: 14rem;
padding-right: 14rem;
}
}
</style>
================================================
FILE: packages/demo/src/views/InFeed.vue
================================================
<template>
<div class="home VueCurrencyFilter">
<section class="container hero">
<b-row mb="4" align="center" justify="center" direction="column">
<h1 as="h1" fontSize="5xl">In Feed Adsense</h1>
</b-row>
</section>
<section class="container ads">
<c-stack :spacing="5" is-inline :shouldWrapChildren="true" justify="center" wrap="wrap">
<ImageCard />
<ImageCard />
<ImageCard />
<c-box minW="sm" :mb="5" border-width="1px" rounded="lg" overflow="hidden">
<InFeedAdsense
style="height: 380px; min-width: 250px; margin: 1em 0"
root-class="wrapper VueInFeedAdsense"
ins-class="ins-custom"
data-ad-layout-key="-6h+ed+1l-6o+ab"
data-ad-client="ca-pub-5442972248172818"
data-ad-slot="5701222588s"
/>
</c-box>
<ImageCard />
<ImageCard />
<ImageCard />
<ImageCard />
<ImageCard />
<ImageCard />
<ImageCard />
<c-box minW="sm" :mb="5" border-width="1px" rounded="lg" overflow="hidden">
<InFeedAdsense
style="height: 380px; min-width: 250px; margin: 1em 0"
root-class="wrapper VueInFeedAdsense"
ins-class="ins-custom"
data-ad-layout-key="-6h+ed+1l-6o+ab"
data-ad-client="ca-pub-5442972248172818"
data-ad-slot="5701222588s"
/>
</c-box>
</c-stack>
</section>
<section class="container">
<c-stack :spacing="5" is-inline>
<Box
title="Default Adsense"
description="A simple way to get ads on your page. Choose the size, placement and style you want to display."
link="https://support.google.com/adsense/answer/6002575?hl=en_GB"
demo="/"
/>
<Box
title="In Article Adsense"
description="Ads that fit seamlessly in between the paragraphs of your pages for an enhanced reading experience."
link="https://support.google.com/adsense/answer/7320112?hl=en_GB"
demo="/in-article/"
/>
</c-stack>
</section>
<section class="container ads">
<b-row align="center" justify="center" direction="column">
<c-box w="100%" border-width="1px" rounded="lg" overflow="hidden">
<Adsense
style="width: 100%; min-width: 250px"
ins-style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-5442972248172818"
data-ad-slot="7319719723"
>
</Adsense>
</c-box>
</b-row>
</section>
<footer class="footer">
<b-row m="2" align="center" justify="center">
<p textAlign="center">Built with ❤️ by <a href="https://mazipan.space">Irfan Maulana</a></p>
</b-row>
</footer>
</div>
</template>
<script lang="js">
import Box from '../components/Box'
import ImageCard from '../components/ImageCard'
export default {
name: 'InFeed',
components: {
Box,
ImageCard
},
data () {
return {
}
}
}
</script>
<style lang="scss">
pre:not(:last-of-type) {
margin-bottom: 2rem;
}
.container {
margin-top: 2em;
padding-left: 1rem;
padding-right: 1rem;
@media (min-width: 760px) {
padding-left: 14rem;
padding-right: 14rem;
}
}
</style>
================================================
FILE: packages/demo/tsconfig.json
================================================
{
"compilerOptions": {
"target": "es5",
"module": "ESNext",
"declaration": true,
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"noImplicitAny": false,
"strictNullChecks": false,
"experimentalDecorators": true,
"allowJs": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"node"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
================================================
FILE: packages/demo/vue.config.js
================================================
module.exports = {
publicPath: '/vue-google-adsense',
pwa: {
themeColor: '#000',
},
}
================================================
FILE: packages/lib/README.md
================================================
# 💰 Vue Google Adsense
 [](https://bundlephobia.com/result?p=vue-google-adsense) [](https://packagephobia.com/result?p=vue-google-adsense) [](https://github.com/mazipan/vue-google-adsense/actions/workflows/deploy.yml) [](https://www.npmjs.com/package/vue-google-adsense)   [](#contributors)
> Vue.js Google Adsense Component with InFeed and InArticle Ads support
## Vue 2
You are seing `vue-google-adsense@2.x.x` which ONLY compatible for Vue 3, if you want to support Vue 2, please use `vue-google-adsense@1.x.x`.
Documentation for `vue-google-adsense@1.x.x` can be found on the branch [v1-for-vue2](https://github.com/mazipan/vue-google-adsense/tree/v1-for-vue2)
## 🎉 Demo
https://mazipan.github.io/vue-google-adsense/
## :question: What is In Feed and In Article Ads?
At least there is three (3) type ads in Google Adsense :
- **Responsive Ads**: A simple way to get ads on your page. Choose the size, placement and style you want to display. [Learn more](https://support.google.com/adsense/answer/6002575?hl=en_GB)
- **In Article Ads**: Ads that fit seamlessly in between the paragraphs of your pages for an enhanced reading experience. [Learn more](https://support.google.com/adsense/answer/7320112?hl=en_GB)
- **In Feed Ads**: Ads that flow naturally inside a list of articles or products on your site, offering a great user experience. [Learn more](https://support.google.com/adsense/answer/7171765?hl=en_GB)
## 🚀 Getting started
### Installation
Need dependencies [vue-scriptx](https://www.npmjs.com/package/vue-scriptx), you need to install :
```javascript
npm install vue-scriptx vue-google-adsense@next --save
```
### Use in `main.js`
```javascript
import ScriptX from 'vue-scriptx'
app.use(ScriptX)
import Ads from 'vue-google-adsense'
app.use(Ads.Adsense)
app.use(Ads.InArticleAdsense)
app.use(Ads.InFeedAdsense)
```
### Use partial import
Import only `AdsType` you need
```javascript
import Adsense from 'vue-google-adsense/dist/Adsense.min.js'
import InArticleAdsense from 'vue-google-adsense/dist/InArticleAdsense.min.js'
import InFeedAdsense from 'vue-google-adsense/dist/InFeedAdsense.min.js'
import ScriptX from 'vue-scriptx'
app.use(ScriptX)
app.use(Adsense)
app.use(InArticleAdsense)
app.use(InFeedAdsense)
```
### Usage in Nuxt.js
Create file `plugins/vue-google-adsense.js`, with code :
```javascript
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)
```
Then update your `nuxt.config.js`, with code :
```javascript
module.exports = {
plugins: [
{ src: '~/plugins/vue-google-adsense', ssr: false }
]
}
```
### Usage in Gridsome
Insert these code in `src/main.js`:
```javascript
// The Client API can be used here. Learn more: gridsome.org/docs/client-api
export default function (Vue, { router, head, isClient }) {
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'));
}
}
```
### Template
VueAdsense Template :
```html
<Adsense
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="1234567890">
</Adsense>
```
VueInArticleAdsense Template :
```html
<InArticleAdsense
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="1234567890">
</InArticleAdsense>
```
VueInFeedAdsense Template :
```html
<InFeedAdsense
data-ad-layout-key="-fg+5n+6t-e7+r"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="1234567890">
</InFeedAdsense>
```
### Auto Ads Usage
```js
import ScriptX from 'vue-scriptx'
app.use(ScriptX)
import Ads from 'vue-google-adsense'
app.use(Ads.AutoAdsense, { adClient: 'YOUR_GOOGLE_AD_CLIENT', isNewAdsCode: true })
```
## :gift: Available Props
| Attribute | Type |Default | Description |
|------------------- |------------ |--------------|--------------------------------------- |
| `root-class` | String | `adswrapper` | Class for fill in wrapper block |
| `ins-class` | String | `empty` | Class for fill in `ins` tag |
| `ins-style` | String | `display:block;` | Style for fill in `ins` tag |
| `data-ad-client` | String | `empty` | Attribute `data-ad-client` from adsense |
| `data-ad-slot` | String | `empty` | Attribute `data-ad-slot` from adsense |
| `data-ad-layout-key` | String | `empty` | Attribute `data-ad-layout-key` from adsense |
| `data-ad-test` | String | `empty` | Attribute `data-ad-test` from adsense |
| `data-ad-format` | String | `auto` for Adsense Ads<br> `fluid` for InFeed and InArticle Ads | Attribute `data-ad-format` from adsense <br> Possible values are `auto`, `horizontal`, `vertical`, `rectangle` or `fluid` |
| `data-full-width-responsive` | String (`yes` or `no`) | `no` | Attribute `data-full-width-responsive` from adsense |
| `is-non-personalized-ads` | String (`yes` or `no`) | `no` | Props for request `non-personalized` ads, [read more](https://support.google.com/adsense/answer/9042142?hl=en&ref_topic=7670012) |
| `is-new-ads-code` | String (`yes` or `no`) | `no` | Use new Adsense code (per 19 july 2021), [read more](https://support.google.com/adsense/answer/10627874) |
| `data-ad-region` | String | `empty` | See PR [#163](https://github.com/mazipan/vue-google-adsense/pull/163) |
## :metal: Who is using this library
Already used in production for these project :
+ [Blog-2.0](https://github.com/mazipan/blog-2.0)
+ [Explore-Github](https:///mazipan.github.io/explore-github)
+ [Fire Jak](https://mazipan.github.io/FireJak)
+ [Rumah Sakit Jakarta](https://mazipan.github.io/RumahSakitJakarta)
+ [ChuckNorris](https://mazipan.github.io/chucknorris)
+ [Nuxt blog - Surmon.me](https://github.com/surmon-china/surmon.me)
+ Etc... // You can add the list here via pull request
## 🏃 Development
We are using [pnpm](https://pnpm.js.org/), please read the [Installation](https://pnpm.js.org/en/installation) section first.
``` bash
# install dependencies
pnpm run bs
# serve with demo page
pnpm run dev:demo
# build for production
pnpm run build:demo
pnpm run build:lib
```
## Support me
- 👉 🇮🇩 [Trakteer](https://trakteer.id/mazipan?utm_source=github)
- 👉 🌍 [BuyMeACoffe](https://www.buymeacoffee.com/mazipan?utm_source=github)
- 👉 🌍 [Paypal](https://www.paypal.me/mazipan?utm_source=github)
- 👉 🌍 [Ko-Fi](https://ko-fi.com/mazipan)
---
Copyright © 2018 Built with ❤️ by Irfan Maulana
================================================
FILE: packages/lib/bili.config.ts
================================================
import { Config } from 'bili'
const config: Config = {
input: [
'src/VueGoogleAdsense.ts',
'src/ads/Adsense.ts',
'src/ads/AutoAdsense.ts',
'src/ads/InArticleAdsense.ts',
'src/ads/InFeedAdsense.ts',
],
plugins: {
vue: true,
},
}
export default config
================================================
FILE: packages/lib/package.json
================================================
{
"name": "vue-google-adsense",
"description": "Vue.js Google Adsense Component with InFeed and InArticle Ads support",
"version": "2.0.1",
"license": "MIT",
"author": "Irfan Maulana (https://github.com/mazipan/)",
"homepage": "https://mazipan.github.io/vue-google-adsense/",
"source": "src/VueGoogleAdsense.ts",
"main": "dist/VueGoogleAdsense.min.js",
"module": "dist/VueGoogleAdsense.esm.min.js",
"unpkg": "dist/VueGoogleAdsense.min.js",
"typings": "dist/VueGoogleAdsense.d.ts",
"scripts": {
"build": "bili --format esm-min --format cjs-min"
},
"files": [
"dist"
],
"peerDependencies": {
"vue": "^3.0.0",
"vue-scriptx": "^0.2.5"
},
"devDependencies": {
"@vue/compiler-sfc": "^3.2.31",
"@types/bluebird": "^3.5.36",
"@types/node": "^14.18.12",
"bili": "5.0.5",
"rollup": "^2.67.2",
"rollup-plugin-typescript2": "^0.31.2",
"rollup-plugin-vue": "^6.0.0",
"ts-toolbelt": "^9.6.0",
"tslib": "2.0.1",
"vue": "^3.0.0"
},
"keywords": [
"vuejs adsense",
"vue2 adsense",
"vue adsense",
"vuejs google adsense",
"vue2 google adsense",
"vue google adsense"
],
"repository": {
"type": "git",
"url": "https://github.com/mazipan/vue-google-adsense.git"
},
"bugs": {
"url": "https://github.com/mazipan/vue-google-adsense/issues"
}
}
================================================
FILE: packages/lib/src/@types/global.d.ts
================================================
declare global {
interface Window {
adsbygoogle: []
}
}
================================================
FILE: packages/lib/src/VueGoogleAdsense.ts
================================================
import Adsense from './ads/Adsense'
import InArticleAdsense from './ads/InArticleAdsense'
import InFeedAdsense from './ads/InFeedAdsense'
import AutoAdsense from './ads/AutoAdsense'
export default {
Adsense,
InArticleAdsense,
InFeedAdsense,
AutoAdsense,
}
================================================
FILE: packages/lib/src/ads/Adsense.ts
================================================
import AdsenseComponent from './AdsenseComponent.vue'
const Adsense = {
install: (app, options) => {
app.component('Adsense', AdsenseComponent)
},
}
export default Adsense
================================================
FILE: packages/lib/src/ads/AdsenseComponent.vue
================================================
<template>
<div :class="rootClass">
<template v-if="isNewAdsCode === 'yes'">
<scriptx type="text/javascript" async="true" :src="`${ADS_SCRIPT}?client=${dataAdClient}`" crossorigin="anonymous" />
</template>
<template v-if="isNewAdsCode === 'no'">
<scriptx type="text/javascript" async="true" :src="ADS_SCRIPT" />
</template>
<ins
:class="insClass"
class="adsbygoogle"
:style="insStyle"
:data-ad-client="dataAdClient"
:data-ad-slot="dataAdSlot"
:data-ad-test="dataAdTest"
:data-ad-format="dataAdFormat"
:data-ad-region="dataAdRegion"
:data-full-width-responsive="dataFullWidthResponsive === 'yes'"
/>
<template v-if="isNonPersonalizedAds === 'yes'">
<scriptx type="text/javascript">
(adsbygoogle = window.adsbygoogle || []).requestNonPersonalizedAds = 1; (adsbygoogle = window.adsbygoogle || []).push({});
</scriptx>
</template>
<template v-if="isNonPersonalizedAds === 'no'">
<scriptx type="text/javascript"> (adsbygoogle = window.adsbygoogle || []).push({}); </scriptx>
</template>
</div>
</template>
<script>
import constant from '../utils/constant'
import props from '../utils/props'
export default {
name: 'Adsense',
props,
data() {
return {
ADS_SCRIPT: constant.ADS_SCRIPT,
}
},
}
</script>
================================================
FILE: packages/lib/src/ads/AutoAdsense.ts
================================================
import constant from '../utils/constant'
const AutoAdsense = {
install: (app, { adClient = '', isNewAdsCode = false }) => {
if (!adClient) {
return Error('AutoAdsense require "adClient" parameter')
}
const head = document.head
const s = document.createElement('script')
s.type = 'text/javascript'
s.async = true
if (isNewAdsCode) {
s.crossOrigin = 'anonymous'
s.src = `${constant.ADS_SCRIPT}?client=${adClient}`
} else {
s.src = constant.ADS_SCRIPT
}
s.onload = () => {
// @ts-ignore
;(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: adClient,
enable_page_level_ads: true,
})
}
head.appendChild(s)
},
}
export default AutoAdsense
================================================
FILE: packages/lib/src/ads/InArticleAdsense.ts
================================================
import InArticleAdsenseComponent from './InArticleAdsenseComponent.vue'
const InArticleAdsense = {
install: (app, options) => {
app.component('InArticleAdsense', InArticleAdsenseComponent)
},
}
export default InArticleAdsense
================================================
FILE: packages/lib/src/ads/InArticleAdsenseComponent.vue
================================================
<template>
<div :class="rootClass">
<template v-if="isNewAdsCode === 'yes'">
<scriptx type="text/javascript" async="true" :src="`${ADS_SCRIPT}?client=${dataAdClient}`" crossorigin="anonymous" />
</template>
<template v-if="isNewAdsCode === 'no'">
<scriptx type="text/javascript" async="true" :src="ADS_SCRIPT" />
</template>
<ins
:class="insClass"
class="adsbygoogle"
:style="insStyle"
data-ad-layout="in-article"
:data-ad-format="dataAdFormat"
:data-ad-client="dataAdClient"
:data-ad-slot="dataAdSlot"
:data-ad-test="dataAdTest"
:data-ad-region="dataAdRegion"
:data-full-width-responsive="dataFullWidthResponsive === 'yes'"
/>
<template v-if="isNonPersonalizedAds === 'yes'">
<scriptx type="text/javascript">
(adsbygoogle = window.adsbygoogle || []).requestNonPersonalizedAds = 1; (adsbygoogle = window.adsbygoogle || []).push({});
</scriptx>
</template>
<template v-if="isNonPersonalizedAds === 'no'">
<scriptx type="text/javascript"> (adsbygoogle = window.adsbygoogle || []).push({}); </scriptx>
</template>
</div>
</template>
<script>
import constant from '../utils/constant'
import props from '../utils/props'
import assign from '../utils/assign'
export default {
name: 'InArticleAdsense',
props: assign(props, {
dataAdFormat: {
type: String,
default: 'fluid',
},
}),
data() {
return {
ADS_SCRIPT: constant.ADS_SCRIPT,
}
},
}
</script>
================================================
FILE: packages/lib/src/ads/InFeedAdsense.ts
================================================
import InFeedAdsenseComponent from './InFeedAdsenseComponent.vue'
const InFeedAdsense = {
install: (app, options) => {
app.component('InFeedAdsense', InFeedAdsenseComponent)
},
}
export default InFeedAdsense
================================================
FILE: packages/lib/src/ads/InFeedAdsenseComponent.vue
================================================
<template>
<div :class="rootClass">
<template v-if="isNewAdsCode === 'yes'">
<scriptx type="text/javascript" async="true" :src="`${ADS_SCRIPT}?client=${dataAdClient}`" crossorigin="anonymous" />
</template>
<template v-if="isNewAdsCode === 'no'">
<scriptx type="text/javascript" async="true" :src="ADS_SCRIPT" />
</template>
<ins
:class="insClass"
class="adsbygoogle"
:style="insStyle"
:data-ad-format="dataAdFormat"
:data-ad-layout-key="dataAdLayoutKey"
:data-ad-client="dataAdClient"
:data-ad-slot="dataAdSlot"
:data-ad-test="dataAdTest"
:data-ad-region="dataAdRegion"
:data-full-width-responsive="dataFullWidthResponsive === 'yes'"
/>
<template v-if="isNonPersonalizedAds === 'yes'">
<scriptx type="text/javascript">
(adsbygoogle = window.adsbygoogle || []).requestNonPersonalizedAds = 1; (adsbygoogle = window.adsbygoogle || []).push({});
</scriptx>
</template>
<template v-if="isNonPersonalizedAds === 'no'">
<scriptx type="text/javascript"> (adsbygoogle = window.adsbygoogle || []).push({}); </scriptx>
</template>
</div>
</template>
<script>
import constant from '../utils/constant'
import props from '../utils/props'
import assign from '../utils/assign'
export default {
name: 'InFeedAdsense',
props: assign(props, {
dataAdFormat: {
type: String,
default: 'fluid',
},
}),
data() {
return {
ADS_SCRIPT: constant.ADS_SCRIPT,
}
},
}
</script>
================================================
FILE: packages/lib/src/shims-vue.d.ts
================================================
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}
================================================
FILE: packages/lib/src/utils/assign.ts
================================================
export default (target, varArgs) => {
const to = Object(target)
for (const nextKey in varArgs) {
// Avoid bugs when hasOwnProperty is shadowed
if (Object.prototype.hasOwnProperty.call(varArgs, nextKey)) {
to[nextKey] = varArgs[nextKey]
}
}
return to
}
================================================
FILE: packages/lib/src/utils/constant.ts
================================================
export default {
ADS_SCRIPT: '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js',
}
================================================
FILE: packages/lib/src/utils/props.ts
================================================
export default {
rootClass: {
type: String,
default: 'adswrapper',
},
insClass: {
type: String,
default: '',
},
insStyle: {
type: String,
default: 'display:block;',
},
dataAdClient: {
type: String,
default: '',
},
dataAdSlot: {
type: String,
default: '',
},
dataAdLayoutKey: {
type: String,
default: '-fg+5n+6t-e7+r',
},
dataAdTest: {
type: String,
default: '',
},
dataAdFormat: {
type: String,
default: 'auto',
},
isNonPersonalizedAds: {
type: String,
default: 'no',
},
dataFullWidthResponsive: {
type: String,
default: 'no',
},
dataAdRegion: {
type: String,
default: '',
},
// Read: https://support.google.com/adsense/answer/10627874
// Issue: https://github.com/mazipan/vue-google-adsense/issues/164
isNewAdsCode: {
type: String,
default: 'no',
},
}
================================================
FILE: packages/lib/tsconfig.json
================================================
{
"compilerOptions": {
"target": "es5",
"module": "ESNext",
"declaration": true,
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"noImplicitAny": false,
"strictNullChecks": false,
"experimentalDecorators": true,
"allowJs": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": ["node"],
"paths": {
"@/*": ["src/*"]
},
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
"exclude": ["node_modules"]
}
================================================
FILE: pnpm-workspace.yaml
================================================
packages:
- 'packages/**'
================================================
FILE: turbo.json
================================================
{
"$schema": "https://turborepo.org/schema.json",
"baseBranch": "origin/master",
"pipeline": {
"build": {
"dependsOn": ["^build"]
},
"dev": {
"cache": false
}
}
}
gitextract_wxo3x_en/ ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .github/ │ ├── FUNDING.yml │ ├── ISSUE_TEMPLATE/ │ │ ├── bug_report.md │ │ └── feature_request.md │ ├── PULL_REQUEST_TEMPLATE.md │ ├── auto-comment.yml │ └── workflows/ │ ├── codeql-analysis.yml │ └── deploy.yml ├── .gitignore ├── .kodiak.toml ├── .prettierignore ├── .prettierrc.js ├── LICENSE ├── README.md ├── package.json ├── packages/ │ ├── demo/ │ │ ├── README.md │ │ ├── babel.config.js │ │ ├── package.json │ │ ├── public/ │ │ │ ├── index.html │ │ │ ├── robots.txt │ │ │ └── site.webmanifest │ │ ├── src/ │ │ │ ├── App.vue │ │ │ ├── components/ │ │ │ │ ├── Box.vue │ │ │ │ ├── Header.vue │ │ │ │ └── ImageCard.vue │ │ │ ├── main.ts │ │ │ ├── registerServiceWorker.ts │ │ │ ├── router/ │ │ │ │ └── index.ts │ │ │ ├── shims-tsx.d.ts │ │ │ ├── shims-vue.d.ts │ │ │ └── views/ │ │ │ ├── Home.vue │ │ │ ├── InArticle.vue │ │ │ └── InFeed.vue │ │ ├── tsconfig.json │ │ └── vue.config.js │ └── lib/ │ ├── README.md │ ├── bili.config.ts │ ├── package.json │ ├── src/ │ │ ├── @types/ │ │ │ └── global.d.ts │ │ ├── VueGoogleAdsense.ts │ │ ├── ads/ │ │ │ ├── Adsense.ts │ │ │ ├── AdsenseComponent.vue │ │ │ ├── AutoAdsense.ts │ │ │ ├── InArticleAdsense.ts │ │ │ ├── InArticleAdsenseComponent.vue │ │ │ ├── InFeedAdsense.ts │ │ │ └── InFeedAdsenseComponent.vue │ │ ├── shims-vue.d.ts │ │ └── utils/ │ │ ├── assign.ts │ │ ├── constant.ts │ │ └── props.ts │ └── tsconfig.json ├── pnpm-workspace.yaml └── turbo.json
SYMBOL INDEX (11 symbols across 3 files)
FILE: packages/demo/src/registerServiceWorker.ts
method ready (line 7) | ready() {
method registered (line 10) | registered() {
method cached (line 13) | cached() {
method updatefound (line 16) | updatefound() {
method updated (line 19) | updated() {
method offline (line 22) | offline() {
method error (line 25) | error(error) {
FILE: packages/demo/src/shims-tsx.d.ts
type Element (line 6) | interface Element extends VNode {}
type ElementClass (line 8) | interface ElementClass extends Vue {}
type IntrinsicElements (line 9) | interface IntrinsicElements {
FILE: packages/lib/src/@types/global.d.ts
type Window (line 2) | interface Window {
Condensed preview — 56 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (77K chars).
[
{
"path": ".editorconfig",
"chars": 167,
"preview": "root = true\n\n[*.{js,jsx,ts,tsx,vue}]\ncharset = utf-8\nindent_style = space\nend_of_line = lf\nindent_size = 2\ntrim_trailing"
},
{
"path": ".eslintignore",
"chars": 18,
"preview": "node_modules\ndist\n"
},
{
"path": ".eslintrc.js",
"chars": 479,
"preview": "module.exports = {\n root: true,\n env: {\n node: true,\n },\n extends: ['plugin:vue/vue3-essential', 'eslint:recommen"
},
{
"path": ".github/FUNDING.yml",
"chars": 642,
"preview": "# These are supported funding model platforms\n\ngithub: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [u"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"chars": 352,
"preview": "---\nname: Bug Report\nabout: Something's not working as expected.\ntitle: ''\nlabels: bug\nassignees: mazipan\n\n---\n\n## Descr"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"chars": 532,
"preview": "---\nname: Feature Request\nabout: Propose feature additions to the project.\ntitle: ''\nlabels: enhancement\nassignees: mazi"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"chars": 377,
"preview": "Closes <!-- mention the issue that you're trying to close with this PR -->\n\n## Description\n\n<!-- Describe your implement"
},
{
"path": ".github/auto-comment.yml",
"chars": 156,
"preview": "pullRequestOpened: >\n Thank you for raising your pull request.\n Please make sure you have followed @mazipan\n And plea"
},
{
"path": ".github/workflows/codeql-analysis.yml",
"chars": 2444,
"preview": "# For most projects, this workflow file will not need changing; you simply need\n# to commit it to your repository.\n#\n# Y"
},
{
"path": ".github/workflows/deploy.yml",
"chars": 1364,
"preview": "name: 'Build and Deploy'\n\non:\n push:\n branches: [master]\n\njobs:\n build_and_deploy:\n runs-on: ubuntu-latest\n\n "
},
{
"path": ".gitignore",
"chars": 163,
"preview": ".DS_Store\nnode_modules/\nnpm-debug.log\nyarn-error.log\nyarn.lock\npackage-lock.json\n\n# Editor directories and files\n.idea\n*"
},
{
"path": ".kodiak.toml",
"chars": 498,
"preview": "version = 1\n\n[update]\nalways = true # default: false\nignored_usernames = [\"dependabot\", \"snyk-bot\"]\n\n[approve]\nauto_appr"
},
{
"path": ".prettierignore",
"chars": 18,
"preview": "node_modules\ndist\n"
},
{
"path": ".prettierrc.js",
"chars": 125,
"preview": "module.exports = {\n bracketSpacing: true,\n printWidth: 140,\n singleQuote: true,\n semi: false,\n trailingComma: 'es5'"
},
{
"path": "LICENSE",
"chars": 1070,
"preview": "MIT License\n\nCopyright (c) 2018 Irfan Maulana\n\nPermission is hereby granted, free of charge, to any person obtaining a c"
},
{
"path": "README.md",
"chars": 7348,
"preview": "# 💰 Vue Google Adsense\n\n [ [!["
},
{
"path": "packages/demo/babel.config.js",
"chars": 66,
"preview": "module.exports = {\n presets: ['@vue/cli-plugin-babel/preset'],\n}\n"
},
{
"path": "packages/demo/package.json",
"chars": 1414,
"preview": "{\n \"name\": \"@vue-google-adsense/demo\",\n \"version\": \"2.0.1\",\n \"description\": \"Vue.js Google Adsense Component with InF"
},
{
"path": "packages/demo/public/index.html",
"chars": 2279,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\""
},
{
"path": "packages/demo/public/robots.txt",
"chars": 24,
"preview": "User-agent: *\nDisallow:\n"
},
{
"path": "packages/demo/public/site.webmanifest",
"chars": 359,
"preview": "{\n \"name\": \"\",\n \"short_name\": \"\",\n \"icons\": [\n {\n \"src\": \"/android-chrome-192x192.png\",\n \"sizes\": \"192x1"
},
{
"path": "packages/demo/src/App.vue",
"chars": 95,
"preview": "<template>\n <router-view />\n</template>\n\n<script>\nexport default {\n name: 'App',\n}\n</script>\n"
},
{
"path": "packages/demo/src/components/Box.vue",
"chars": 725,
"preview": "<template>\n <b-card :title=\"title\">\n <b-card-text>\n {{ description }}\n </b-card-text>\n <a :href=\"link\" re"
},
{
"path": "packages/demo/src/components/Header.vue",
"chars": 1081,
"preview": "<template>\n <div class=\"hero\">\n <b-row mb=\"4\" textAlign=\"center\" align=\"center\" justify=\"center\" direction=\"column\">"
},
{
"path": "packages/demo/src/components/ImageCard.vue",
"chars": 1554,
"preview": "<template>\n <c-box maxW=\"sm\" :mb=\"5\" border-width=\"1px\" rounded=\"lg\" overflow=\"hidden\">\n <c-image :src=\"property.ima"
},
{
"path": "packages/demo/src/main.ts",
"chars": 608,
"preview": "// Import Vue and libs\nimport { createApp } from 'vue'\n\n// Create Vue App\nimport App from './App.vue'\n\n// ScriptX\nimport"
},
{
"path": "packages/demo/src/registerServiceWorker.ts",
"chars": 873,
"preview": "/* eslint-disable no-console */\n\nimport { register } from 'register-service-worker'\n\nif (process.env.NODE_ENV === 'produ"
},
{
"path": "packages/demo/src/router/index.ts",
"chars": 583,
"preview": "import { createRouter, createWebHashHistory } from 'vue-router'\n\nimport Home from '../views/Home.vue'\n\nconst routes = [\n"
},
{
"path": "packages/demo/src/shims-tsx.d.ts",
"chars": 304,
"preview": "import Vue, { VNode } from 'vue'\n\ndeclare global {\n namespace JSX {\n // tslint:disable no-empty-interface\n interf"
},
{
"path": "packages/demo/src/shims-vue.d.ts",
"chars": 72,
"preview": "declare module '*.vue' {\n import Vue from 'vue'\n export default Vue\n}\n"
},
{
"path": "packages/demo/src/views/Home.vue",
"chars": 2648,
"preview": "<template>\n <div class=\"home VueCurrencyFilter\">\n <section class=\"container hero\">\n <HeaderComponent />\n </s"
},
{
"path": "packages/demo/src/views/InArticle.vue",
"chars": 9995,
"preview": "<template>\n <div class=\"home VueCurrencyFilter\">\n <section class=\"container hero\">\n <b-row mb=\"4\" align=\"center"
},
{
"path": "packages/demo/src/views/InFeed.vue",
"chars": 3361,
"preview": "<template>\n <div class=\"home VueCurrencyFilter\">\n <section class=\"container hero\">\n <b-row mb=\"4\" align=\"center"
},
{
"path": "packages/demo/tsconfig.json",
"chars": 778,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"module\": \"ESNext\",\n \"declaration\": true,\n \"strict\": true,\n \""
},
{
"path": "packages/demo/vue.config.js",
"chars": 96,
"preview": "module.exports = {\n publicPath: '/vue-google-adsense',\n pwa: {\n themeColor: '#000',\n },\n}\n"
},
{
"path": "packages/lib/README.md",
"chars": 7348,
"preview": "# 💰 Vue Google Adsense\n\n [!["
},
{
"path": "packages/lib/bili.config.ts",
"chars": 284,
"preview": "import { Config } from 'bili'\n\nconst config: Config = {\n input: [\n 'src/VueGoogleAdsense.ts',\n 'src/ads/Adsense.t"
},
{
"path": "packages/lib/package.json",
"chars": 1289,
"preview": "{\n\t\"name\": \"vue-google-adsense\",\n\t\"description\": \"Vue.js Google Adsense Component with InFeed and InArticle Ads support\""
},
{
"path": "packages/lib/src/@types/global.d.ts",
"chars": 64,
"preview": "declare global {\n interface Window {\n adsbygoogle: []\n }\n}\n"
},
{
"path": "packages/lib/src/VueGoogleAdsense.ts",
"chars": 265,
"preview": "import Adsense from './ads/Adsense'\nimport InArticleAdsense from './ads/InArticleAdsense'\nimport InFeedAdsense from './a"
},
{
"path": "packages/lib/src/ads/Adsense.ts",
"chars": 182,
"preview": "import AdsenseComponent from './AdsenseComponent.vue'\n\nconst Adsense = {\n install: (app, options) => {\n app.componen"
},
{
"path": "packages/lib/src/ads/AdsenseComponent.vue",
"chars": 1357,
"preview": "<template>\n <div :class=\"rootClass\">\n <template v-if=\"isNewAdsCode === 'yes'\">\n <scriptx type=\"text/javascript\""
},
{
"path": "packages/lib/src/ads/AutoAdsense.ts",
"chars": 759,
"preview": "import constant from '../utils/constant'\n\nconst AutoAdsense = {\n install: (app, { adClient = '', isNewAdsCode = false }"
},
{
"path": "packages/lib/src/ads/InArticleAdsense.ts",
"chars": 236,
"preview": "import InArticleAdsenseComponent from './InArticleAdsenseComponent.vue'\n\nconst InArticleAdsense = {\n install: (app, opt"
},
{
"path": "packages/lib/src/ads/InArticleAdsenseComponent.vue",
"chars": 1530,
"preview": "<template>\n <div :class=\"rootClass\">\n <template v-if=\"isNewAdsCode === 'yes'\">\n <scriptx type=\"text/javascript\""
},
{
"path": "packages/lib/src/ads/InFeedAdsense.ts",
"chars": 218,
"preview": "import InFeedAdsenseComponent from './InFeedAdsenseComponent.vue'\n\nconst InFeedAdsense = {\n install: (app, options) => "
},
{
"path": "packages/lib/src/ads/InFeedAdsenseComponent.vue",
"chars": 1537,
"preview": "<template>\n <div :class=\"rootClass\">\n <template v-if=\"isNewAdsCode === 'yes'\">\n <scriptx type=\"text/javascript\""
},
{
"path": "packages/lib/src/shims-vue.d.ts",
"chars": 72,
"preview": "declare module '*.vue' {\n import Vue from 'vue'\n export default Vue\n}\n"
},
{
"path": "packages/lib/src/utils/assign.ts",
"chars": 279,
"preview": "export default (target, varArgs) => {\n const to = Object(target)\n\n for (const nextKey in varArgs) {\n // Avoid bugs "
},
{
"path": "packages/lib/src/utils/constant.ts",
"chars": 93,
"preview": "export default {\n ADS_SCRIPT: '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js',\n}\n"
},
{
"path": "packages/lib/src/utils/props.ts",
"chars": 901,
"preview": "export default {\n rootClass: {\n type: String,\n default: 'adswrapper',\n },\n insClass: {\n type: String,\n de"
},
{
"path": "packages/lib/tsconfig.json",
"chars": 653,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"module\": \"ESNext\",\n \"declaration\": true,\n \"strict\": true,\n \""
},
{
"path": "pnpm-workspace.yaml",
"chars": 28,
"preview": "packages:\n - 'packages/**'\n"
},
{
"path": "turbo.json",
"chars": 198,
"preview": "{\n \"$schema\": \"https://turborepo.org/schema.json\",\n \"baseBranch\": \"origin/master\",\n \"pipeline\": {\n \"build\": {\n "
}
]
About this extraction
This page contains the full source code of the mazipan/vue-google-adsense GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 56 files (68.3 KB), approximately 20.9k tokens, and a symbol index with 11 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.