Nuxt support

[dzcpy]

Request / Idea

Hi, this is a very nice tool. I wonder do you consider to support Nuxt.js? The origional @nuxt/gtm never worked for me, so it would be great if vue-gtm can support nuxt. Many thanks! ...

Additional Context

...

[Shinigami92]

I have zero experience with Nuxt 🤔 Could you create a simple reproduction of what you tried yet? (Please setup a whole Nuxt project and send me the link to the Repo or StackBlitz, so I can investigate it) A simple short list of commands I need to execute would also be welcome.

Hope I can help

[xpiREC]

Create plugin client:

import Vue from 'vue'
import VueGtm from '@gtm-support/vue2-gtm';

export default ({}, inject) => {
  Vue.use(VueGtm, {
    id: 'GTM-xxx'
  });
}

and finish

[davideapvd]

this plugin probably won't work with nuxt3, here is the main error and config

plugins/vue-gtm.client.js

import { createGtm } from '@gtm-support/vue-gtm';

export default defineNuxtPlugin((nuxtApp) => {
    const { public: {gtmId} } = useRuntimeConfig()

    nuxtApp.vueApp.use(
        createGtm({
            id: gtmId
        })
    )
})

error

✘ [ERROR] [plugin vite:dep-pre-bundle] Failed to resolve entry for package "vue-router". The package may have incorrect main/module/exports specified in its package.json: No known conditi
ons for "." entry in "vue-router" package                                                                                                                                                  

    node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:40945:10:                                                                                                                           
      40945 │     throw new Error(`Failed to resolve entry for package "${id}". ` +                                                                                                        
            ╵           ^                                                                                                                                                                  

    at packageEntryFailure (/home/user/project/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:40945:11)                                          
    at resolvePackageEntry (/home/user/project/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:40941:9)                                           
    at tryNodeResolve (/home/user/project/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:40748:20)                                               
    at Context.resolveId (/home/user/project/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:40556:28)                                            
    at Object.resolveId (/home/user/project/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:39229:55)                                             
    at runMicrotasks (<anonymous>)                                                                                                                                                         
    at processTicksAndRejections (node:internal/process/task_queues:96:5)                                                                                                                  
    at async /home/user/project/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:61552:27                                                          
    at async /home/user/project/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:38746:34                                                          
    at async callback (/home/user/project/node_modules/esbuild/lib/main.js:921:28)                                                                   

  This error came from the "onResolve" callback registered here:                                                                                                                           

    node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:38725:18:                                                                                                                           
      38725 │             build.onResolve({ filter: /^[\w@][^:]/ }, async ({ path: id, importer, kind }) => {                                                                              
            ╵                   ~~~~~~~~~                                                                                                                                                  

    at setup (/home/user/project/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:38725:19)
    at handlePlugins (/home/user/project/node_modules/esbuild/lib/main.js:843:23)                                                                    
    at Object.buildOrServe (/home/user/project/node_modules/esbuild/lib/main.js:1137:7)                                                              
    at /home/user/project/node_modules/esbuild/lib/main.js:2085:17               
    at new Promise (<anonymous>)                                                                                                                                                           
    at Object.build (/home/user/project/node_modules/esbuild/lib/main.js:2084:14)                         
    at Object.build (/home/user/project/node_modules/esbuild/lib/main.js:1931:51)                         
    at runOptimizeDeps (/home/user/project/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:39969:34)
    at async runOptimizer (/home/user/project/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:50498:38)

  The plugin "vite:dep-pre-bundle" was triggered by this import

    node_modules/@gtm-support/vue-gtm/dist/index.js:116:93:
      116 │                     return [4 /*yield*/, Promise.resolve().then(function () { return require('vue-router'); })];

[Shinigami92]

https://github.com/gtm-support/vue-gtm/issues/209#issuecomment-1178711034 This error is related to #226

[Shinigami92]

I released 2.0.0 Maybe cjs or esm bundle is now helping with that issue 🤔 🤷

[YunYouJun]

Is Vue 2 a typo?

[Shinigami92]

No it's not a typo This repo has two branches, one main branch and one vue2-gtm branch The (Vue 2) releases are pointing to that vue2-gtm branch

Some folks have reported that they have problems with the 2.0.0 version, so try out the 1.3.0 version and look if that works for you in that case

[Saurou]

@davideapvd solution works, the plugin adds the gtm code and tracking (at least a basic one) seems to work.

The bit I am not being able to figure out is how to use $gtm in my pages, as I need, for example, to activate it only on an Accept click via this.$gtm.enable(true);

I tried to inspect the content of useNuxtApp() but not being able to find anything. Am I missing some basic knowledge of how to use vue plugins in Nuxt 3? Thanks for any help.

UPDATE

in case someone else stumbles upon this, I found the solution on this other issue. What I was missing was to properly set up a composable!

[LouisMazel]

You can use this module @zadigetvoltaire/nuxt-gtm, it's a wrapper of this lib for Nuxt 3 users.

Enjoy !