├── client
    ├── .nuxtrc
    ├── package.json
    ├── app.vue
    ├── components
    │   ├── ModuleAuthorNote.vue
    │   └── OptionTable.vue
    ├── nuxt.config.ts
    └── pages
    │   └── index.vue
├── .eslintignore
├── .npmrc
├── .nuxtrc
├── tsconfig.json
├── assets
    ├── nuxt-gtm.png
    ├── icon-logo.png
    ├── icon-logo-dark.png
    ├── icon-logo.svg
    ├── icon-logo-dark.svg
    ├── nuxt-gtm.svg
    └── zadigetvoltaire-logo.svg
├── Makefile
├── playground
    ├── package.json
    ├── nuxt.config.ts
    └── app.vue
├── test
    ├── fixtures
    │   └── basic
    │   │   ├── package.json
    │   │   ├── nuxt.config.ts
    │   │   └── app.vue
    └── basic.test.ts
├── .editorconfig
├── .vscode
    └── settings.json
├── src
    ├── runtime
    │   └── plugin.ts
    ├── module.ts
    └── devtools.ts
├── .eslintrc.cjs
├── .gitignore
├── .github
    └── workflows
    │   ├── test-lint.yml
    │   ├── test-build.yml
    │   └── lib-publish.yml
├── LICENCE
├── package.json
├── CHANGELOG.md
└── README.md


/client/.nuxtrc:
--------------------------------------------------------------------------------
1 | imports.autoImport=true
2 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | *.svg


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 | 


--------------------------------------------------------------------------------
/.nuxtrc:
--------------------------------------------------------------------------------
1 | imports.autoImport=false
2 | typescript.includeWorkspace=true
3 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./client/.nuxt/tsconfig.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/assets/nuxt-gtm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zadigetvoltaire/nuxt-gtm/HEAD/assets/nuxt-gtm.png


--------------------------------------------------------------------------------
/assets/icon-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zadigetvoltaire/nuxt-gtm/HEAD/assets/icon-logo.png


--------------------------------------------------------------------------------
/client/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "private": true,
3 |   "name": "@zadigetvoltaire/nuxt-gtm-client"
4 | }
5 | 


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
1 | start:
2 | 	pnpm install
3 | 	pnpm dev:prepare
4 | 	pnpm dev
5 | 
6 | release:
7 | 	pnpm release


--------------------------------------------------------------------------------
/client/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <NuxtLayout>
3 |     <NuxtPage />
4 |   </NuxtLayout>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/assets/icon-logo-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zadigetvoltaire/nuxt-gtm/HEAD/assets/icon-logo-dark.png


--------------------------------------------------------------------------------
/playground/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "private": true,
3 |   "name": "@zadigetvoltaire/nuxt-gtm-playground"
4 | }
5 | 


--------------------------------------------------------------------------------
/test/fixtures/basic/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "private": true,
3 |   "name": "basic",
4 |   "type": "module"
5 | }
6 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_size = 2
 5 | indent_style = space
 6 | end_of_line = lf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = true
 9 | insert_final_newline = true
10 | 
11 | [*.md]
12 | trim_trailing_whitespace = false
13 | 


--------------------------------------------------------------------------------
/client/components/ModuleAuthorNote.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <NTip n="teal" class="py-4">
3 |     Documentation available in the <NLink href="https://github.com/zadigetvoltaire/nuxt-gtm#readme" target="_blank">
4 |       README.me
5 |     </NLink> on our github project.
6 |   </NTip>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/test/fixtures/basic/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import nuxtGtm from '../../../src/module'
 2 | 
 3 | export default defineNuxtConfig({
 4 |   modules: [
 5 |     // @ts-ignore
 6 |     nuxtGtm
 7 |   ],
 8 |   gtm: {
 9 |     devtools: true,
10 |     id: 'GTM-XXXXXX',
11 |     enableRouterSync: true
12 |   }
13 | })
14 | 


--------------------------------------------------------------------------------
/client/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import { resolve } from 'node:path'
 2 | 
 3 | export default defineNuxtConfig({
 4 |   ssr: false,
 5 |   modules: [
 6 |     '@nuxt/devtools-ui-kit'
 7 |   ],
 8 |   nitro: {
 9 |     output: {
10 |       publicDir: resolve(__dirname, '../dist/client')
11 |     }
12 |   },
13 |   app: {
14 |     baseURL: '/__nuxt-gtm'
15 |   }
16 | })
17 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "editor.formatOnSave": true,
 3 |   "editor.codeActionsOnSave": {
 4 |     "source.fixAll.eslint": true,
 5 |     "source.fixAll.stylelint": true
 6 |   },
 7 |   // ESLINT
 8 |   "eslint.enable": true,
 9 |   "eslint.format.enable": true,
10 |   "eslint.validate": ["javascript", "typescript", "html", "vue"],
11 |   // CSS
12 |   "css.validate": false
13 | }
14 | 


--------------------------------------------------------------------------------
/test/basic.test.ts:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath } from 'node:url'
 2 | import { describe, it, expect } from 'vitest'
 3 | import { setup, $fetch } from '@nuxt/test-utils'
 4 | 
 5 | describe('ssr', async () => {
 6 |   await setup({
 7 |     rootDir: fileURLToPath(new URL('fixtures/basic', import.meta.url))
 8 |   })
 9 | 
10 |   it('renders the index page', async () => {
11 |     // Get response to a server-rendered page with `$fetch`.
12 |     const html = await $fetch('/')
13 | 
14 |     expect(html).toContain('<div>basic</div>')
15 |   })
16 | })
17 | 


--------------------------------------------------------------------------------
/assets/icon-logo.svg:
--------------------------------------------------------------------------------
 1 | <svg
 2 |   width="512"
 3 |   height="512"
 4 |   viewBox="0 0 512 512"
 5 |   fill="none"
 6 |   xmlns="http://www.w3.org/2000/svg"
 7 | >
 8 |   <rect width="512" height="512" fill="white" />
 9 |   <path
10 |     d="M222.45 298.917L268.113 432.435H343.464L408.02 244.607H348.559L306.284 368.21L263.458 244.607L222.45 298.917Z"
11 |     fill="black"
12 |   />
13 |   <path
14 |     d="M94 346.59V413.101H256.105H262L242.525 354.219H163.871L322.891 143.615V81.1249H112.893V135.904H255.196L94 346.59Z"
15 |     fill="black"
16 |   />
17 | </svg>
18 | 


--------------------------------------------------------------------------------
/assets/icon-logo-dark.svg:
--------------------------------------------------------------------------------
 1 | <svg
 2 |   width="512"
 3 |   height="512"
 4 |   viewBox="0 0 512 512"
 5 |   fill="none"
 6 |   xmlns="http://www.w3.org/2000/svg"
 7 | >
 8 |   <rect width="512" height="512" fill="black" />
 9 |   <path
10 |     d="M227.45 298.792L273.113 432.31H348.464L413.02 244.482H353.559L311.284 368.085L268.458 244.482L227.45 298.792Z"
11 |     fill="white"
12 |   />
13 |   <path
14 |     d="M99 346.466V412.977H261.105H267L247.525 354.094H168.871L327.891 143.49V81H117.893V135.779H260.196L99 346.466Z"
15 |     fill="white"
16 |   />
17 | </svg>
18 | 


--------------------------------------------------------------------------------
/src/runtime/plugin.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | import { defineNuxtPlugin, useRouter } from 'nuxt/app'
 3 | import { createGtm, type VueGtmUseOptions } from '@gtm-support/vue-gtm'
 4 | // @ts-ignore
 5 | 
 6 | export default defineNuxtPlugin((nuxt) => {
 7 |   if (process.client) {
 8 |     const options = nuxt.$config.public.gtm
 9 | 
10 |     const router = useRouter()
11 | 
12 |     const pluginOptions: VueGtmUseOptions = {
13 |       ...options,
14 |       vueRouter: options.enableRouterSync && router ? router as VueGtmUseOptions['vueRouter'] : undefined
15 |     }
16 | 
17 |     nuxt.vueApp.use(createGtm(pluginOptions))
18 |   }
19 | })
20 | 


