Support for Nuxt 3

[thoth3x]

Hi,

It seems this plugin doesn't work on Nuxt 3 (v3.0.0-rc.1)

When I run npm run dev it says Cannot start nuxt: Invalid Version: null

My nuxt.config.ts:

Is there any workaround for that or do you planning on updating the plugin to work with Nuxt 3?

Thanks!

[copostic]

Would be very appreciated indeed. Any alternative until the release of a compatible version ?

[iannngit]

The gtm module was updated 2 years ago and doesn't support Nuxt 3. I created a discussion on this topic in case you'd like to comment or follow.

[acidjazz]

@copostic

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

export default defineNuxtPlugin((nuxtApp) => {
  if (useRuntimeConfig().public.appEnv !== 'production') return
  nuxtApp.vueApp.use(createGtm({
    id: 'GTM-???????',
    defer: false,
    compatibility: false,
    enabled: true,
    debug: true,
    loadScript: true,
    vueRouter: useRouter(),
    trackOnNextTick: false,
  }))
})

[copostic]

Amazing, thanks @acidjazz I wasn't expecting anything anymore from this thread but what a great surprise on this monday morning !

Have a nice day 🌞

[acidjazz]

Amazing, thanks @acidjazz I wasn't expecting anything anymore from this thread but what a great surprise on this monday morning !

Have a nice day 🌞

no problem! make sure its client only: /plugins/gtm.client.ts

[anton-reviakin]

@copostic

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

export default defineNuxtPlugin((nuxtApp) => {
  if (useRuntimeConfig().public.appEnv !== 'production') return
  nuxtApp.vueApp.use(createGtm({
    id: 'GTM-???????',
    defer: false,
    compatibility: false,
    enabled: true,
    debug: true,
    loadScript: true,
    vueRouter: useRouter(),
    trackOnNextTick: false,
  }))
})

After install @gtm-support/vue-gtm I see request to https://vk.com/js/api/openapi.js?169 and https://connect.facebook.net/en_US/fbevents.js

[niklasfjeldberg]

Are anyone working on this?

[acidjazz]

@niklasfjeldberg https://github.com/johannschopplich/nuxt-gtag

[iustin-gheorghe]

@acidjazz nuxt-gtag seems to be a GA4 library for Nuxt, not GTM one.

[acidjazz]

@acidjazz nuxt-gtag seems to be a GA4 library for Nuxt, not GTM one.

nope, it's GTM. using it now w/ my tag on multiple setups.

[GuillaumeDgr]

@acidjazz nuxt-gtag seems to be a GA4 library for Nuxt, not GTM one.

nope, it's GTM. using it now w/ my tag on multiple setups.

Hi, could you pls provide an example how you are using GTM and GA4 tags in the same time ? Many thanks

[memic84]

@copostic

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

export default defineNuxtPlugin((nuxtApp) => {
  if (useRuntimeConfig().public.appEnv !== 'production') return
  nuxtApp.vueApp.use(createGtm({
    id: 'GTM-???????',
    defer: false,
    compatibility: false,
    enabled: true,
    debug: true,
    loadScript: true,
    vueRouter: useRouter(),
    trackOnNextTick: false,
  }))
})

We have been using this implementation, but the vue-gtm seems only to add the script in the body, en not in the head. Data is received, but not everything is working correctly in GTM. Seems that the script needs to be added to the head as well. Anybody else had this before?

[nodeexcel]

modules: [ '@zadigetvoltaire/nuxt-gtm' ], gtm: { id: 'GTM-ID', enabled: true, debug: false, },

it's working fine

[joeczucha]

@acidjazz nuxt-gtag seems to be a GA4 library for Nuxt, not GTM one.

nope, it's GTM. using it now w/ my tag on multiple setups.

Are you sure it's GTM? Just checking as this suggests otherwise: https://github.com/johannschopplich/nuxt-gtag/issues/13

[NikhilVerma]

I have made a drop in replacement for this module - https://www.npmjs.com/package/gtm-nuxt3