refactor!: nuxt 3 only support (#186)

Co-authored-by: Alexander Lichter <github@lichter.io>
nuxt-modules · Oct 2, 2023 · 4be3f96 · 4be3f96
1 parent a23f16c
commit 4be3f96
Show file tree

Hide file tree

Showing 32 changed files with 8,274 additions and 16,245 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,2 @@
 dist
-.nuxt
+node_modules
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": ["@nuxt/eslint-config"]
+}
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.gitignore b/.gitignore
@@ -1,10 +1,59 @@
+# Dependencies
 node_modules
-*.iml
-.idea
+
+# Logs
 *.log*
+
+# Temp directories
+.temp
+.tmp
+.cache
+
+# Yarn
+**/.yarn/cache
+**/.yarn/*state*
+
+# Generated dirs
+dist
+*.tgz
+
+# Nuxt
 .nuxt
-.vscode
-.DS_STORE
+.output
+.vercel_build_output
+.build-*
+.env
+.netlify
+
+# Env
+.env
+
+# Testing
+reports
 coverage
-dist
-example/*/yarn.lock
+*.lcov
+.nyc_output
+
+# VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Intellij idea
+*.iml
+.idea
+
+# OSX
+.DS_Store
+.AppleDouble
+.LSOverride
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+.pnpm-lock.yaml
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
diff --git a/.nuxtrc b/.nuxtrc
@@ -0,0 +1,2 @@
+imports.autoImport=false
+typescript.includeWorkspace=true
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,20 @@
+{
+  "cSpell.words": [
+    "adsbygoogle",
+    "ADSENSE",
+    "adtest",
+    "crossorigin",
+    "defu",
+    "googlesyndication",
+    "noarchive",
+    "nofollow",
+    "pagead",
+    "pathe",
+    "Uacct"
+  ],
+  "prettier.enable": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "editor.formatOnSave": false,
+}
diff --git a/README.md b/README.md
@@ -1,3 +1,15 @@
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+---
+
+**Note:** This branch is for **Nuxt 3** compatible module. Checkout [`legacy-v2` branch](https://github.com/nuxt-modules/google-adsense/tree/legacy-v2) for **Nuxt 2** support.
+
+---
+
+
 # Google AdSense
 > Google AdSense integration for Nuxt.js. Advertisements will update whenever the page route changes
 
@@ -24,7 +36,7 @@ Using top level options:
     ['@nuxtjs/google-adsense']
   ],
 
- 'google-adsense': {
+ googleAdsense: {
     id: 'ca-pub-#########'
   }
 }
@@ -38,13 +50,13 @@ Using runtime config:
     ['@nuxtjs/google-adsense']
   ],
 