--------------------------------------------------------------------------------
/playground/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | export default defineNuxtConfig({
 2 |   modules: [
 3 |     '../src/module',
 4 |     '@nuxt/devtools'
 5 |   ],
 6 |   gtm: {
 7 |     id: 'GTM-XXXXXX',
 8 |     enableRouterSync: true,
 9 |     queryParams: {
10 |       gtm_auth: 'init',
11 |       gtm_cookies_win: 'init',
12 |       gtm_preview: 'init'
13 |     }
14 |   },
15 |   runtimeConfig: {
16 |     public: {
17 |       gtm: {
18 |         id: 'GTM-YYYYYY',
19 |         queryParams: {
20 |           gtm_auth: 'test',
21 |           gtm_cookies_win: 'test',
22 |           gtm_preview: 'test'
23 |         }
24 |       }
25 |     }
26 |   }
27 | })
28 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   extends: [
 4 |     'plugin:sonarjs/recommended',
 5 |     'plugin:unicorn/recommended',
 6 |     '@nuxtjs/eslint-config-typescript'
 7 |   ],
 8 |   rules: {
 9 |     'no-console': [
10 |       process.env.NODE_ENV === 'production' ? 'error' : 'warn',
11 |       { allow: ['error', 'warn'] }
12 |     ],
13 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
14 |     // UNICORN
15 |     'unicorn/prefer-module': 'off',
16 |     'unicorn/no-array-for-each': 'off',
17 |     'unicorn/prevent-abbreviations': [
18 |       'error',
19 |       {
20 |         allowList: {
21 |           setupDevToolsUI: true
22 |         }
23 |       }
24 |     ]
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/test/fixtures/basic/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     Nuxt GTM playground!
 4 | 
 5 |     <code><pre>{{ $gtm.options }}</pre></code>
 6 | 
 7 |     <button data-test="track-event" @click="triggerEvent">
 8 |       trackEvent
 9 |     </button>
10 | 
11 |     <button data-test="track-view" @click="triggerView">
12 |       triggerView
13 |     </button>
14 |   </div>
15 | </template>
16 | 
17 | <script lang="ts" setup>
18 | import { useGtm } from '@gtm-support/vue-gtm'
19 | 
20 | const gtm = useGtm()
21 | 
22 | function triggerEvent () {
23 |   return gtm?.trackEvent({
24 |     event: 'EventTest',
25 |     label: 'EventLabel'
26 |   })
27 | }
28 | 
29 | function triggerView () {
30 |   gtm?.trackView('Home', '/')
31 | }
32 | </script>
33 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Dependencies
 2 | node_modules
 3 | 
 4 | # Logs
 5 | *.log*
 6 | 
 7 | # Temp directories
 8 | .temp
 9 | .tmp
10 | .cache
11 | 
12 | # Yarn
13 | **/.yarn/cache
14 | **/.yarn/*state*
15 | 
16 | # Generated dirs
17 | dist
18 | 
19 | # Nuxt
20 | .nuxt
21 | .output
22 | .vercel_build_output
23 | .build-*
24 | .env
25 | .netlify
26 | 
27 | # Env
28 | .env
29 | 
30 | # Testing
31 | reports
32 | coverage
33 | *.lcov
34 | .nyc_output
35 | 
36 | # VSCode
37 | .vscode/*
38 | !.vscode/settings.json
39 | !.vscode/tasks.json
40 | !.vscode/launch.json
41 | !.vscode/extensions.json
42 | !.vscode/*.code-snippets
43 | 
44 | # Intellij idea
45 | *.iml
46 | .idea
47 | 
48 | # OSX
49 | .DS_Store
50 | .AppleDouble
51 | .LSOverride
52 | .AppleDB
53 | .AppleDesktop
54 | Network Trash Folder
55 | Temporary Items
56 | .apdisk
57 | 


--------------------------------------------------------------------------------
/.github/workflows/test-lint.yml:
--------------------------------------------------------------------------------
 1 | name: Test Lint
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 |     paths:
 8 |       - ".github/workflows/test-lint.yml"
 9 |   pull_request:
10 |     branches:
11 |       - main
12 | 
13 | jobs:
14 |   test-lint:
15 |     runs-on: ubuntu-latest
16 | 
17 |     steps:
18 |       - uses: actions/checkout@v3
19 | 
20 |       - uses: pnpm/action-setup@v2
21 |         with:
22 |           version: 7
23 | 
24 |       - name: Use Node.js
25 |         uses: actions/setup-node@v3
26 |         with:
27 |           node-version: "18"
28 |           cache: "pnpm"
29 | 
30 |       - name: Install modules
31 |         run: pnpm install --no-frozen-lockfile
32 | 
33 |       - name: Prepare project
34 |         run: pnpm dev:prepare
35 | 
36 |       - name: Run linter
37 |         run: pnpm lint
38 | 


--------------------------------------------------------------------------------
/.github/workflows/test-build.yml:
--------------------------------------------------------------------------------
 1 | name: Test Build
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 |     paths:
 8 |       - ".github/workflows/test-build.yml"
 9 |   pull_request:
10 |     branches:
11 |       - main
12 | 
13 | jobs:
14 |   test-build:
15 |     runs-on: ubuntu-latest
16 | 
17 |     steps:
18 |       - uses: actions/checkout@v3
19 | 
20 |       - uses: pnpm/action-setup@v2
21 |         with:
22 |           version: 7
23 | 
24 |       - name: Use Node.js
25 |         uses: actions/setup-node@v3
26 |         with:
27 |           node-version: "18"
28 |           cache: "pnpm"
29 | 
30 |       - name: Install modules
31 |         run: pnpm install --no-frozen-lockfile
32 | 
33 |       - name: Prepare project
34 |         run: pnpm dev:prepare
35 | 
36 |       - name: Build module
37 |         run: pnpm prepack
38 | 


--------------------------------------------------------------------------------
/LICENCE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Zadig&Voltaire
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/.github/workflows/lib-publish.yml:
--------------------------------------------------------------------------------
 1 | name: Lib Publish To Npm
 2 | 
 3 | on:
 4 |   release:
 5 |     types: [created]
 6 |   # push:
 7 |   #   branches:
 8 |   #     - main
 9 |   #   paths:
10 |   #     - ".github/workflows/lib-publish.yml"
11 | 
12 | jobs:
13 |   lib-publish:
14 |     runs-on: ubuntu-latest
15 | 
16 |     steps:
17 |       - uses: actions/checkout@v3
18 | 
19 |       - uses: pnpm/action-setup@v2
20 |         with:
21 |           version: 7
22 | 
23 |       - name: Use Node.js
24 |         uses: actions/setup-node@v3
25 |         with:
26 |           cache: "pnpm"
27 |           node-version: "18"
28 |           registry-url: "https://registry.npmjs.org"
29 | 
30 |       - name: Install dependencies
31 |         run: pnpm install --no-frozen-lockfile
32 | 
33 |       - name: Prepare env
34 |         run: pnpm dev:prepare
35 | 
36 |       - name: Run linter
37 |         run: pnpm lint
38 | 
39 |       - name: Build Lib
40 |         run: pnpm prepack
41 | 
42 |       - name: Publish package to npm registry
43 |         run: pnpm publish --access public --no-git-checks
44 |         env:
45 |           NODE_AUTH_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
46 | 


--------------------------------------------------------------------------------
/playground/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>
 4 |       Nuxt GTM playground!
 5 |     </h1>
 6 | 
 7 |     <h2>
 8 |       Options
 9 |     </h2>
10 | 
11 |     <code><pre>{{ gtmOptions }}</pre></code>
12 | 
13 |     <h2>
14 |       Actions
15 |     </h2>
16 | 
17 |     <button @click="triggerEvent">
18 |       trackEvent
19 |     </button>
20 | 
21 |     <button @click="triggerView">
22 |       triggerView
23 |     </button>
24 | 
25 |     <h2>
26 |       Datalayer
27 |     </h2>
28 | 
29 |     {{ dataLayerPayload }}
30 |   </div>
31 | </template>
32 | 
33 | <script lang="ts" setup>
34 | import { type DataLayerObject, useGtm } from '@gtm-support/vue-gtm'
35 | import { ref, onMounted, computed } from 'vue'
36 | 
37 | const gtm = useGtm()
38 | 
39 | const dataLayerPayload = ref<DataLayerObject[] | boolean>()
40 | 
41 | onMounted(() => {
42 |   dataLayerPayload.value = window?.dataLayer
43 | })
44 | 
45 | function triggerEvent () {
46 |   gtm?.trackEvent({
47 |     event: 'EventTest',
48 |     label: 'EventLabel'
49 |   })
50 | 
51 |   dataLayerPayload.value = gtm?.dataLayer()
52 | }
53 | 
54 | function triggerView () {
55 |   gtm?.trackView('Home', '/')
56 | 
57 |   dataLayerPayload.value = gtm?.dataLayer()
58 | }
59 | 
60 | const gtmOptions = computed(() => gtm?.options)
61 | 
62 | </script>
63 | 


--------------------------------------------------------------------------------
/client/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useDevtoolsClient } from '@nuxt/devtools-kit/iframe-client'
 3 | 
 4 | const client = useDevtoolsClient()
 5 | 
 6 | const nuxtConfig = await client.value?.devtools.rpc.getServerConfig()
 7 | const moduleOptions = nuxtConfig?.runtimeConfig.public.gtm
 8 | </script>
 9 | 
10 | <template>
11 |   <div class="relative p-5 n-bg-base flex flex-col">
12 |     <h1 class="text-3xl font-bold">
13 |       Nuxt GTM
14 |     </h1>
15 | 
16 |     <span class="opacity-50">
17 |       By Zadig&voltaire ©
18 |     </span>
19 | 
20 |     <div class="w-full bg-green opacity-50 h-0.5 my-2" />
21 | 
22 |     <ModuleAuthorNote />
23 | 
24 |     <div
25 |       v-if="client"
26 |       class="flex flex-col gap-2 h-full"
27 |     >
28 |       <div class="flex-1">
29 |         <OptionTable v-if="moduleOptions" :options="moduleOptions" class="my-2" />
30 | 
31 |         <template v-else>
32 |           <NTip n="yellow" class="mt-2">
33 |             <p>
34 |               ⚠️ No configuration found
35 |             </p>
36 |           </NTip>
37 |         </template>
38 |       </div>
39 | 
40 |       <div>
41 |         <NButton
42 |           n="green"
43 |           class="mt-2"
44 |           @click="client?.host.closeDevTools()"
45 |         >
46 |           Close DevTools
47 |         </NButton>
48 |       </div>
49 |     </div>
50 |     <div v-else>
51 |       <NTip n="yellow">
52 |         Failed to connect to the client. Did you open this page inside Nuxt DevTools?
53 |       </NTip>
54 |     </div>
55 | 
56 |     <div class="flex-auto" />
57 |   </div>
58 | </template>
59 | 


--------------------------------------------------------------------------------
/src/module.ts:
--------------------------------------------------------------------------------
 1 | import { type VueGtmUseOptions } from '@gtm-support/vue-gtm'
 2 | import { defineNuxtModule, addPlugin, createResolver, addImports } from '@nuxt/kit'
 3 | import { defu } from 'defu'
 4 | import { setupDevToolsUI } from './devtools'
 5 | 
 6 | // Module options TypeScript interface definition
 7 | export interface ModuleOptions extends Omit<VueGtmUseOptions, 'vueRouter'> {
 8 |   enableRouterSync?: boolean
 9 |   /**
10 |    * Enable Nuxt Devtools integration
11 |    *
12 |    * @default true
13 |    */
14 |   devtools?: boolean
15 | }
16 | 
17 | declare module '@nuxt/schema' {
18 |   interface PublicRuntimeConfig {
19 |     gtm: ModuleOptions
20 |   }
21 |   interface NuxtConfig {
22 |     gtm?: ModuleOptions
23 |   }
24 |   interface NuxtOptions {
25 |     gtm?: ModuleOptions
26 |   }
27 | }
28 | 
29 | export default defineNuxtModule<ModuleOptions>({
30 |   meta: {
31 |     name: '@zadigetvoltaire/nuxt-gtm',
32 |     configKey: 'gtm',
33 |     compatibility: {
34 |       nuxt: '^3.0.0'
35 |     }
36 |   },
37 |   // @ts-ignore
38 |   defaults: {
39 |     devtools: true
40 |   },
41 |   setup (options, nuxt) {
42 |     const resolver = createResolver(import.meta.url)
43 | 
44 |     const moduleOptions: ModuleOptions = defu(nuxt.options.runtimeConfig.public.gtm, options)
45 | 
46 |     nuxt.options.runtimeConfig.public.gtm = moduleOptions
47 | 
48 |     // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
49 |     addPlugin(resolver.resolve('./runtime/plugin'))
50 | 
51 |     addImports({
52 |       name: 'useGtm',
53 |       as: 'useGtm',
54 |       from: '@gtm-support/vue-gtm'
55 |     })
56 | 
57 |     if (options.devtools) {
58 |       setupDevToolsUI(nuxt, resolver)
59 |     }
60 |   }
61 | })
62 | 


