npm - @jwiedeman/gtm-kit-nuxt - Versions diffs - 1.0.1 - Mend

@jwiedeman/gtm-kit-nuxt 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,313 @@
+# @react-gtm-kit/nuxt
+[![CI](https://github.com/jwiedeman/react-gtm-kit/actions/workflows/ci.yml/badge.svg)](https://github.com/jwiedeman/react-gtm-kit/actions/workflows/ci.yml)
+[![Coverage](https://codecov.io/gh/jwiedeman/react-gtm-kit/graph/badge.svg?flag=nuxt)](https://codecov.io/gh/jwiedeman/react-gtm-kit)
+[![npm version](https://img.shields.io/npm/v/@react-gtm-kit/nuxt.svg)](https://www.npmjs.com/package/@react-gtm-kit/nuxt)
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@react-gtm-kit/nuxt)](https://bundlephobia.com/package/@react-gtm-kit/nuxt)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Nuxt 3](https://img.shields.io/badge/Nuxt-3.0+-00DC82.svg?logo=nuxt.js)](https://nuxt.com/)
+**Nuxt 3 module for Google Tag Manager. Auto page tracking. Zero config.**
+The Nuxt adapter for GTM Kit - native module with automatic page tracking and SSR support.
+---
+## Installation
+```bash
+npm install @react-gtm-kit/core @react-gtm-kit/nuxt
+```
+```bash
+yarn add @react-gtm-kit/core @react-gtm-kit/nuxt
+```
+```bash
+pnpm add @react-gtm-kit/core @react-gtm-kit/nuxt
+```
+---
+## Quick Start
+### Step 1: Create Plugin
+```ts
+// plugins/gtm.client.ts
+import { GtmPlugin } from '@react-gtm-kit/nuxt';
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(GtmPlugin, { containers: 'GTM-XXXXXX' });
+});
+```
+### Step 2: Push Events
+```vue
+<script setup>
+import { useGtm } from '@react-gtm-kit/vue';
+const { push } = useGtm();
+push({ event: 'page_view' });
+</script>
+```
+**That's it!** GTM is running with automatic page tracking.
+---
+## Features
+| Feature                | Description                         |
+| ---------------------- | ----------------------------------- |
+| **Native Nuxt Module** | Built specifically for Nuxt 3       |
+| **Auto Page Tracking** | Tracks route changes automatically  |
+| **SSR Support**        | Server-side rendering compatible    |
+| **Composables**        | Uses Vue composables under the hood |
+| **TypeScript**         | Full type definitions included      |
+| **Consent Mode v2**    | Built-in GDPR compliance            |
+---
+## Plugin Configuration
+```ts
+// plugins/gtm.client.ts
+import { GtmPlugin } from '@react-gtm-kit/nuxt';
+import { consentPresets } from '@react-gtm-kit/core';
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(GtmPlugin, {
+    containers: 'GTM-XXXXXX',
+    dataLayerName: 'dataLayer',
+    onBeforeInit: (client) => {
+      // Set consent defaults for EU
+      client.setConsentDefaults(consentPresets.eeaDefault, { region: ['EEA'] });
+    }
+  });
+});
+```
+---
+## Available Composables
+All composables from `@react-gtm-kit/vue` are available:
+### `useGtm()`
+```vue
+<script setup>
+import { useGtm } from '@react-gtm-kit/vue';
+const { push, updateConsent } = useGtm();
+</script>
+```
+### `useGtmPush()`
+```vue
+<script setup>
+import { useGtmPush } from '@react-gtm-kit/vue';
+const push = useGtmPush();
+push({ event: 'purchase', value: 99.99 });
+</script>
+```
+### `useGtmConsent()`
+```vue
+<script setup>
+import { useGtmConsent } from '@react-gtm-kit/vue';
+const { updateConsent } = useGtmConsent();
+</script>
+```
+---
+## Automatic Page Tracking
+The Nuxt module automatically tracks page views on route changes. No additional setup required.
+If you need custom page tracking:
+```vue
+<script setup>
+import { useGtm } from '@react-gtm-kit/vue';
+import { useRoute } from 'vue-router';
+import { watch } from 'vue';
+const route = useRoute();
+const { push } = useGtm();
+// Custom page tracking with additional data
+watch(
+  () => route.fullPath,
+  (path) => {
+    push({
+      event: 'page_view',
+      page_path: path,
+      page_title: document.title,
+      user_type: 'logged_in' // custom data
+    });
+  }
+);
+</script>
+```
+---
+## Consent Mode v2 (GDPR)
+```ts
+// plugins/gtm.client.ts
+import { GtmPlugin } from '@react-gtm-kit/nuxt';
+import { consentPresets } from '@react-gtm-kit/core';
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(GtmPlugin, {
+    containers: 'GTM-XXXXXX',
+    onBeforeInit: (client) => {
+      // Deny all by default for EU users
+      client.setConsentDefaults(consentPresets.eeaDefault, { region: ['EEA'] });
+    }
+  });
+});
+```
+```vue
+<!-- components/CookieBanner.vue -->
+<script setup>
+import { useGtmConsent } from '@react-gtm-kit/vue';
+import { consentPresets } from '@react-gtm-kit/core';
+const { updateConsent } = useGtmConsent();
+// Accept all tracking
+const acceptAll = () => updateConsent(consentPresets.allGranted);
+// Reject all tracking
+const rejectAll = () => updateConsent(consentPresets.eeaDefault);
+// Analytics only (mixed consent)
+const analyticsOnly = () => updateConsent(consentPresets.analyticsOnly);
+// Partial update - only change specific categories
+const customChoice = () =>
+  updateConsent({
+    analytics_storage: 'granted',
+    ad_storage: 'denied'
+  });
+</script>
+<template>
+  <div class="cookie-banner">
+    <button @click="acceptAll">Accept All</button>
+    <button @click="rejectAll">Reject All</button>
+    <button @click="analyticsOnly">Analytics Only</button>
+  </div>
+</template>
+```
+**Granular Updates** - Update individual categories without affecting others:
+```vue
+<script setup>
+const { updateConsent } = useGtmConsent();
+// User later opts into ads from settings page
+const enableAds = () =>
+  updateConsent({
+    ad_storage: 'granted',
+    ad_user_data: 'granted'
+  });
+// analytics_storage and ad_personalization remain unchanged
+</script>
+```
+---
+## SSR Considerations
+The plugin file is named `gtm.client.ts` (note the `.client` suffix) to ensure it only runs on the client side. GTM requires a browser environment.
+For noscript fallback (SEO), you can add this to your `app.vue`:
+```vue
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+  <!-- GTM noscript fallback -->
+  <noscript>
+    <iframe
+      src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
+      height="0"
+      width="0"
+      style="display:none;visibility:hidden"
+    ></iframe>
+  </noscript>
+</template>
+```
+---
+## Multiple Containers
+```ts
+// plugins/gtm.client.ts
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(GtmPlugin, {
+    containers: [{ id: 'GTM-MAIN' }, { id: 'GTM-ADS', queryParams: { gtm_auth: 'abc', gtm_preview: 'env-1' } }]
+  });
+});
+```
+---
+## Runtime Config
+You can use Nuxt runtime config for the GTM ID:
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  runtimeConfig: {
+    public: {
+      gtmId: process.env.GTM_ID || 'GTM-XXXXXX'
+    }
+  }
+});
+```
+```ts
+// plugins/gtm.client.ts
+export default defineNuxtPlugin((nuxtApp) => {
+  const config = useRuntimeConfig();
+  nuxtApp.vueApp.use(GtmPlugin, {
+    containers: config.public.gtmId
+  });
+});
+```
+---
+## Requirements
+- Nuxt 3.0+
+- Vue 3.3+
+- `@react-gtm-kit/core` (peer dependency)
+---
+## License
+MIT

package/dist/index.cjs ADDED Viewed

@@ -0,0 +1,56 @@
+'use strict';
+var vue = require('vue');
+var gtmKitVue = require('@jwiedeman/gtm-kit-vue');
+var gtmKit = require('@jwiedeman/gtm-kit');
+var C=(n,i)=>{var o;let{trackPageViews:a=!0,pageViewEventName:u="page_view",includeQueryParams:t=!0,...s}=i;n.use(gtmKitVue.GtmPlugin,s);let e=(o=n.config.globalProperties.$gtm)==null?void 0:o.client;if(!e)throw new Error("[gtm-kit/nuxt] Failed to initialize GTM client");return e},N=gtmKitVue.useGtm,k=gtmKitVue.useGtmPush,h=gtmKitVue.useGtmConsent,v=gtmKitVue.useGtmClient,y=n=>{let{route:i,eventName:a="page_view",includeQueryParams:u=!0,additionalData:t,trackInitialPageView:s=!0}=n,e=n.client;if(!e)try{e=gtmKitVue.useGtmClient();}catch(r){}if(!e){console.warn("[gtm-kit/nuxt] useTrackPageViews: No GTM client available. Make sure GtmPlugin is installed or pass a client option.");return}let o=vue.ref(""),l=()=>u?i.fullPath:i.path,p=()=>typeof t=="function"?t():t!=null?t:{},m=()=>{let r=l();r!==o.value&&(o.value=r,e.push({event:a,page_path:r,page_location:typeof window!="undefined"?window.location.href:void 0,page_title:typeof document!="undefined"?document.title:void 0,...p()}));};vue.onMounted(()=>{s&&m();}),vue.watch(()=>i.fullPath,()=>{m();});};
+Object.defineProperty(exports, 'GTM_INJECTION_KEY', {
+	enumerable: true,
+	get: function () { return gtmKitVue.GTM_INJECTION_KEY; }
+});
+Object.defineProperty(exports, 'GtmPlugin', {
+	enumerable: true,
+	get: function () { return gtmKitVue.GtmPlugin; }
+});
+Object.defineProperty(exports, 'useGtm', {
+	enumerable: true,
+	get: function () { return gtmKitVue.useGtm; }
+});
+Object.defineProperty(exports, 'useGtmClient', {
+	enumerable: true,
+	get: function () { return gtmKitVue.useGtmClient; }
+});
+Object.defineProperty(exports, 'useGtmConsent', {
+	enumerable: true,
+	get: function () { return gtmKitVue.useGtmConsent; }
+});
+Object.defineProperty(exports, 'useGtmPush', {
+	enumerable: true,
+	get: function () { return gtmKitVue.useGtmPush; }
+});
+Object.defineProperty(exports, 'useGtmReady', {
+	enumerable: true,
+	get: function () { return gtmKitVue.useGtmReady; }
+});
+Object.defineProperty(exports, 'consentPresets', {
+	enumerable: true,
+	get: function () { return gtmKit.consentPresets; }
+});
+Object.defineProperty(exports, 'pushEcommerce', {
+	enumerable: true,
+	get: function () { return gtmKit.pushEcommerce; }
+});
+Object.defineProperty(exports, 'pushEvent', {
+	enumerable: true,
+	get: function () { return gtmKit.pushEvent; }
+});
+exports.createNuxtGtmPlugin = C;
+exports.useNuxtGtm = N;
+exports.useNuxtGtmClient = v;
+exports.useNuxtGtmConsent = h;
+exports.useNuxtGtmPush = k;
+exports.useTrackPageViews = y;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/module.ts","../src/index.ts"],"names":["ref","watch","onMounted","GtmPlugin","useGtm","useGtmPush","useGtmConsent","useGtmClient","createNuxtGtmPlugin","app","options","_a","_trackPageViews","_pageViewEventName","_includeQueryParams","pluginOptions","client","useNuxtGtm","useNuxtGtmPush","useNuxtGtmConsent","useNuxtGtmClient","useTrackPageViews","route","eventName","includeQueryParams","additionalData","trackInitialPageView","e","lastTrackedPath","getPagePath","getAdditionalData","trackPageView","pagePath","useGtmReady","GTM_INJECTION_KEY","consentPresets","pushEvent","pushEcommerce"],"mappings":"AAAA,OAAS,OAAAA,EAAK,SAAAC,EAAO,aAAAC,MAA2B,MAEhD,OACE,aAAAC,EACA,UAAAC,EACA,cAAAC,EACA,iBAAAC,EACA,gBAAAC,MAGK,yBAmDA,IAAMC,EAAsB,CAACC,EAAUC,IAAuC,CA7DrF,IAAAC,EA8DE,GAAM,CAEJ,eAAgBC,EAAkB,GAClC,kBAAmBC,EAAqB,YACxC,mBAAoBC,EAAsB,GAC1C,GAAGC,CACL,EAAIL,EAQJD,EAAI,IAAIN,EAAWY,CAAa,EAGhC,IAAMC,GAAUL,EAAAF,EAAI,OAAO,iBAA2C,OAAtD,YAAAE,EAA4D,OAE5E,GAAI,CAACK,EACH,MAAM,IAAI,MAAM,gDAAgD,EAGlE,OAAOA,CACT,EAeaC,EAAab,EAMbc,EAAiBb,EAMjBc,EAAoBb,EAMpBc,EAAmBb,EAgEnBc,EAAqBX,GAAyC,CACzE,GAAM,CACJ,MAAAY,EACA,UAAAC,EAAY,YACZ,mBAAAC,EAAqB,GACrB,eAAAC,EACA,qBAAAC,EAAuB,EACzB,EAAIhB,EAGAM,EAAgCN,EAAQ,OAE5C,GAAI,CAACM,EACH,GAAI,CACFA,EAAST,EAAa,CACxB,OAAQoB,EAAA,CAER,CAGF,GAAI,CAACX,EAAQ,CACX,QAAQ,KACN,sHAEF,EACA,MACF,CAEA,IAAMY,EAAkB5B,EAAY,EAAE,EAEhC6B,EAAc,IACdL,EACKF,EAAM,SAERA,EAAM,KAGTQ,EAAoB,IACpB,OAAOL,GAAmB,WACrBA,EAAe,EAEjBA,GAAA,KAAAA,EAAkB,CAAC,EAGtBM,EAAgB,IAAY,CAChC,IAAMC,EAAWH,EAAY,EAGzBG,IAAaJ,EAAgB,QAIjCA,EAAgB,MAAQI,EAExBhB,EAAQ,KAAK,CACX,MAAOO,EACP,UAAWS,EACX,cAAe,OAAO,QAAW,YAAc,OAAO,SAAS,KAAO,OACtE,WAAY,OAAO,UAAa,YAAc,SAAS,MAAQ,OAC/D,GAAGF,EAAkB,CACvB,CAAC,EACH,EAGA5B,EAAU,IAAM,CACVwB,GACFK,EAAc,CAElB,CAAC,EAGD9B,EACE,IAAMqB,EAAM,SACZ,IAAM,CACJS,EAAc,CAChB,CACF,CACF,ECzPA,OACE,UAAA3B,EACA,cAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,eAAA0B,EACA,aAAA9B,EACA,qBAAA+B,MACK,yBAYP,OAAS,kBAAAC,EAAgB,aAAAC,EAAW,iBAAAC,MAAqB","sourcesContent":["import { ref, watch, onMounted, type App } from 'vue';\nimport { type GtmClient } from '@jwiedeman/gtm-kit';\nimport {\n GtmPlugin,\n useGtm,\n useGtmPush,\n useGtmConsent,\n useGtmClient,\n type GtmPluginOptions,\n type GtmContext\n} from '@jwiedeman/gtm-kit-vue';\n\n/**\n * Options for the Nuxt GTM module.\n * Extends the Vue plugin options with Nuxt-specific features.\n */\nexport interface NuxtGtmOptions extends GtmPluginOptions {\n /**\n * Whether to automatically track page views on route changes.\n * @default true\n */\n trackPageViews?: boolean;\n\n /**\n * Custom page view event name.\n * @default 'page_view'\n */\n pageViewEventName?: string;\n\n /**\n * Whether to include query parameters in page path.\n * @default true\n */\n includeQueryParams?: boolean;\n}\n\n/**\n * Extended context for Nuxt with additional helpers.\n */\nexport interface NuxtGtmContext extends GtmContext {\n /** Track a page view manually */\n trackPageView: (path?: string, additionalData?: Record<string, unknown>) => void;\n}\n\n/**\n * Creates a Nuxt plugin for GTM Kit.\n * Use this in your Nuxt plugins directory.\n *\n * @example\n * ```ts\n * // plugins/gtm.client.ts\n * import { createNuxtGtmPlugin } from '@jwiedeman/gtm-kit-nuxt';\n *\n * export default defineNuxtPlugin((nuxtApp) => {\n * createNuxtGtmPlugin(nuxtApp.vueApp, {\n * containers: 'GTM-XXXXXX',\n * trackPageViews: true\n * });\n * });\n * ```\n */\nexport const createNuxtGtmPlugin = (app: App, options: NuxtGtmOptions): GtmClient => {\n const {\n // These options are extracted for potential future auto-tracking features\n trackPageViews: _trackPageViews = true,\n pageViewEventName: _pageViewEventName = 'page_view',\n includeQueryParams: _includeQueryParams = true,\n ...pluginOptions\n } = options;\n\n // Silence unused variable warnings - these are reserved for future auto-tracking\n void _trackPageViews;\n void _pageViewEventName;\n void _includeQueryParams;\n\n // Install the Vue plugin\n app.use(GtmPlugin, pluginOptions);\n\n // Get the client from the Vue plugin\n const client = (app.config.globalProperties as { $gtm?: GtmContext }).$gtm?.client;\n\n if (!client) {\n throw new Error('[gtm-kit/nuxt] Failed to initialize GTM client');\n }\n\n return client;\n};\n\n/**\n * Composable for accessing the full GTM context in Nuxt.\n * This is an alias for useGtm() from @jwiedeman/gtm-kit-vue.\n *\n * @example\n * ```vue\n * <script setup>\n * const { push, client } = useNuxtGtm();\n *\n * push({ event: 'custom_event' });\n * </script>\n * ```\n */\nexport const useNuxtGtm = useGtm;\n\n/**\n * Composable for pushing events in Nuxt.\n * This is an alias for useGtmPush() from @jwiedeman/gtm-kit-vue.\n */\nexport const useNuxtGtmPush = useGtmPush;\n\n/**\n * Composable for consent management in Nuxt.\n * This is an alias for useGtmConsent() from @jwiedeman/gtm-kit-vue.\n */\nexport const useNuxtGtmConsent = useGtmConsent;\n\n/**\n * Composable for accessing the raw GTM client in Nuxt.\n * This is an alias for useGtmClient() from @jwiedeman/gtm-kit-vue.\n */\nexport const useNuxtGtmClient = useGtmClient;\n\n/**\n * Options for the useTrackPageViews composable.\n */\nexport interface TrackPageViewsOptions {\n /**\n * The GTM client instance to use.\n * If not provided, will use the client from the Vue plugin context.\n */\n client?: GtmClient;\n\n /**\n * Reactive route object to watch for changes.\n * Use useRoute() from Nuxt.\n */\n route: {\n fullPath: string;\n path: string;\n query?: Record<string, unknown>;\n };\n\n /**\n * Custom page view event name.\n * @default 'page_view'\n */\n eventName?: string;\n\n /**\n * Whether to include query parameters in page path.\n * @default true\n */\n includeQueryParams?: boolean;\n\n /**\n * Additional data to include with each page view event.\n */\n additionalData?: Record<string, unknown> | (() => Record<string, unknown>);\n\n /**\n * Whether to track the initial page view on mount.\n * @default true\n */\n trackInitialPageView?: boolean;\n}\n\n/**\n * Composable for automatic page view tracking with Nuxt Router.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useTrackPageViews } from '@jwiedeman/gtm-kit-nuxt';\n *\n * const route = useRoute();\n *\n * useTrackPageViews({\n * route,\n * eventName: 'page_view',\n * additionalData: { site_section: 'main' }\n * });\n * </script>\n * ```\n */\nexport const useTrackPageViews = (options: TrackPageViewsOptions): void => {\n const {\n route,\n eventName = 'page_view',\n includeQueryParams = true,\n additionalData,\n trackInitialPageView = true\n } = options;\n\n // Try to get client from options or from context\n let client: GtmClient | undefined = options.client;\n\n if (!client) {\n try {\n client = useGtmClient();\n } catch {\n // Client not available from context, will throw later if needed\n }\n }\n\n if (!client) {\n console.warn(\n '[gtm-kit/nuxt] useTrackPageViews: No GTM client available. ' +\n 'Make sure GtmPlugin is installed or pass a client option.'\n );\n return;\n }\n\n const lastTrackedPath = ref<string>('');\n\n const getPagePath = (): string => {\n if (includeQueryParams) {\n return route.fullPath;\n }\n return route.path;\n };\n\n const getAdditionalData = (): Record<string, unknown> => {\n if (typeof additionalData === 'function') {\n return additionalData();\n }\n return additionalData ?? {};\n };\n\n const trackPageView = (): void => {\n const pagePath = getPagePath();\n\n // Skip if this path was already tracked\n if (pagePath === lastTrackedPath.value) {\n return;\n }\n\n lastTrackedPath.value = pagePath;\n\n client!.push({\n event: eventName,\n page_path: pagePath,\n page_location: typeof window !== 'undefined' ? window.location.href : undefined,\n page_title: typeof document !== 'undefined' ? document.title : undefined,\n ...getAdditionalData()\n });\n };\n\n // Track initial page view on mount if enabled\n onMounted(() => {\n if (trackInitialPageView) {\n trackPageView();\n }\n });\n\n // Watch for route changes\n watch(\n () => route.fullPath,\n () => {\n trackPageView();\n }\n );\n};\n\n// Note: Type augmentation for NuxtApp.$gtm should be done in the user's project\n// by adding a type declaration file with:\n//\n// declare module '#app' {\n// interface NuxtApp {\n// $gtm: import('@jwiedeman/gtm-kit-vue').GtmContext;\n// }\n// }\n","export type { NuxtGtmOptions, NuxtGtmContext } from './module';\nexport {\n createNuxtGtmPlugin,\n useNuxtGtm,\n useNuxtGtmPush,\n useNuxtGtmConsent,\n useNuxtGtmClient,\n useTrackPageViews\n} from './module';\n\n// Re-export Vue composables for convenience\nexport {\n useGtm,\n useGtmPush,\n useGtmConsent,\n useGtmClient,\n useGtmReady,\n GtmPlugin,\n GTM_INJECTION_KEY\n} from '@jwiedeman/gtm-kit-vue';\n\n// Re-export core types for convenience\nexport type {\n CreateGtmClientOptions,\n GtmClient,\n ConsentState,\n ConsentRegionOptions,\n DataLayerValue,\n ScriptLoadState\n} from '@jwiedeman/gtm-kit';\n\nexport { consentPresets, pushEvent, pushEcommerce } from '@jwiedeman/gtm-kit';\n"]}

package/dist/index.d.cts ADDED Viewed

@@ -0,0 +1,142 @@
+import * as _jwiedeman_gtm_kit_vue from '@jwiedeman/gtm-kit-vue';
+import { GtmPluginOptions, GtmContext } from '@jwiedeman/gtm-kit-vue';
+export { GTM_INJECTION_KEY, GtmPlugin, useGtm, useGtmClient, useGtmConsent, useGtmPush, useGtmReady } from '@jwiedeman/gtm-kit-vue';
+import * as _jwiedeman_gtm_kit from '@jwiedeman/gtm-kit';
+import { GtmClient } from '@jwiedeman/gtm-kit';
+export { ConsentRegionOptions, ConsentState, CreateGtmClientOptions, DataLayerValue, GtmClient, ScriptLoadState, consentPresets, pushEcommerce, pushEvent } from '@jwiedeman/gtm-kit';
+import { App } from 'vue';
+/**
+ * Options for the Nuxt GTM module.
+ * Extends the Vue plugin options with Nuxt-specific features.
+ */
+interface NuxtGtmOptions extends GtmPluginOptions {
+    /**
+     * Whether to automatically track page views on route changes.
+     * @default true
+     */
+    trackPageViews?: boolean;
+    /**
+     * Custom page view event name.
+     * @default 'page_view'
+     */
+    pageViewEventName?: string;
+    /**
+     * Whether to include query parameters in page path.
+     * @default true
+     */
+    includeQueryParams?: boolean;
+}
+/**
+ * Extended context for Nuxt with additional helpers.
+ */
+interface NuxtGtmContext extends GtmContext {
+    /** Track a page view manually */
+    trackPageView: (path?: string, additionalData?: Record<string, unknown>) => void;
+}
+/**
+ * Creates a Nuxt plugin for GTM Kit.
+ * Use this in your Nuxt plugins directory.
+ *
+ * @example
+ * ```ts
+ * // plugins/gtm.client.ts
+ * import { createNuxtGtmPlugin } from '@jwiedeman/gtm-kit-nuxt';
+ *
+ * export default defineNuxtPlugin((nuxtApp) => {
+ *   createNuxtGtmPlugin(nuxtApp.vueApp, {
+ *     containers: 'GTM-XXXXXX',
+ *     trackPageViews: true
+ *   });
+ * });
+ * ```
+ */
+declare const createNuxtGtmPlugin: (app: App, options: NuxtGtmOptions) => GtmClient;
+/**
+ * Composable for accessing the full GTM context in Nuxt.
+ * This is an alias for useGtm() from @jwiedeman/gtm-kit-vue.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * const { push, client } = useNuxtGtm();
+ *
+ * push({ event: 'custom_event' });
+ * </script>
+ * ```
+ */
+declare const useNuxtGtm: () => GtmContext;
+/**
+ * Composable for pushing events in Nuxt.
+ * This is an alias for useGtmPush() from @jwiedeman/gtm-kit-vue.
+ */
+declare const useNuxtGtmPush: () => (value: _jwiedeman_gtm_kit.DataLayerValue) => void;
+/**
+ * Composable for consent management in Nuxt.
+ * This is an alias for useGtmConsent() from @jwiedeman/gtm-kit-vue.
+ */
+declare const useNuxtGtmConsent: () => _jwiedeman_gtm_kit_vue.GtmConsentApi;
+/**
+ * Composable for accessing the raw GTM client in Nuxt.
+ * This is an alias for useGtmClient() from @jwiedeman/gtm-kit-vue.
+ */
+declare const useNuxtGtmClient: () => GtmClient;
+/**
+ * Options for the useTrackPageViews composable.
+ */
+interface TrackPageViewsOptions {
+    /**
+     * The GTM client instance to use.
+     * If not provided, will use the client from the Vue plugin context.
+     */
+    client?: GtmClient;
+    /**
+     * Reactive route object to watch for changes.
+     * Use useRoute() from Nuxt.
+     */
+    route: {
+        fullPath: string;
+        path: string;
+        query?: Record<string, unknown>;
+    };
+    /**
+     * Custom page view event name.
+     * @default 'page_view'
+     */
+    eventName?: string;
+    /**
+     * Whether to include query parameters in page path.
+     * @default true
+     */
+    includeQueryParams?: boolean;
+    /**
+     * Additional data to include with each page view event.
+     */
+    additionalData?: Record<string, unknown> | (() => Record<string, unknown>);
+    /**
+     * Whether to track the initial page view on mount.
+     * @default true
+     */
+    trackInitialPageView?: boolean;
+}
+/**
+ * Composable for automatic page view tracking with Nuxt Router.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useTrackPageViews } from '@jwiedeman/gtm-kit-nuxt';
+ *
+ * const route = useRoute();
+ *
+ * useTrackPageViews({
+ *   route,
+ *   eventName: 'page_view',
+ *   additionalData: { site_section: 'main' }
+ * });
+ * </script>
+ * ```
+ */
+declare const useTrackPageViews: (options: TrackPageViewsOptions) => void;
+export { NuxtGtmContext, NuxtGtmOptions, createNuxtGtmPlugin, useNuxtGtm, useNuxtGtmClient, useNuxtGtmConsent, useNuxtGtmPush, useTrackPageViews };

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,142 @@
+import * as _jwiedeman_gtm_kit_vue from '@jwiedeman/gtm-kit-vue';
+import { GtmPluginOptions, GtmContext } from '@jwiedeman/gtm-kit-vue';
+export { GTM_INJECTION_KEY, GtmPlugin, useGtm, useGtmClient, useGtmConsent, useGtmPush, useGtmReady } from '@jwiedeman/gtm-kit-vue';
+import * as _jwiedeman_gtm_kit from '@jwiedeman/gtm-kit';
+import { GtmClient } from '@jwiedeman/gtm-kit';
+export { ConsentRegionOptions, ConsentState, CreateGtmClientOptions, DataLayerValue, GtmClient, ScriptLoadState, consentPresets, pushEcommerce, pushEvent } from '@jwiedeman/gtm-kit';
+import { App } from 'vue';
+/**
+ * Options for the Nuxt GTM module.
+ * Extends the Vue plugin options with Nuxt-specific features.
+ */
+interface NuxtGtmOptions extends GtmPluginOptions {
+    /**
+     * Whether to automatically track page views on route changes.
+     * @default true
+     */
+    trackPageViews?: boolean;
+    /**
+     * Custom page view event name.
+     * @default 'page_view'
+     */
+    pageViewEventName?: string;
+    /**
+     * Whether to include query parameters in page path.
+     * @default true
+     */
+    includeQueryParams?: boolean;
+}
+/**
+ * Extended context for Nuxt with additional helpers.
+ */
+interface NuxtGtmContext extends GtmContext {
+    /** Track a page view manually */
+    trackPageView: (path?: string, additionalData?: Record<string, unknown>) => void;
+}
+/**
+ * Creates a Nuxt plugin for GTM Kit.
+ * Use this in your Nuxt plugins directory.
+ *
+ * @example
+ * ```ts
+ * // plugins/gtm.client.ts
+ * import { createNuxtGtmPlugin } from '@jwiedeman/gtm-kit-nuxt';
+ *
+ * export default defineNuxtPlugin((nuxtApp) => {
+ *   createNuxtGtmPlugin(nuxtApp.vueApp, {
+ *     containers: 'GTM-XXXXXX',
+ *     trackPageViews: true
+ *   });
+ * });
+ * ```
+ */
+declare const createNuxtGtmPlugin: (app: App, options: NuxtGtmOptions) => GtmClient;
+/**
+ * Composable for accessing the full GTM context in Nuxt.
+ * This is an alias for useGtm() from @jwiedeman/gtm-kit-vue.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * const { push, client } = useNuxtGtm();
+ *
+ * push({ event: 'custom_event' });
+ * </script>
+ * ```
+ */
+declare const useNuxtGtm: () => GtmContext;
+/**
+ * Composable for pushing events in Nuxt.
+ * This is an alias for useGtmPush() from @jwiedeman/gtm-kit-vue.
+ */
+declare const useNuxtGtmPush: () => (value: _jwiedeman_gtm_kit.DataLayerValue) => void;
+/**
+ * Composable for consent management in Nuxt.
+ * This is an alias for useGtmConsent() from @jwiedeman/gtm-kit-vue.
+ */
+declare const useNuxtGtmConsent: () => _jwiedeman_gtm_kit_vue.GtmConsentApi;
+/**
+ * Composable for accessing the raw GTM client in Nuxt.
+ * This is an alias for useGtmClient() from @jwiedeman/gtm-kit-vue.
+ */
+declare const useNuxtGtmClient: () => GtmClient;
+/**
+ * Options for the useTrackPageViews composable.
+ */
+interface TrackPageViewsOptions {
+    /**
+     * The GTM client instance to use.
+     * If not provided, will use the client from the Vue plugin context.
+     */
+    client?: GtmClient;
+    /**
+     * Reactive route object to watch for changes.
+     * Use useRoute() from Nuxt.
+     */
+    route: {
+        fullPath: string;
+        path: string;
+        query?: Record<string, unknown>;
+    };
+    /**
+     * Custom page view event name.
+     * @default 'page_view'
+     */
+    eventName?: string;
+    /**
+     * Whether to include query parameters in page path.
+     * @default true
+     */
+    includeQueryParams?: boolean;
+    /**
+     * Additional data to include with each page view event.
+     */
+    additionalData?: Record<string, unknown> | (() => Record<string, unknown>);
+    /**
+     * Whether to track the initial page view on mount.
+     * @default true
+     */
+    trackInitialPageView?: boolean;
+}
+/**
+ * Composable for automatic page view tracking with Nuxt Router.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useTrackPageViews } from '@jwiedeman/gtm-kit-nuxt';
+ *
+ * const route = useRoute();
+ *
+ * useTrackPageViews({
+ *   route,
+ *   eventName: 'page_view',
+ *   additionalData: { site_section: 'main' }
+ * });
+ * </script>
+ * ```
+ */
+declare const useTrackPageViews: (options: TrackPageViewsOptions) => void;
+export { NuxtGtmContext, NuxtGtmOptions, createNuxtGtmPlugin, useNuxtGtm, useNuxtGtmClient, useNuxtGtmConsent, useNuxtGtmPush, useTrackPageViews };

package/dist/index.js ADDED Viewed

@@ -0,0 +1,10 @@
+import { ref, onMounted, watch } from 'vue';
+import { GtmPlugin, useGtm, useGtmPush, useGtmConsent, useGtmClient } from '@jwiedeman/gtm-kit-vue';
+export { GTM_INJECTION_KEY, GtmPlugin, useGtm, useGtmClient, useGtmConsent, useGtmPush, useGtmReady } from '@jwiedeman/gtm-kit-vue';
+export { consentPresets, pushEcommerce, pushEvent } from '@jwiedeman/gtm-kit';
+var C=(n,i)=>{var o;let{trackPageViews:a=!0,pageViewEventName:u="page_view",includeQueryParams:t=!0,...s}=i;n.use(GtmPlugin,s);let e=(o=n.config.globalProperties.$gtm)==null?void 0:o.client;if(!e)throw new Error("[gtm-kit/nuxt] Failed to initialize GTM client");return e},N=useGtm,k=useGtmPush,h=useGtmConsent,v=useGtmClient,y=n=>{let{route:i,eventName:a="page_view",includeQueryParams:u=!0,additionalData:t,trackInitialPageView:s=!0}=n,e=n.client;if(!e)try{e=useGtmClient();}catch(r){}if(!e){console.warn("[gtm-kit/nuxt] useTrackPageViews: No GTM client available. Make sure GtmPlugin is installed or pass a client option.");return}let o=ref(""),l=()=>u?i.fullPath:i.path,p=()=>typeof t=="function"?t():t!=null?t:{},m=()=>{let r=l();r!==o.value&&(o.value=r,e.push({event:a,page_path:r,page_location:typeof window!="undefined"?window.location.href:void 0,page_title:typeof document!="undefined"?document.title:void 0,...p()}));};onMounted(()=>{s&&m();}),watch(()=>i.fullPath,()=>{m();});};
+export { C as createNuxtGtmPlugin, N as useNuxtGtm, v as useNuxtGtmClient, h as useNuxtGtmConsent, k as useNuxtGtmPush, y as useTrackPageViews };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,57 @@
+{
+  "name": "@jwiedeman/gtm-kit-nuxt",
+  "version": "1.0.1",
+  "description": "Nuxt 3 module for GTM Kit - Google Tag Manager integration with auto page tracking.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jwiedeman/GTM-Kit.git",
+    "directory": "packages/nuxt"
+  },
+  "author": "jwiedeman",
+  "keywords": [
+    "gtm",
+    "google-tag-manager",
+    "nuxt",
+    "nuxt3",
+    "module"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist",
+    "lint": "eslint --max-warnings=0 \"src/**/*.{ts,tsx}\"",
+    "test": "jest --config ./jest.config.cjs --runInBand",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@jwiedeman/gtm-kit": "^1.0.1",
+    "@jwiedeman/gtm-kit-vue": "^1.0.1"
+  },
+  "peerDependencies": {
+    "nuxt": "^3.0.0",
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.4.6",
+    "nuxt": "^3.11.0",
+    "vue": "^3.4.21",
+    "tslib": "^2.6.2"
+  }
+}