### Install Nuxt GTM Module

Source: https://github.com/zadigetvoltaire/nuxt-gtm/blob/main/README.md

Installs the Nuxt GTM module using different package managers (pnpm, yarn, npm). This is the first step to integrate Google Tag Manager into your Nuxt 3 project.

```bash
# Using pnpm
pnpm add -D @zadigetvoltaire/nuxt-gtm

# Using yarn
yarn add --dev @zadigetvoltaire/nuxt-gtm

# Using npm
npm install --save-dev @zadigetvoltaire/nuxt-gtm
```

--------------------------------

### Nuxt GTM Development and Release Commands

Source: https://github.com/zadigetvoltaire/nuxt-gtm/blob/main/README.md

Provides essential bash commands for developing and releasing the Nuxt GTM project. Includes commands for setting up dependencies, running the development server, testing, linting, and automating version releases.

```bash
# Install dependencies, prepare apps & run dev server
make start

# Run dev server
pnpm dev

# Develop with playground, with bundled client ui
pnpm play:prod

# Run ESLint
pnpm lint

# Run Vitest
pnpm test
pnpm test:watch
```

```bash
pnpm release
```

--------------------------------

### Configure Nuxt GTM Module

Source: https://github.com/zadigetvoltaire/nuxt-gtm/blob/main/README.md

Configures the Nuxt GTM module by adding it to the `modules` array in `nuxt.config.ts`. It also shows how to set GTM container IDs and various options like `defer`, `compatibility`, `nonce`, `enabled`, `debug`, `loadScript`, `enableRouterSync`, `ignoredViews`, `trackOnNextTick`, and `devtools`.

```typescript
export default defineNuxtConfig({
  modules: [
    '@zadigetvoltaire/nuxt-gtm'
  ],
  gtm: {
    id: 'GTM-xxxxxx', // Your GTM single container ID, array of container ids ['GTM-xxxxxx', 'GTM-yyyyyy'] or array of objects [{id: 'GTM-xxxxxx', queryParams: { gtm_auth: 'abc123', gtm_preview: 'env-4', gtm_cookies_win: 'x'}}, {id: 'GTM-yyyyyy', queryParams: {gtm_auth: 'abc234', gtm_preview: 'env-5', gtm_cookies_win: 'x'}}],
    queryParams: {
      gtm_auth: 'AB7cDEf3GHIjkl-MnOP8qr',
      gtm_preview: 'env-4',
      gtm_cookies_win: 'x',
    },
    defer: false,
    compatibility: false,
    nonce: '2726c7f26c',
    enabled: true,
    debug: true,
    loadScript: true,
    enableRouterSync: true,
    ignoredViews: ['homepage'],
    trackOnNextTick: false,
    devtools: true,
  }
})

// Alternative configuration using public runtimeConfig
export default defineNuxtConfig({
  ...
  runtimeConfig: {
    public: {
      gtm: {
        id: 'GTM-xxxxxx',
        queryParams: {
          gtm_auth: 'AB7cDEf3GHIjkl-MnOP8qr',
          gtm_preview: 'env-4',
          gtm_cookies_win: 'x',
        },
        defer: false,
        compatibility: false,
        nonce: '2726c7f26c',
        enabled: true,
        debug: true,
        loadScript: true,
        enableRouterSync: true,
        ignoredViews: ['homepage'],
        trackOnNextTick: false,
        devtools: true,
      }
    }
  }
})
```

--------------------------------

### Track Event with Options API

Source: https://github.com/zadigetvoltaire/nuxt-gtm/blob/main/README.md

Illustrates how to track custom events using the `$gtm` instance within the Options API in Nuxt 3. This method is suitable for projects that utilize the Options API for component logic.

```typescript
export default {
  methods: {
    triggerEvent() {
      this.$gtm.trackEvent({
        event: 'event name',
        category: 'category',
        action: 'click',
        label: 'My custom component trigger',
        value: 5000,
        noninteraction: false,
      })
    }
  }
}
```

--------------------------------

### Track Event with Composition API

Source: https://github.com/zadigetvoltaire/nuxt-gtm/blob/main/README.md