--------------------------------------------------------------------------------
/src/devtools.ts:
--------------------------------------------------------------------------------
 1 | import { existsSync } from 'node:fs'
 2 | import { Nuxt } from 'nuxt/schema'
 3 | import { Resolver } from '@nuxt/kit'
 4 | 
 5 | const DEVTOOLS_UI_ROUTE = '/__nuxt-gtm'
 6 | const DEVTOOLS_UI_LOCAL_PORT = 3300
 7 | 
 8 | export function setupDevToolsUI (nuxt: Nuxt, resolver: Resolver) {
 9 |   const clientPath = resolver.resolve('./client')
10 |   const isProductionBuild = existsSync(clientPath)
11 | 
12 |   // Serve production-built client (used when package is published)
13 |   if (isProductionBuild) {
14 |     nuxt.hook('vite:serverCreated', async (server) => {
15 |       const sirv = await import('sirv').then(r => r.default || r)
16 |       server.middlewares.use(
17 |         DEVTOOLS_UI_ROUTE,
18 |         sirv(clientPath, { dev: true, single: true })
19 |       )
20 |     })
21 |   } else {
22 |     nuxt.hook('vite:extendConfig', (config) => {
23 |       config.server = config.server || {}
24 |       config.server.proxy = config.server.proxy || {}
25 |       config.server.proxy[DEVTOOLS_UI_ROUTE] = {
26 |         target: 'http://localhost:' + DEVTOOLS_UI_LOCAL_PORT + DEVTOOLS_UI_ROUTE,
27 |         changeOrigin: true,
28 |         followRedirects: true,
29 |         rewrite: path => path.replace(DEVTOOLS_UI_ROUTE, '')
30 |       }
31 |     })
32 |   }
33 | 
34 |   // @ts-expect-error
35 |   nuxt.hook('devtools:customTabs', (tabs) => {
36 |     tabs.push({
37 |       // unique identifier
38 |       name: 'nuxt-gtm',
39 |       // title to display in the tab
40 |       title: 'Nuxt GTM',
41 |       // any icon from Iconify, or a URL to an image
42 |       icon: 'carbon:text-link-analysis',
43 |       // iframe view
44 |       view: {
45 |         type: 'iframe',
46 |         src: DEVTOOLS_UI_ROUTE
47 |       }
48 |     })
49 |   })
50 | }
51 | 


