nuxt3-gtm

Nuxt 3 GTM

Nuxt 3 module for adding Google Tag Manager (GTM) script to the every page of your nuxt 3 project.

Quick Setup

1. Add nuxt3-gtm dependency to your project

# Using pnpm
pnpm add -D nuxt3-gtm

# Using yarn
yarn add --dev nuxt3-gtm

# Using npm
npm install --save-dev nuxt3-gtm

2. Add nuxt3-gtm to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    "nuxt3-gtm"
  ]
})

Settings

There are only two settings:

• id: your gtm id
• shownInDevMode : Whether you want GTM to be included in a dev environment.

You are able to pass these options through:

• gtm section in your nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    "nuxt3-gtm"
  ],
  gtm: {
    id: "GTM-123456"
  }
})

• nuxt runtimeConfig (you can override these settings by setting up env variables)

export default defineNuxtConfig({
  modules: [
    'nuxt3-gtm'
  ],
  runtimeConfig: {
    public: {
      gtm: {
        id: "GTM-123456",
        shownInDevMode: false,
      }
    }
  }
})

Helpers and composables

There is also an auto-imported composable called "useGtm". You can trigger events in GTM dataLayer with it, for example

const gtm = useGtm();
gtm.pushData({ 
  event: "test",
  data: "myData",
});

Although this feature is supported during SSR, keep in mind that your events might be doubled if you use this composable carelessly.

//to avoid duplicates, you can trigger such events only on the client side or only on the server side
<script setup lang="ts">
if (process.server) {
  gtm.pushData({
    event: "test",
    data: "myData",
  })
}
</script>

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release