How to change GTM ID dynamically?

[renansantos]

I need to use different GTM IDs acording to my routes.
Is the only possible configuration via defineNuxtConfig or could i configure it using a composable, for example?

[devonik]

Hey, i had the same request. There are two options. I did the second for my case so not 100% sure the first will work but should.

1. This package merge the nuxt config gtm: {} with the current nuxt public runtime config public.gtm: {} see in module.ts

const moduleOptions: ModuleOptions = defu(nuxt.options.runtimeConfig.public.gtm, options)

    nuxt.options.runtimeConfig.public.gtm = moduleOptions

You should can just set the id in runtime config instead of the module config. So in runtimeConfig.public.gtm.id and then set the environment variable NUXT_PUBLIC_{whatever} in your environment to overwrite the value

2. Use the package @gtm-support/vue-gtm directly and create your own plugin so you can initialise the gtm instance in the plugin where you have control on the runtime config

[renansantos]

Thank you, @devonik !
I don't know yet wich will be better for my project. But i think both solutions will work.
I am still to understand how lots of thinks work in Nuxt.
Would you mind sharing your plugin so i can learn and create my own solution for my needs?