--------------------------------------------------------------------------------
/client/components/OptionTable.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const properties = defineProps({
 3 |   options: { type: Object, required: true }
 4 | })
 5 | 
 6 | const tableContainer = ref<HTMLDivElement>()
 7 | const tableOptions = ref<HTMLTableElement>()
 8 | 
 9 | function objectToTable (options: Record<string, string>) {
10 |   const table = document.createElement('table')
11 | 
12 |   for (const [key, value] of Object.entries(options)) {
13 |     const row = document.createElement('tr')
14 |     const keyCell = document.createElement('th')
15 | 
16 |     keyCell.textContent = key
17 |     row.append(keyCell)
18 | 
19 |     if (typeof value === 'object') {
20 |       const nestedTable = objectToTable(value)
21 |       const valueCell = document.createElement('td')
22 |       valueCell.append(nestedTable)
23 |       row.append(valueCell)
24 |     } else {
25 |       const valueCell = document.createElement('td')
26 |       valueCell.textContent = value
27 |       row.append(valueCell)
28 |     }
29 | 
30 |     table.append(row)
31 |   }
32 | 
33 |   return table
34 | }
35 | 
36 | watchEffect(() => {
37 |   if (tableOptions.value) {
38 |     tableOptions.value.remove()
39 |   }
40 | 
41 |   tableOptions.value = objectToTable(properties.options)
42 | 
43 |   tableContainer.value?.append(tableOptions.value)
44 | })
45 | </script>
46 | 
47 | <template>
48 |   <div class="options-table">
49 |     <h1>
50 |       Your GTM configuration:
51 |     </h1>
52 | 
53 |     <div ref="tableContainer" class="table-options-container" />
54 |   </div>
55 | </template>
56 | 
57 | <style lang="postcss">
58 |   .options-table h1 {
59 |     @apply text-lg;
60 | 
61 |     font-weight: 600;
62 |   }
63 |   .table-options-container > table {
64 |     @apply mt-4;
65 |   }
66 | 
67 |   .table-options-container table {
68 |     @apply w-full text-sm;
69 |   }
70 | 
71 |   .table-options-container table tr th {
72 |     @apply p-2 bg-gray-100 border border-gray-200 text-semibold text-left;
73 |   }
74 |   .table-options-container table tr td {
75 |     @apply border border-gray-200 p-2;
76 |   }
77 | 
78 |   .table-options-container tr,
79 |   .table-options-container td,
80 |   .table-options-container th {
81 |     vertical-align: middle;
82 |   }
83 | </style>
84 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@zadigetvoltaire/nuxt-gtm",
 3 |   "version": "0.0.13",
 4 |   "description": "Nuxt module to add Google Tag Manager",
 5 |   "license": "MIT",
 6 |   "type": "module",
 7 |   "exports": {
 8 |     ".": {
 9 |       "types": "./dist/types.d.ts",
10 |       "import": "./dist/module.mjs",
11 |       "require": "./dist/module.cjs"
12 |     }
13 |   },
14 |   "main": "./dist/module.cjs",
15 |   "types": "./dist/types.d.ts",
16 |   "files": [
17 |     "dist"
18 |   ],
19 |   "scripts": {
20 |     "prepack": "nuxt-module-build && npm run client:build",
21 |     "client:build": "nuxi generate client",
22 |     "client:dev": "nuxi dev client --port 3300",
23 |     "dev": "concurrently \"npm:client:dev\" \"npm:play:dev\"",
24 |     "dev:prepare": "nuxt-module-build --stub && nuxi prepare client",
25 |     "play:dev": "nuxi dev playground",
26 |     "play:prod": "npm run prepack && nuxi dev playground",
27 |     "release": "changelogen --release --push",
28 |     "lint": "cross-env NODE_ENV=production eslint .",
29 |     "test": "vitest run",
30 |     "test:watch": "vitest watch"
31 |   },
32 |   "dependencies": {
33 |     "@gtm-support/vue-gtm": "^2.0.0",
34 |     "@nuxt/kit": "^3.5.1",
35 |     "defu": "^6.1.2",
36 |     "sirv": "^2.0.3"
37 |   },
38 |   "peerDependencies": {
39 |     "nuxt": "^3.0.0"
40 |   },
41 |   "devDependencies": {
42 |     "@iconify-json/carbon": "^1.1.15",
43 |     "@nuxt/devtools": "0.5.0",
44 |     "@nuxt/devtools-ui-kit": "0.5.0",
45 |     "@nuxt/eslint-config": "^0.1.1",
46 |     "@nuxt/module-builder": "^0.3.1",
47 |     "@nuxt/schema": "^3.5.1",
48 |     "@nuxt/test-utils": "^3.5.1",
49 |     "@nuxtjs/eslint-config-typescript": "^12.0.0",
50 |     "changelogen": "^0.5.1",
51 |     "concurrently": "^8.0.1",
52 |     "cross-env": "^7.0.3",
53 |     "eslint": "^8.41.0",
54 |     "eslint-plugin-sonarjs": "^0.19.0",
55 |     "eslint-plugin-unicorn": "^47.0.0",
56 |     "nuxt": "^3.5.1",
57 |     "vitest": "^0.31.1"
58 |   },
59 |   "repository": {
60 |     "type": "git",
61 |     "url": "https://github.com/zadigetvoltaire/nuxt-gtm.git"
62 |   },
63 |   "keywords": [
64 |     "nuxt",
65 |     "nuxt3",
66 |     "module",
67 |     "nuxt-module",
68 |     "gtm",
69 |     "google tag manager",
70 |     "googletagmanager",
71 |     "open-source"
72 |   ],
73 |   "author": "Zadig&Voltaire",
74 |   "bugs": {
75 |     "url": "https://github.com/zadigetvoltaire/nuxt-gtm/issues"
76 |   },
77 |   "homepage": "https://github.com/zadigetvoltaire/nuxt-gtm#readme",
78 |   "changelog": {
79 |     "repo": {
80 |       "provider": "github"
81 |     }
82 |   },
83 |   "pnpm": {
84 |     "peerDependencyRules": {
85 |       "ignoreMissing": [
86 |         "typescript",
87 |         "webpack",
88 |         "vue",
89 |         "vite"
90 |       ]
91 |     }
92 |   }
93 | }
94 | 


--------------------------------------------------------------------------------
/assets/nuxt-gtm.svg:
--------------------------------------------------------------------------------
 1 | <svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0_7_17)">
 3 | <path d="M286.226 418.585L224.946 357.229L356.614 224.233L419.014 286.623L286.226 418.585Z" fill="#8AB4F8"/>
 4 | <path d="M286.686 154.345L224.257 91.9262L91.9283 224.233C87.8325 228.327 84.5834 233.189 82.3667 238.539C80.15 243.889 79.0091 249.623 79.0091 255.414C79.0091 261.205 80.15 266.939 82.3667 272.289C84.5834 277.639 87.8325 282.5 91.9283 286.595L224.257 418.901L285.479 357.43L185.5 255.514L286.686 154.345Z" fill="#4285F4"/>
 5 | <path d="M419.014 224.233L286.686 91.9262C278.411 83.6489 267.186 78.9973 255.481 78.9946C243.776 78.9919 232.55 83.6384 224.271 91.9118C215.992 100.185 211.34 111.408 211.337 123.111C211.335 134.814 215.982 146.039 224.257 154.317L356.671 286.623C364.987 294.698 376.146 299.177 387.738 299.092C399.329 299.008 410.422 294.366 418.619 286.171C426.816 277.975 431.458 266.884 431.543 255.295C431.627 243.705 427.148 232.547 419.072 224.233H419.014Z" fill="#8AB4F8"/>
 6 | <path d="M298.724 388.252C298.724 379.598 296.157 371.139 291.348 363.944C286.538 356.749 279.703 351.142 271.706 347.831C263.709 344.521 254.91 343.656 246.422 345.347C237.933 347.037 230.137 351.207 224.019 357.328C217.901 363.449 213.736 371.247 212.051 379.735C210.366 388.223 211.236 397.02 214.552 405.014C217.868 413.007 223.481 419.837 230.68 424.641C237.88 429.445 246.342 432.006 254.997 432C260.742 432 266.43 430.868 271.737 428.669C277.044 426.47 281.866 423.248 285.927 419.185C289.987 415.122 293.208 410.299 295.403 404.991C297.599 399.684 298.727 393.996 298.724 388.252Z" fill="#246FDB"/>
 7 | </g>
 8 | <g filter="url(#filter0_d_7_17)">
 9 | <circle cx="360" cy="371" r="68" fill="white"/>
