Google Ads (#6)

components/GoogleAd.vue

@@ -0,0 +1,38 @@
+<template>
+  <ins
+    class="adsbygoogle"
+    :data-ad-client="adClient"
+    :data-ad-slot="adSlot"
+    :data-ad-format="adFormat"
+    :style="adStyle"
+  ></ins>
+</template>
+
+<script>
+export default {
+  name: 'GoogleAd',
+  props: {
+    adClient: {
+      type: String,
+      required: true,
+    },
+    adSlot: {
+      type: String,
+      required: true,
+    },
+    adFormat: {
+      type: String,
+      required: false,
+      default: 'auto',
+    },
+    adStyle: {
+      type: String,
+      required: false,
+      default: 'display: block',
+    },
+  },
+  mounted() {
+    ;(window.adsbygoogle = window.adsbygoogle || []).push({})
+  },
+}
+</script>

nuxt.config.js

@@ -25,6 +25,13 @@ export default {
       },
     ],
     link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
+    script: [
+      {
+        src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js',
+        'data-ad-client': 'ca-pub-4800120742989028',
+        async: true,
+      },
+    ],
   },
   /*
    ** Global CSS

package-lock.json

@@ -11849,9 +11849,9 @@
       "integrity": "sha512-SdKRBeoXUjaZ9R/8AyxsdTqkOfMcI5tWxPZOUX5Ie1BTL5rPSZ0O++pbiZCeYeythiZIdLEfkDiQPKIaWk5hDg=="
     },
     "vue-server-renderer": {
-      "version": "2.6.11",
+      "version": "2.6.12",
-      "resolved": "https://registry.npmjs.org/vue-server-renderer/-/vue-server-renderer-2.6.11.tgz",
+      "resolved": "https://registry.npmjs.org/vue-server-renderer/-/vue-server-renderer-2.6.12.tgz",
-      "integrity": "sha512-V3faFJHr2KYfdSIalL+JjinZSHYUhlrvJ9pzCIjjwSh77+pkrsXpK4PucdPcng57+N77pd1LrKqwbqjQdktU1A==",
+      "integrity": "sha512-3LODaOsnQx7iMFTBLjki8xSyOxhCtbZ+nQie0wWY4iOVeEtTg1a3YQAjd82WvKxrWHHTshjvLb7OXMc2/dYuxw==",
       "requires": {
         "chalk": "^1.1.3",
         "hash-sum": "^1.0.2",
@@ -11859,7 +11859,7 @@
         "lodash.template": "^4.5.0",
         "lodash.uniq": "^4.5.0",
         "resolve": "^1.2.0",
-        "serialize-javascript": "^2.1.2",
+        "serialize-javascript": "^3.1.0",
         "source-map": "0.5.6"
       },
       "dependencies": {
@@ -11891,9 +11891,12 @@
           "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ="
         },
         "serialize-javascript": {
-          "version": "2.1.2",
+          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz",
+          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-3.1.0.tgz",
-          "integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ=="
+          "integrity": "sha512-JIJT1DGiWmIKhzRsG91aS6Ze4sFUrYbltlkg2onR5OrnNM02Kl/hnY/T4FN2omvyeBbQmMJv+K4cPOpGzOTFBg==",
+          "requires": {
+            "randombytes": "^2.1.0"
+          }
         },
         "source-map": {
           "version": "0.5.6",