Update vue-gtag to vue-gtag-next and adjust related configurations for ESM compatibility

Author: wilfredinni

package.json

@@ -18,7 +18,7 @@
     "pinia": "^2.3.1",
     "prism-theme-vars": "^0.2.5",
     "vue": "^3.5.16",
-    "vue-gtag": "^2.1.2",
+    "vue-gtag-next": "^1.14.0",
     "vue-router": "^4.5.1"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -1,12 +1,13 @@
-import VueGtag from 'vue-gtag'
+import VueGtag from 'vue-gtag-next'
 import { type UserModule } from '~/types'
 
-export const install: UserModule = ({ app }) => {
+export const install: UserModule = ({ app, router }) => {
   const inProduction = import.meta.env.VITE_IN_PRODUCTION
   if (inProduction === 'true') {
     const gTag = import.meta.env.VITE_GTAG || 'tag'
     app.use(VueGtag, {
       config: { id: gTag },
-    })
+      router
+    } as any)
   }
 }

src/modules/analytics.ts

@@ -21,6 +21,7 @@ export default defineConfig(({ mode }) => {
     resolve: {
       alias: {
         '~/': `${path.resolve(__dirname, 'src')}/`,
+        'vue-gtag': 'vue-gtag/dist/vue-gtag.esm-browser.js', // force ESM build for vue-gtag
       },
     },
 
@@ -132,7 +133,7 @@ export default defineConfig(({ mode }) => {
     ssgOptions: {
       script: 'async',
       formatting: 'minify',
-      format: 'cjs',
+      format: 'esm', // changed from 'cjs' to 'esm' to fix ESM/CJS compatibility
       onFinished() {
         const hostname = `https://${process.env.VITE_BASE_URL}`
         generateSitemap({