Demonstrates how to use the `useGtm` composable in Nuxt 3's Composition API to track custom events. It shows how to call `trackEvent` with event details like name, category, action, label, value, and non-interaction.

```vue
<template>
  <button @click="triggerEvent">
    Trigger event!
  </button>
  <button @click="triggerView">
    Trigger event!
  </button>
</template>

<script lang="ts" setup>
  const gtm = useGtm() // auto-imported by the module

  function triggerEvent() {
    gtm.trackEvent({
      event: 'event name',
      category: 'category',
      action: 'click',
      label: 'My custom component trigger',
      value: 5000,
      noninteraction: false,
    })
  }

  function triggerView() {
    gtm.trackView('Home', '/')
  }
</script>
```

--------------------------------

### Nuxt GTM Module Options TypeScript Definition

Source: https://github.com/zadigetvoltaire/nuxt-gtm/blob/main/README.md

Defines the TypeScript interface for Nuxt GTM module options. It includes settings for router synchronization, event tracking, script loading, and compatibility options, inheriting from the vue-gtm plugin.

```typescript
type ModuleOptions = {
  // SPECIFIC MODULES OPTIONS
  /**
   * Enable Nuxt Devtools integration
   *
   * @default true
   */
  devtools?: boolean
  /**
   * Synchronise GTM with NuxtRouter
   */
  enableRouterSync?: boolean

  // PLUGIN AND MODULE OPTIONS

  /**
   * Derive additional event data after navigation.
   */
  vueRouterAdditionalEventData?: (to: RouteLocationNormalized, from: RouteLocationNormalized) => Record<string, any> | Promise<Record<string, any>>;
  /**
   * Don't trigger events for specified router names.
   */
  ignoredViews?: string[] | ((to: RouteLocationNormalized, from: RouteLocationNormalized) => boolean);
  /**
   * Whether or not call `trackView` in `Vue.nextTick`.
   */
  trackOnNextTick?: boolean;
  /**
   * Your GTM single container ID, array of container ids or array of objects.
   *
   * @example
   *     'GTM-xxxxxx'
   *     // or
   *     ['GTM-xxxxxx', 'GTM-yyyyyy']
   *     // or
   *     [{
   *       id: 'GTM-xxxxxx',
   *       queryParams: {
   *         gtm_auth: 'abc123',
   *         gtm_preview: 'env-4',
   *         gtm_cookies_win: 'x'
   *       }
   *     }, {
   *       id: 'GTM-yyyyyy',
   *       queryParams: {
   *         gtm_auth: 'abc234',
   *         gtm_preview: 'env-5',
   *         gtm_cookies_win: 'x'
   *       }
   *     }]
   */
  id: string | string[] | GtmIdContainer[];
  /**
   * Add url query string when load gtm.js with GTM ID.
   */
  queryParams?: GtmQueryParams;
  /**
   * Script can be set to `defer` to speed up page load at the cost of less accurate results (in case visitor leaves before script is loaded, which is unlikely but possible).
   *
   * Defaults to false, so the script is loaded `async` by default.
   *
   * @default false
   */
  defer?: boolean;
  /**
   * Will add `async` and `defer` to the script tag to not block requests for old browsers that do not support `async`.
   *
   * @default false
   */
  compatibility?: boolean;
  /**
   * Will add `nonce` to the script tag.
   *
   * @see [Using Google Tag Manager with a Content Security Policy](https://developers.google.com/tag-manager/web/csp)
   */
  nonce?: string;
  /**
   * The URL of the script; useful for server-side GTM.
   *
   * @default https://www.googletagmanager.com/gtm.js
   */
  source?: string;
  /**
   * Plugin can be disabled by setting this to `false`.
   *
   * @example enabled: !!GDPR_Cookie
   * @default true
   */
  enabled?: boolean;
  /**
   * Whether or not to display console logs debugs.
   */
  debug?: boolean;
  /**
   * Whether or not to load the GTM Script.
   *
   * Helpful if you are including GTM manually, but need the dataLayer functionality in your components.
   */
  loadScript?: boolean;
  /**
   * The property of Track view event.
   *
   * @example trackViewEventProperty: 'track-view-event-demo'
   * @default content-view
   */
  trackViewEventProperty?: string;
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.