10 | </g>
11 | <g clip-path="url(#clip1_7_17)">
12 | <path d="M366.394 397.167H408.401C409.735 397.167 411.046 396.819 412.201 396.158C413.357 395.496 414.316 394.545 414.983 393.4C415.65 392.254 416.001 390.955 416 389.633C415.999 388.311 415.648 387.012 414.98 385.867L386.769 337.438C386.102 336.293 385.143 335.342 383.988 334.681C382.833 334.02 381.522 333.672 380.188 333.672C378.854 333.672 377.544 334.02 376.389 334.681C375.233 335.342 374.274 336.293 373.607 337.438L366.394 349.83L352.291 325.599C351.623 324.454 350.664 323.503 349.508 322.842C348.353 322.181 347.042 321.833 345.708 321.833C344.374 321.833 343.063 322.181 341.908 322.842C340.752 323.503 339.792 324.454 339.125 325.599L304.02 385.867C303.352 387.012 303.001 388.311 303 389.633C302.999 390.955 303.35 392.254 304.017 393.4C304.684 394.545 305.643 395.496 306.799 396.158C307.954 396.819 309.265 397.167 310.599 397.167H336.968C347.415 397.167 355.12 392.618 360.421 383.745L373.292 361.653L380.186 349.83L400.876 385.344H373.292L366.394 397.167ZM336.538 385.331L318.136 385.327L345.72 337.978L359.484 361.653L350.268 377.476C346.748 383.234 342.748 385.331 336.538 385.331Z" fill="#00DC82"/>
13 | </g>
14 | <defs>
15 | <filter id="filter0_d_7_17" x="283" y="294" width="154" height="154" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
16 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
17 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
18 | <feOffset/>
19 | <feGaussianBlur stdDeviation="4.5"/>
20 | <feComposite in2="hardAlpha" operator="out"/>
21 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
22 | <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7_17"/>
23 | <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7_17" result="shape"/>
24 | </filter>
25 | <clipPath id="clip0_7_17">
26 | <rect width="353" height="353" fill="white" transform="translate(79 79)"/>
27 | </clipPath>
28 | <clipPath id="clip1_7_17">
29 | <rect width="113" height="113" fill="white" transform="translate(303 303)"/>
30 | </clipPath>
31 | </defs>
32 | </svg>
33 | 


--------------------------------------------------------------------------------
/assets/zadigetvoltaire-logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="940" height="160" viewBox="0 0 940 160" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <rect width="940" height="160" fill="white"/>
 3 | <g clip-path="url(#clip0_4_3)">
 4 | <path d="M24.6612 37.6366V19.6661H79.2073V39.3027L41.3027 121.856H79.2469V139.826H20V120.19L58.4798 37.6366H24.6612Z" fill="black"/>
 5 | <path d="M102.94 139.826H82.966L105.092 19.6661H130.719L152.854 139.826H132.861L129.201 113.198H106.599L102.94 139.826ZM109.594 95.1976H126.236L118.084 43.6267H117.747L109.594 95.1976Z" fill="black"/>
 6 | <path d="M158.924 19.6661H189.539C210.852 19.6661 222.168 31.3092 222.168 55.9442V103.548C222.168 128.183 210.852 139.826 189.539 139.826H158.924V19.6661ZM179.562 122.808H186.713C197.701 122.808 201.529 118.652 201.529 106.008V53.445C201.529 40.8003 197.701 36.6448 186.713 36.6448H179.562V122.808Z" fill="black"/>
 7 | <path d="M233.027 139.826V19.6661H253.665V139.826H233.027Z" fill="black"/>
 8 | <path d="M293.811 78.9131H327.59V139.826H317.603L313.775 130.841C307.616 138.17 302.628 141.492 292.948 141.492C276.634 141.492 265.318 129.839 265.318 110.699V48.7937C265.318 31.815 275.305 18 295.606 18C316.245 18 326.569 32.9853 326.569 50.9557V58.612H306.952C306.952 40.6317 303.292 35.9804 295.14 35.9804C290.181 35.9804 285.986 38.9556 285.986 49.121V110.847C285.986 118.504 288.486 123.492 295.636 123.492C303.957 123.492 306.952 118.831 306.952 106.851V95.2273H293.811V78.9131Z" fill="black"/>
 9 | <path d="M490.237 19.6661H510.548L485.417 139.826H464.778L439.648 19.6661H459.949L474.934 103.042H475.261L490.237 19.6661Z" fill="black"/>
