fix(docs): add vue-gtag (#3477)

* fix(docs): add vue-gtag

* fix(docs): use google analytics id from .env

---------

Co-authored-by: Yauheni Prakopchyk <ontrew@gmail.com>

packages/docs/modules/google-analytics/index.ts

@@ -0,0 +1 @@
+export { default as default } from './module'

packages/docs/modules/google-analytics/module.ts

@@ -0,0 +1,28 @@
+import { defineNuxtModule, addPluginTemplate } from '@nuxt/kit';
+import { resolve } from 'pathe'
+
+/** Module used to add current file path to page-config */
+export default defineNuxtModule<any>({
+  meta: {
+    name: 'googleAnalytics',
+  },
+
+  defaults: {
+    id: 0,
+  },
+
+  setup(options) {
+    if (!options.id) {
+      console.warn('Google Analytics ID is not specified. Disabling module.')
+      return
+    }
+
+    addPluginTemplate({
+      src: resolve(__dirname, './runtime/plugin.ts'),
+
+      options: {
+        ID: options.id,
+      }
+    })
+  }
+})

packages/docs/modules/google-analytics/runtime/plugin.ts

@@ -0,0 +1,8 @@
+import { defineNuxtPlugin } from '#app';
+import VueGtag from 'vue-gtag'
+
+export default defineNuxtPlugin((nuxt) => {
+  nuxt.vueApp.use(VueGtag, {
+    config: { id: "<%= options.ID %>" }
+  })
+})

packages/docs/nuxt.config.ts

@@ -70,7 +70,12 @@ export default defineNuxtConfig({
     compressPublicAssets: true,
   },
 
+  googleAnalytics: {
+    id: process.env.GOOGLE_ANALYTICS_ID,
+  },
+
   modules: [
+    './modules/google-analytics',
     './modules/banner',
     './modules/vuestic',
     './modules/page-config',

packages/docs/package.json

@@ -21,8 +21,8 @@
     "@nuxtjs/i18n": "^8.0.0-beta.11",
     "@nuxtjs/tailwindcss": "^6.3.0",
     "@types/escodegen": "^0.0.7",
-    "@types/marked": "^4.3.0",
     "@types/estree": "^1.0.0",
+    "@types/marked": "^4.3.0",
     "acorn": "^8.8.1",
     "acorn-walk": "^8.2.0",
     "autoprefixer": "^10.4.13",
@@ -47,6 +47,7 @@
     "acorn": "^8.8.1",
     "codesandbox": "^2.2.3",
     "highlight.js": "^11.7.0",
-    "marked": "^4.3.0"
+    "marked": "^4.3.0",
+    "vue-gtag": "^2.0.1"
   }
 }

yarn.lock

@@ -18018,6 +18018,11 @@ vue-eslint-parser@^9.0.1:
     lodash "^4.17.21"
     semver "^7.3.6"
 
+vue-gtag@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/vue-gtag/-/vue-gtag-2.0.1.tgz#d4dc1b9cf79809c37ce844824c0f7fa97af520dd"
+  integrity sha512-aM4A58FVL0wV2ptYi+xzAjeg+pQVRyUcfBc5UkXAwQrR4t3WBhor50Izp2I+3Oo7+l+vWJ7u78DGcNzReb8S/A==
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"