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