10 | <path d="M512.957 48.7937C512.957 31.815 522.934 18 544.574 18C566.214 18 576.171 31.815 576.171 48.7937V110.699C576.171 127.707 566.254 141.492 544.574 141.492C522.895 141.492 512.957 127.707 512.957 110.699V48.7937ZM533.586 110.203C533.586 119.188 536.254 123.512 544.574 123.512C552.895 123.512 555.553 119.188 555.553 110.203V49.2896C555.553 40.3044 552.895 35.9804 544.574 35.9804C536.254 35.9804 533.586 40.3044 533.586 49.2896V110.203Z" fill="black"/>
11 | <path d="M585.494 139.826V19.6661H606.122V121.816H638.582V139.786L585.494 139.826Z" fill="black"/>
12 | <path d="M645.594 37.6366H625.6V19.6661H686.176V37.6366H666.202V139.786H645.594V37.6366Z" fill="black"/>
13 | <path d="M697.422 139.826H677.449L699.584 19.6661H725.211L747.347 139.826H727.373L723.714 113.198H701.131L697.422 139.826ZM704.077 95.1976H720.718L712.566 43.6267H712.229L704.077 95.1976Z" fill="black"/>
14 | <path d="M755.35 139.826V19.6661H775.988V139.826H755.35Z" fill="black"/>
15 | <path d="M809.331 139.826H788.693V19.6661H817.652C840.789 19.6661 852.601 29.4844 852.601 55.1211C852.601 74.4205 845.113 82.2453 838.121 85.3991L855.596 139.826H834.63L819.982 90.0206C816.443 90.378 812.888 90.5435 809.331 90.5165V139.826ZM809.331 73.5874H816.65C827.807 73.5874 831.963 69.432 831.963 55.1211C831.963 40.8102 827.807 36.6448 816.65 36.6448H809.331V73.5874Z" fill="black"/>
16 | <path d="M862.419 139.826V19.6661H917.669V37.6366H883.057V68.589H909.686V86.5694H883.057V121.856H920V139.826H862.419Z" fill="black"/>
17 | <path d="M436.424 78.9428L419.475 110.937L437.535 129.373L425.238 141.423L409.667 125.426C405.492 133.251 397.528 141.492 381.194 141.492C360.11 141.492 347.018 128.163 347.018 112.375C347.018 96.586 359.564 88.4834 367.845 83.6635C360.903 76.3841 357.243 69.4815 357.144 61.4087C357.144 47.5243 368.728 36.4663 383.485 36.4663C398.242 36.4663 408.983 47.435 408.983 60.6253C408.983 74.0634 398.996 80.3808 392.738 84.0701L407.485 99.0554L417.403 78.9428H436.424ZM378.814 94.6223C371.039 98.8967 366.556 104.074 366.526 110.669C366.526 118.603 372.992 124.246 381.64 124.246C390.288 124.246 394.364 119.773 397.657 113.743L378.814 94.6223ZM383.455 51.2136C382.264 51.2261 381.088 51.4768 379.995 51.9509C378.903 52.4251 377.916 53.1131 377.094 53.9745C376.271 54.8359 375.629 55.8531 375.206 56.9664C374.783 58.0797 374.586 59.2664 374.629 60.4567C374.629 66.4071 379.141 70.7807 382.394 74.2023C388.345 70.2948 392.559 66.9526 392.559 60.4864C392.559 55.5277 389.168 51.2136 383.634 51.2136H383.455Z" fill="black"/>
18 | </g>
19 | <defs>
20 | <clipPath id="clip0_4_3">
21 | <rect width="900" height="123.492" fill="white" transform="translate(20 18)"/>
22 | </clipPath>
23 | </defs>
24 | </svg>
25 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | # Changelog
  2 | 
  3 | 
  4 | ## v0.0.13
  5 | 
  6 | [compare changes](https://github.com/zadigetvoltaire/nuxt-gtm/compare/v0.0.12...v0.0.13)
  7 | 
  8 | 
  9 | ### 💅 Refactors
 10 | 
 11 |   - Use composable useRouter to get nuxt router ([3624f1c](https://github.com/zadigetvoltaire/nuxt-gtm/commit/3624f1c))
 12 |   - Export useGtm composable directly from dependency ([4ff7a85](https://github.com/zadigetvoltaire/nuxt-gtm/commit/4ff7a85))
 13 | 
 14 | ### 📖 Documentation
 15 | 
 16 |   - Update logo in readme ([e08f3f9](https://github.com/zadigetvoltaire/nuxt-gtm/commit/e08f3f9))
 17 | 
 18 | ### 🏡 Chore
 19 | 
 20 |   - Format code ([647fcdf](https://github.com/zadigetvoltaire/nuxt-gtm/commit/647fcdf))
 21 |   - Remove commented code ([7d74054](https://github.com/zadigetvoltaire/nuxt-gtm/commit/7d74054))
 22 |   - Upgrade dependencies ([0de6f85](https://github.com/zadigetvoltaire/nuxt-gtm/commit/0de6f85))
 23 | 
 24 | ### ❤️  Contributors
 25 | 
 26 | - LouisMazel <me@loicmazuel.com>
 27 | 
 28 | ## v0.0.12
 29 | 
 30 | [compare changes](https://github.com/zadigetvoltaire/nuxt-gtm/compare/v0.0.11...v0.0.12)
 31 | 
 32 | 
 33 | ### 🩹 Fixes
 34 | 
 35 |   - Make devtools option not required ([bba2ff9](https://github.com/zadigetvoltaire/nuxt-gtm/commit/bba2ff9))
 36 | 
 37 | ### ❤️  Contributors
 38 | 
 39 | - LouisMazel <me@loicmazuel.com>
 40 | 
 41 | ## v0.0.11
 42 | 
 43 | [compare changes](https://github.com/zadigetvoltaire/nuxt-gtm/compare/v0.0.10...v0.0.11)
 44 | 
 45 | 
 46 | ### 🏡 Chore
 47 | 
 48 |   - Downgrade changelogen to 0.5.1 ([56cf7ec](https://github.com/zadigetvoltaire/nuxt-gtm/commit/56cf7ec))
 49 |   - Upgrade dependencies ([8fa8ca6](https://github.com/zadigetvoltaire/nuxt-gtm/commit/8fa8ca6))
 50 | 
 51 | ### ❤️  Contributors
 52 | 
 53 | - LouisMazel <me@loicmazuel.com>
 54 | 
 55 | ## v0.0.10
 56 | 
 57 | [compare changes](https://undefined/undefined/compare/v0.0.9...v0.0.10)
 58 | 
 59 | 
 60 | ### 🏡 Chore
 61 | 
 62 |   - Downgrade changelogen to 0.5.1 ([abdd000](https://undefined/undefined/commit/abdd000))
 63 |   - Upgrade dependencies ([aa6e9f1](https://undefined/undefined/commit/aa6e9f1))
 64 |   - Update repository url in package.json ([80cad0c](https://undefined/undefined/commit/80cad0c))
 65 |   - Upgrade changelogen dependency ([9d8a52e](https://undefined/undefined/commit/9d8a52e))
 66 | 
 67 | ### ❤️  Contributors
 68 | 
 69 | - LouisMazel <me@loicmazuel.com>
 70 | 
 71 | ## v0.0.9
 72 | 
 73 | [compare changes](https://undefined/undefined/compare/v0.0.8...v0.0.9)
 74 | 
 75 | 
 76 | ### 🏡 Chore
 77 | 
 78 |   - Upgrade dependencies ([999fb9f](https://undefined/undefined/commit/999fb9f))
 79 | 
 80 | ### ❤️  Contributors
 81 | 
 82 | - LouisMazel <me@loicmazuel.com>
 83 | 
 84 | ## v0.0.8
 85 | 
 86 | [compare changes](https://github.com/zadigetvoltaire/nuxt-gtm/compare/v0.0.7...v0.0.8)
 87 | 
 88 | 
 89 | ### 🚀 Enhancements
 90 | 
 91 |   - Add support of nuxt public runtime config ([874231c](https://github.com/zadigetvoltaire/nuxt-gtm/commit/874231c))
 92 | 
 93 | ### 🩹 Fixes
 94 | 
 95 |   - Build - move defu in dependencies instead of dev dependencies ([a770ed1](https://github.com/zadigetvoltaire/nuxt-gtm/commit/a770ed1))
 96 | 
 97 | ### ❤️  Contributors
 98 | 
 99 | - LouisMazel <me@loicmazuel.com>
100 | 
101 | ## v0.0.7
102 | 
103 | [compare changes](https://github.com/zadigetvoltaire/nuxt-gtm/compare/v0.0.6...v0.0.7)
104 | 
105 | 
106 | ### 🏡 Chore
107 | 
108 |   - Upgrade dependencies ([da19d18](https://github.com/zadigetvoltaire/nuxt-gtm/commit/da19d18))
109 | 
110 | ### ❤️  Contributors
111 | 
112 | - LouisMazel <me@loicmazuel.com>
113 | 
114 | ## v0.0.6
115 | 
116 | [compare changes](https://github.com/zadigetvoltaire/nuxt-gtm/compare/v0.0.5...v0.0.6)
117 | 
118 | 
119 | ### 💅 Refactors
120 | 
121 |   - Add documentation link in devtools view ([1c8c0da](https://github.com/zadigetvoltaire/nuxt-gtm/commit/1c8c0da))
122 | 
123 | ### ❤️  Contributors
124 | 
125 | - LouisMazel <me@loicmazuel.com>
126 | 
127 | ## v0.0.5
128 | 
129 | [compare changes](https://github.com/zadigetvoltaire/nuxt-gtm/compare/v0.0.4...v0.0.5)
130 | 
131 | 
132 | ### 💅 Refactors
133 | 
134 |   - Add zadig&voltaire mentions in devtools view ([f83c50a](https://github.com/zadigetvoltaire/nuxt-gtm/commit/f83c50a))
135 | 
136 | ### 🏡 Chore
137 | 
138 |   - Add logo svg ([9b9f1a2](https://github.com/zadigetvoltaire/nuxt-gtm/commit/9b9f1a2))
139 |   - Replace ZV mention ([8812ade](https://github.com/zadigetvoltaire/nuxt-gtm/commit/8812ade))
140 | 
141 | ### ❤️  Contributors
142 | 
143 | - LouisMazel <me@loicmazuel.com>
144 | 
145 | ## v0.0.4
146 | 
147 | [compare changes](https://github.com/zadigetvoltaire/nuxt-gtm/compare/v0.0.3...v0.0.4)
148 | 
149 | 
150 | ### 🚀 Enhancements
151 | 
152 |   - Implementation of the useGtm composable directly in the module to take advantage of auto import ([5c6cb1c](https://github.com/zadigetvoltaire/nuxt-gtm/commit/5c6cb1c))
153 | 
154 | ### 📖 Documentation
155 | 
156 |   - Add logo and zv mentions in README ([26f9419](https://github.com/zadigetvoltaire/nuxt-gtm/commit/26f9419))
157 | 
158 | ### ❤️  Contributors
159 | 
160 | - LouisMazel <mazuel.loic@gmail.com>
161 | 
162 | ## v0.0.3
163 | 
164 | [compare changes](https://github.com/zadigetvoltaire/nuxt-gtm/compare/v0.0.2...v0.0.3)
165 | 
166 | 
167 | ### 🚀 Enhancements
168 | 
169 |   - Display gtm options in nuxt devtools ([d4f0e06](https://github.com/zadigetvoltaire/nuxt-gtm/commit/d4f0e06))
170 | 
171 | ### 🩹 Fixes
172 | 
173 |   - Inject gtm plugin only on client side ([8ec1b62](https://github.com/zadigetvoltaire/nuxt-gtm/commit/8ec1b62))
174 |   - Typo in keywords ([d0f70f1](https://github.com/zadigetvoltaire/nuxt-gtm/commit/d0f70f1))
175 | 
176 | ### 📖 Documentation
177 | 
178 |   - Typo ([ac68317](https://github.com/zadigetvoltaire/nuxt-gtm/commit/ac68317))
179 | 
180 | ### 🏡 Chore
181 | 
182 |   - Remove debug log ([0cd8fdf](https://github.com/zadigetvoltaire/nuxt-gtm/commit/0cd8fdf))
183 | 
184 | ### 🤖 CI
185 | 
186 |   - Enable pipeline for all PR on main branch ([6163b6c](https://github.com/zadigetvoltaire/nuxt-gtm/commit/6163b6c))
187 | 
188 | ### ❤️  Contributors
189 | 
190 | - LouisMazel <mazuel.loic@gmail.com>
191 | - Mazel <mazuel.loic@gmail.com>
192 | 
193 | ## v0.0.2
194 | 
195 | [compare changes](https://github.com/zadigetvoltaire/nuxt-gtm/compare/v0.0.1...v0.0.2)
196 | 
197 | 
198 | ### 🤖 CI
199 | 
200 |   - Remove run of tests in publish pipeline ([90fb0f4](https://github.com/zadigetvoltaire/nuxt-gtm/commit/90fb0f4))
201 | 
202 | ### ❤️  Contributors
203 | 
204 | - LouisMazel <mazuel.loic@gmail.com>
205 | 
206 | ## v0.0.1
207 | 
208 | [compare changes](https://github.com/zadigetvoltaire/nuxt-gtm/compare/v0.0.0...v0.0.1)
209 | 
210 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <div align="center" style="background-color: white;">
  2 | 	<br>
  3 | 	<a href="https://zadig-et-voltaire.com/">
  4 | 		<img src="https://design-system.zadig-et-voltaire.com/logos/logo.svg" width="400" height="100" alt="Click to see the source">
  5 | 	</a>
  6 | 	<br>
  7 | </div>
  8 | 
  9 | # Nuxt GTM
 10 | 
 11 | [![npm version][npm-version-src]][npm-version-href]
 12 | [![npm downloads][npm-downloads-src]][npm-downloads-href]
 13 | [![License][license-src]][license-href]
 14 | [![Nuxt][nuxt-src]][nuxt-href]
 15 | 
 16 | > Nuxt Google Tag Manager module integrated with the [Nuxt Devtools](https://github.com/nuxt/devtools) for Nuxt 3.
 17 | >
 18 | > This library is an Nuxt 3 module wrapper of the [@gtm-support/vue-gtm](https://github.com/gtm-support/vue-gtm) plugin
 19 | 
 20 | - [✨ &nbsp;Release Notes](/CHANGELOG.md)
 21 | 
 22 | ## Quick Setup
 23 | 
 24 | 1. Add `@zadigetvoltaire/nuxt-gtm` dependency to your project
 25 | 
 26 | ```bash
 27 | # Using pnpm
 28 | pnpm add -D @zadigetvoltaire/nuxt-gtm
 29 | 
 30 | # Using yarn
 31 | yarn add --dev @zadigetvoltaire/nuxt-gtm
 32 | 
 33 | # Using npm
 34 | npm install --save-dev @zadigetvoltaire/nuxt-gtm
 35 | ```
 36 | 
 37 | 2. Add `@zadigetvoltaire/nuxt-gtm` to the `modules` section of `nuxt.config.ts`
 38 | 
 39 | ```ts
 40 | export default defineNuxtConfig({
 41 |   modules: [
 42 |     '@zadigetvoltaire/nuxt-gtm'
 43 |   ],
 44 | })
 45 | ```
 46 | 
 47 | 3. Add configuration in `nuxtConfig.gtm` or in `nuxtConfig.runtimeConfig.public.gtm`
 48 | 
 49 | This module supports 2 ways of configuration:
 50 | - Directly in key `gtm` of the Nuxt config
 51 | - In public runtimeConfig: useful to override the config with environment variables and handle multiple environments
 52 | 
 53 | ```ts
 54 | export default defineNuxtConfig({
 55 |   ...
 56 |   gtm: {
 57 |     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'}}], // Your GTM single container ID or array of container ids ['GTM-xxxxxx', 'GTM-yyyyyy']
 58 |     queryParams: {
 59 |       // Add URL query string when loading gtm.js with GTM ID (required when using custom environments)
 60 |       gtm_auth: 'AB7cDEf3GHIjkl-MnOP8qr',
 61 |       gtm_preview: 'env-4',
 62 |       gtm_cookies_win: 'x',
 63 |     },
 64 |     defer: false, // 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
 65 |     compatibility: false, // Will add `async` and `defer` to the script tag to not block requests for old browsers that do not support `async`
 66 |     nonce: '2726c7f26c', // Will add `nonce` to the script tag
 67 |     enabled: true, // defaults to true. Plugin can be disabled by setting this to false for Ex: enabled: !!GDPR_Cookie (optional)
 68 |     debug: true, // Whether or not display console logs debugs (optional)
 69 |     loadScript: true, // Whether or not to load the GTM Script (Helpful if you are including GTM manually, but need the dataLayer functionality in your components) (optional)
 70 |     enableRouterSync: true, // Pass the router instance of your app to automatically sync with router (optional)
 71 |     ignoredViews: ['homepage'], // Don't trigger events for specified router names (optional)
 72 |     trackOnNextTick: false, // Whether or not call trackView in Vue.nextTick
 73 |     devtools: true, // (optional)
 74 |   }
 75 |   ...
 76 |   runtimeConfig: {
 77 |     public: {
 78 |       gtm: {
 79 |         id: 'GTM-xxxxxx',
 80 |         queryParams: {
 81 |           gtm_auth: 'AB7cDEf3GHIjkl-MnOP8qr',
 82 |           gtm_preview: 'env-4',
 83 |           gtm_cookies_win: 'x',
 84 |         },
 85 |         defer: false,
 86 |         compatibility: false,
 87 |         nonce: '2726c7f26c',
 88 |         enabled: true,
 89 |         debug: true,
 90 |         loadScript: true,
 91 |         enableRouterSync: true,
 92 |         ignoredViews: ['homepage'],
 93 |         trackOnNextTick: false,
 94 |         devtools: true,
 95 |       }
 96 |     }
 97 |   }
 98 | })
 99 | ```
100 | 
101 | ## Documentation
102 | 
103 | Please refer to the [@gtm-support/vue-gtm documentation](https://github.com/gtm-support/vue-gtm#documentation)
104 | 
105 | ## Composition API - useGtm composable
106 | 
107 | Example:
108 | 
109 | ```vue
110 | <template>
111 |   <button @click="triggerEvent">
112 |     Trigger event!
113 |   </button>
114 |   <button @click="triggerView">
115 |     Trigger event!
116 |   </button>
117 | </template>
118 | 
119 | <script lang="ts" setup>
120 |   const gtm = useGtm() // auto-imported by the module
121 | 
122 |   function triggerEvent() {
123 |     gtm.trackEvent({
124 |       event: 'event name',
125 |       category: 'category',
126 |       action: 'click',
127 |       label: 'My custom component trigger',
128 |       value: 5000,
129 |       noninteraction: false,
130 |     })
131 |   }
132 | 
133 |   function triggerView() {
134 |     gtm.trackView('Home', '/')
135 |   }
136 | </script>
137 | ```
138 | 
139 | ## Options API
140 | 
141 | ```ts
142 | export default {
143 |   methods: {
144 |     triggerEvent() {
145 |       this.$gtm.trackEvent({
146 |         event: 'event name',
147 |         category: 'category',
148 |         action: 'click',
149 |         label: 'My custom component trigger',
150 |         value: 5000,
151 |         noninteraction: false,
152 |       })
153 |     }
154 |   }
155 | }
156 | ```
157 | 
158 | ## Modules options
159 | 
160 | The modules inherit the options of the plugin [@gtm-support/vue-gtm](https://github.com/gtm-support/vue-gtm#configuration), except `vueRouter` entry replaced by `enableRouterSync`.
161 | 
162 | ```ts
163 | type ModuleOptions = {
164 |   // SPECIFIC MODULES OPTIONS
165 |   /**
166 |    * Enable Nuxt Devtools integration
167 |    *
168 |    * @default true
169 |    */
170 |   devtools?: boolean
171 |   /**
172 |    * Synchronise GTM with NuxtRouter
173 |    */
174 |   enableRouterSync?: boolean
175 | 
176 |   // PLUGIN AND MODULE OPTIONS
177 | 
178 |   /**
179 |    * Derive additional event data after navigation.
180 |    */
181 |   vueRouterAdditionalEventData?: (to: RouteLocationNormalized, from: RouteLocationNormalized) => Record<string, any> | Promise<Record<string, any>>;
182 |   /**
183 |    * Don't trigger events for specified router names.
184 |    */
185 |   ignoredViews?: string[] | ((to: RouteLocationNormalized, from: RouteLocationNormalized) => boolean);
186 |   /**
187 |    * Whether or not call `trackView` in `Vue.nextTick`.
188 |    */
189 |   trackOnNextTick?: boolean;
190 |   /**
191 |    * Your GTM single container ID, array of container ids or array of objects.
192 |    *
193 |    * @example
194 |    *     'GTM-xxxxxx'
195 |    *     // or
196 |    *     ['GTM-xxxxxx', 'GTM-yyyyyy']
197 |    *     // or
198 |    *     [{
199 |    *       id: 'GTM-xxxxxx',
200 |    *       queryParams: {
201 |    *         gtm_auth: 'abc123',
202 |    *         gtm_preview: 'env-4',
203 |    *         gtm_cookies_win: 'x'
204 |    *       }
205 |    *     }, {
206 |    *       id: 'GTM-yyyyyy',
207 |    *       queryParams: {
208 |    *         gtm_auth: 'abc234',
209 |    *         gtm_preview: 'env-5',
210 |    *         gtm_cookies_win: 'x'
211 |    *       }
212 |    *     }]
213 |    */
214 |   id: string | string[] | GtmIdContainer[];
215 |   /**
216 |    * Add url query string when load gtm.js with GTM ID.
217 |    */
218 |   queryParams?: GtmQueryParams;
219 |   /**
220 |    * 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).
221 |    *
222 |    * Defaults to false, so the script is loaded `async` by default.
223 |    *
224 |    * @default false
225 |    */
226 |   defer?: boolean;
227 |   /**
228 |    * Will add `async` and `defer` to the script tag to not block requests for old browsers that do not support `async`.
229 |    *
230 |    * @default false
231 |    */
232 |   compatibility?: boolean;
233 |   /**
234 |    * Will add `nonce` to the script tag.
235 |    *
236 |    * @see [Using Google Tag Manager with a Content Security Policy](https://developers.google.com/tag-manager/web/csp)
237 |    */
238 |   nonce?: string;
239 |   /**
240 |    * The URL of the script; useful for server-side GTM.
241 |    *
242 |    * @default https://www.googletagmanager.com/gtm.js
243 |    */
244 |   source?: string;
245 |   /**
246 |    * Plugin can be disabled by setting this to `false`.
247 |    *
248 |    * @example enabled: !!GDPR_Cookie
249 |    * @default true
250 |    */
251 |   enabled?: boolean;
252 |   /**
253 |    * Whether or not to display console logs debugs.
254 |    */
255 |   debug?: boolean;
256 |   /**
257 |    * Whether or not to load the GTM Script.
258 |    *
259 |    * Helpful if you are including GTM manually, but need the dataLayer functionality in your components.
260 |    */
261 |   loadScript?: boolean;
262 |   /**
263 |    * The property of Track view event.
264 |    *
265 |    * @example trackViewEventProperty: 'track-view-event-demo'
266 |    * @default content-view
267 |    */
268 |   trackViewEventProperty?: string;
269 | }
270 | ```
271 | 
272 | ---
273 | 
274 | That's it! You can now use Nuxt GTM in your Nuxt app ✨
275 | 
276 | ## Contributing
277 | 
278 | ```bash
279 | # Install dependencies, prepare apps & run dev server
280 | make start
281 | 
282 | # Run dev server
283 | pnpm dev
284 | 
285 | # Develop with playground, with bundled client ui
286 | pnpm play:prod
287 | 
288 | # Run ESLint
289 | pnpm lint
290 | 
291 | # Run Vitest
292 | pnpm test
293 | pnpm test:watch
294 | ```
295 | 
296 | ## Release new version
297 | 
298 | 1. Execute release command
299 | 
300 | ⚠ This command should be executed only on the main branch
301 | 
302 | This command will:
303 | 
304 | - Generate the CHANGELOG.md and push it with a release commit
305 | - Bump the package version
306 | - Create and push the new tag
307 | - Create a github release to trigger the library publish pipeline
308 | 
309 | ```bash
310 | pnpm release
311 | ```
312 | 
313 | ---
314 | 
315 | © Zadig&Voltaire is a registered trademark of ZV FRANCE
316 | 
317 | <!-- Badges -->
318 | [npm-version-src]: https://img.shields.io/npm/v/@zadigetvoltaire/nuxt-gtm/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
319 | [npm-version-href]: https://npmjs.com/package/@zadigetvoltaire/nuxt-gtm
320 | 
321 | [npm-downloads-src]: https://img.shields.io/npm/dm/@zadigetvoltaire/nuxt-gtm.svg?style=flat&colorA=18181B&colorB=28CF8D
322 | [npm-downloads-href]: https://npmjs.com/package/@zadigetvoltaire/nuxt-gtm
323 | 
324 | [license-src]: https://img.shields.io/npm/l/@zadigetvoltaire/nuxt-gtm.svg?style=flat&colorA=18181B&colorB=28CF8D
325 | [license-href]: https://npmjs.com/package/@zadigetvoltaire/nuxt-gtm
326 | 
327 | [nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
328 | [nuxt-href]: https://nuxt.com
329 | 


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