-  'google-adsense': {
+  googleAdsense: {
     onPageLoad: false,
     pageLevelAds: false,
   },
 
   publicRuntimeConfig: {
-    'google-adsense': {
+    googleAdsense: {
       id: process.env.GOOGLE_ADSENSE_ID,
       test: process.env.GOOGLE_ADSENSE_TEST_MODE === 'true',
     },
@@ -61,19 +73,21 @@ added to the `<head>` section of your pages.
 | Option | type |  description
 | -------- | ---- | -----------
 | `id` | String | Your Google AdSense Publisher client ID (i.e. `ca-pub-#########`). **Required** when not in test mode.
-| `pageLevelAds` | Boolean | Enable AdSense Page Level Ads. Default is `false`. Refer to the AdSense docs for details.
-| `tag` | String | AdSense component tag name. Defaults to `adsbygoogle`.
-| `includeQuery` | Boolean | When `false`, only `$route.path` is checked for changes. If set to `true` `$route.query` will also be taken into account. The default is `false`.
-| `analyticsUacct` | String | Google Analytics Account ID (if linking analytics with AdSense, i.e. `UA-#######-#`).
+| `adFormat` | String | Sets a global default ad format. Can be overridden with component props.
 | `analyticsDomainName` | String | Google Analytics Account Domain (if linking analytics with AdSense, i.e. `example.com`).
-| `overlayBottom` | Boolean | Enable Adsense Anchor Ads to show at bottom. Default is `false`. Refer to the AdSense docs for details.
+| `analyticsUacct` | String | Google Analytics Account ID (if linking analytics with AdSense, i.e. `UA-#######-#`).
+| `hideFilled` | Boolean | When `false`, unfilled ads will not be hidden, when `true` unfilled ads will be hidden. The default is `false`. 
+| `includeQuery` | Boolean | When `false`, only `$route.path` is checked for changes. If set to `true` `$route.query` will also be taken into account. The default is `false`.
 | `onPageLoad` | Boolean | Loads Adsense script after page load. Default is `false`.
+| `overlayBottom` | Boolean | Enable Adsense Anchor Ads to show at bottom. Default is `false`. Refer to the AdSense docs for details.
+| `pageLevelAds` | Boolean | Enable AdSense Page Level Ads. Default is `false`. Refer to the AdSense docs for details.
 | `pauseOnLoad` | Boolean | Pauses ad requests to obtain user consent to use cookies or other local storage in accordance with the GDPR. Refer to the AdSense docs for details. `false`.
+| `tag` | String | AdSense component tag name. Defaults to `adsbygoogle`.
 | `test` | Boolean | Force AdSense into _test_ mode (see below).
 
 ### Test mode
 
-The AdSense module will automatically switch to `test` mode when runniung Nuxt in `dev` mode.
+The AdSense module will automatically switch to `test` mode when running Nuxt in `dev` mode.
 But you can keep test mode on in production by setting the configuration option `test` to `true`.
 
 Test mode uses a test publisher ID, so that you will not be violating AdSense TOS.
@@ -83,43 +97,51 @@ correct dimensions (i.e. will occupy the correct space needed by the rendered ad
 
 ## Usage
 
-Insert the `<adsbygoogle />` component (or custom component name specified in options)
-wherever you would like an advertisment placed.
+Insert the `<Adsbygoogle />` component wherever you would like an advertisement placed.
 
-The ad defaults to `auto` size format (configurable by setting the prop `ad-format`). This mode
-is responsive by nature. You should place the `<adsbygoogle />` component inside a container element
+You should place the `<Adsbygoogle />` component inside a container element
 that has a specified (min/max) width and (min/max) height (which can be based on media queries),
-or use style or classes on the `<adsbygoogle />` component to restrict the advertisement to a
+or use style or classes on the `<Adsbygoogle />` component to restrict the advertisement to a
 specific size (or sizes).
 
-Use the `ad-slot` property to specify your Google AdSense ad slot value (specified as a string)
+Use the `ad-slot` property to specify your Google AdSense ad slot value (specified as a string).
+
+Please refer to the adsense documentation for more info.
+[Google Adsense Documentation](https://support.google.com/adsense/answer/9183549?hl=en&ref_topic=9183242&sjid=7647008134090136391-NA)
 
 **Component props:**
 
 | prop | type | description
 | ---- | ---- | -----------
 | `ad-slot` | String | Google Adsense adslot. **This prop is required when not in test mode**. Refer to your AdSense account for ad-slot values.
-| `ad-format` | String | Defaults to `'auto'`. Refer to the AdSense docs for other options
+| `ad-format` | String | Optional. Refer to the AdSense docs for other options
 | `ad-style` | Object | Styles to apply to the rendered `<ins>` element. Default: `{ display: 'block' }`. Refer to VueJS [style binding docs](https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1) for the Object format.
 | `ad-layout` | String | Optional. Refer to the AdSense docs
 | `ad-layout-key` | String | Optional. Refer to the AdSense docs
+| `hide-unfilled` | Boolean | Optional. Hides unfilled ads if true.
 | `page-url` | String | Optional.  Set a reference page URL (of similar content) if the ad is on a page that requires authentication. When set, this prop must be a fully qualified URL (including protocol and hostname).
 | `include-query` | Boolean | Override global option `includeQuery` on a per ad basis. Ensure all ads on a page have the same setting.
 | `analytics-uacct` | String | Google Analytics Account ID (if linking analytics with AdSense, i.e. `UA-#######-#`). Defaults to the value specified in the plugin option `analyticsUacct`.
 | `analytics-domain-name` | String | Google Analytics Account domain (if linking analytics with AdSense, i.e. `example.com`). Defaults to the value specified in the plugin option `analyticsDomainName`.
 
+**Component exposed internal data**
+| name | type | description
+| ____ | ____ | ___________
+|`showAd` | method | Trigger the show ad method to show the ad.
+| `updateAd` | method | Trigger the update ad method to refresh the ad.
+| `isUnfilled` | computed ref | Tracks unfilled attribute on ad element. Returns `true` if `data-ad-state` = 'unfilled'.
 
 ## Automatic updating of Ads
-Whenever your route changes, any displayed ads will update, just as they would on normal
+Whenever your route changes or optionally if your route query parameters change, any displayed ads will update, just as they would on normal
 page loads.
 
 
 ## Caveats:
 - **Caution:** Reloading of ads arbitrarily (with minimal page content changes) may result in
 the suspension of your AdSense account. _Refer to AdSense for full terms of use._
 - Google needs to crawl each page where ads appear. Ensure your site SSR renders any page where
-ads apepar. Ads on un-crawlable pages will not be shown.
-- When placing ads on pages that require authentication, set `page-url` on the `<adsbygoogle />` component to the URL of a page on your site that is publicly accessible, which would have similar/relevant content.
+ads appear. Ads on un-crawlable pages will not be shown.
+- When placing ads on pages that require authentication, set `page-url` on the `<Adsbygoogle />` component to the URL of a page on your site that is publicly accessible, which would have similar/relevant content.
 
 
 ## Background
@@ -130,14 +152,23 @@ to handle updating ads on progressive web applications:
 
 Each time a new advertisement is requested, the AdSense parameter `data-ad-region` is
 updated to a random value. For this reason, you cannot set the `data-ad-region` attribute
-on the `<adsbygoogle />` component.
-
-For test mode, the following blog was used as a reference:
-- https://www.thedev.blog/3087/test-adsense-ads-safely-without-violating-adsense-tos/
+on the `<Adsbygoogle />` component.
 
 
 ## License
 
 [MIT License](./LICENSE)
 
-Copyright (c) 2017 Troy Morehouse - Nuxt Community
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/google-adsense/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-href]: https://npmjs.com/package/@nuxtjs/google-adsense
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/@nuxtjs/google-adsense.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-downloads-href]: https://npmjs.com/package/@nuxtjs/google-adsene
+
+[license-src]: https://img.shields.io/npm/l/@nuxtjs/google-adsense.svg?style=flat&colorA=18181B&colorB=28CF8D
+[license-href]: https://npmjs.com/package/@nuxtjs/google-adsense
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
+[nuxt-href]: https://nuxt.com
diff --git a/build.config.js b/build.config.js
diff --git a/nuxt2-playground/nuxt.config.js b/nuxt2-playground/nuxt.config.js
diff --git a/nuxt2-playground/package.json b/nuxt2-playground/package.json
diff --git a/nuxt2-playground/pages/index.vue b/nuxt2-playground/pages/index.vue
diff --git a/nuxt2-playground/tsconfig.json b/nuxt2-playground/tsconfig.json