@nuxt/scripts 0.6.4 → 0.6.6

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 (66) hide show
  1. package/README.md +73 -73
  2. package/dist/client/200.html +9 -9
  3. package/dist/client/404.html +9 -9
  4. package/dist/client/_nuxt/{DX8FDaDx.js → BKIFFtfV.js} +1 -1
  5. package/dist/client/_nuxt/{DUCgB8kF.js → BKJqCZ0j.js} +1 -1
  6. package/dist/client/_nuxt/DcF05ETD.js +31 -0
  7. package/dist/client/_nuxt/aQeyjCqJ.js +1 -0
  8. package/dist/client/_nuxt/builds/latest.json +1 -1
  9. package/dist/client/_nuxt/builds/meta/3dcaf2bf-82f1-460f-80a6-1412196a7a77.json +1 -0
  10. package/dist/client/_nuxt/entry.FVeyw1Qn.css +1 -0
  11. package/dist/client/_nuxt/error-404.B7Lh29wY.css +1 -0
  12. package/dist/client/_nuxt/error-500.B_VIyt60.css +1 -0
  13. package/dist/client/index.html +9 -9
  14. package/dist/module.d.mts +2 -10
  15. package/dist/module.d.ts +2 -10
  16. package/dist/module.json +1 -1
  17. package/dist/module.mjs +3 -0
  18. package/dist/registry.mjs +2 -2
  19. package/dist/runtime/components/ScriptCarbonAds.vue +71 -71
  20. package/dist/runtime/components/ScriptCrisp.vue +84 -84
  21. package/dist/runtime/components/ScriptGoogleAdsense.vue +69 -69
  22. package/dist/runtime/components/ScriptGoogleMaps.vue +267 -265
  23. package/dist/runtime/components/ScriptIntercom.vue +93 -93
  24. package/dist/runtime/components/ScriptLemonSqueezy.vue +45 -45
  25. package/dist/runtime/components/ScriptLoadingIndicator.vue +22 -22
  26. package/dist/runtime/components/ScriptStripePricingTable.vue +68 -68
  27. package/dist/runtime/components/ScriptVimeoPlayer.vue +258 -256
  28. package/dist/runtime/components/ScriptYouTubePlayer.vue +171 -170
  29. package/dist/runtime/composables/useScript.js +2 -2
  30. package/dist/runtime/composables/useScriptEventPage.d.ts +4 -1
  31. package/dist/runtime/composables/useScriptEventPage.js +6 -5
  32. package/dist/runtime/registry/clarity.js +1 -1
  33. package/dist/runtime/registry/cloudflare-web-analytics.js +1 -1
  34. package/dist/runtime/registry/crisp.js +1 -1
  35. package/dist/runtime/registry/fathom-analytics.js +1 -1
  36. package/dist/runtime/registry/google-adsense.js +1 -1
  37. package/dist/runtime/registry/google-analytics.d.ts +13 -7
  38. package/dist/runtime/registry/google-analytics.js +25 -13
  39. package/dist/runtime/registry/google-maps.js +1 -1
  40. package/dist/runtime/registry/google-tag-manager.d.ts +16 -6
  41. package/dist/runtime/registry/google-tag-manager.js +16 -10
  42. package/dist/runtime/registry/hotjar.js +1 -1
  43. package/dist/runtime/registry/intercom.js +1 -1
  44. package/dist/runtime/registry/lemon-squeezy.js +1 -1
  45. package/dist/runtime/registry/matomo-analytics.js +7 -3
  46. package/dist/runtime/registry/meta-pixel.d.ts +1 -0
  47. package/dist/runtime/registry/meta-pixel.js +6 -2
  48. package/dist/runtime/registry/npm.js +1 -1
  49. package/dist/runtime/registry/plausible-analytics.js +1 -1
  50. package/dist/runtime/registry/segment.d.ts +1 -2
  51. package/dist/runtime/registry/segment.js +1 -1
  52. package/dist/runtime/registry/stripe.js +1 -1
  53. package/dist/runtime/registry/vimeo-player.js +1 -1
  54. package/dist/runtime/registry/x-pixel.js +7 -3
  55. package/dist/runtime/registry/youtube-player.js +1 -1
  56. package/dist/runtime/types.d.ts +20 -4
  57. package/dist/runtime/types.js +1 -1
  58. package/dist/runtime/utils.d.ts +1 -1
  59. package/dist/runtime/utils.js +16 -4
  60. package/package.json +30 -32
  61. package/dist/client/_nuxt/B8kiEHWd.js +0 -31
  62. package/dist/client/_nuxt/CE8XWCBP.js +0 -1
  63. package/dist/client/_nuxt/builds/meta/a56fe5f5-907d-4907-9967-836d6a0f3850.json +0 -1
  64. package/dist/client/_nuxt/entry.DvGwvmL9.css +0 -1
  65. package/dist/client/_nuxt/error-404.-RjlvToe.css +0 -1
  66. package/dist/client/_nuxt/error-500.Bz7LXgZy.css +0 -1
@@ -1,170 +1,171 @@
1
- <script setup lang="ts">
2
- /// <reference types="youtube" />
3
- import { computed, onMounted, ref, watch } from 'vue'
4
- import type { HTMLAttributes, ImgHTMLAttributes, Ref } from 'vue'
5
- import { defu } from 'defu'
6
- import type { ElementScriptTrigger } from '../types'
7
- import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
8
- import { useScriptYouTubePlayer } from '../registry/youtube-player'
9
- import { useHead } from '#imports'
10
-
11
- const props = withDefaults(defineProps<{
12
- placeholderAttrs?: ImgHTMLAttributes
13
- rootAttrs?: HTMLAttributes
14
- aboveTheFold?: boolean
15
- trigger?: ElementScriptTrigger
16
- videoId: string
17
- playerVars?: YT.PlayerVars
18
- width?: number
19
- height?: number
20
- }>(), {
21
- trigger: 'mousedown',
22
- // @ts-expect-error untyped
23
- playerVars: { autoplay: 0, playsinline: 1 },
24
- width: 640,
25
- height: 480,
26
- })
27
-
28
- const emits = defineEmits<{
29
- 'ready': [e: YT.PlayerEvent]
30
- 'state-change': [e: YT.OnStateChangeEvent, target: YT.Player]
31
- 'playback-quality-change': [e: YT.OnPlaybackQualityChangeEvent, target: YT.Player]
32
- 'playback-rate-change': [e: YT.OnPlaybackRateChangeEvent, target: YT.Player]
33
- 'error': [e: YT.OnErrorEvent, target: YT.Player]
34
- }>()
35
- const events: (keyof YT.Events)[] = [
36
- 'onReady',
37
- 'onStateChange',
38
- 'onPlaybackQualityChange',
39
- 'onPlaybackRateChange',
40
- 'onError',
41
- 'onApiChange',
42
- ]
43
- const rootEl = ref()
44
- const youtubeEl = ref()
45
- const ready = ref(false)
46
- const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl })
47
- const { $script } = useScriptYouTubePlayer({
48
- scriptOptions: {
49
- trigger,
50
- },
51
- })
52
-
53
- const player: Ref<YT.Player | undefined> = ref()
54
- let clickTriggered = false
55
- if (props.trigger === 'mousedown') {
56
- trigger.then(() => {
57
- clickTriggered = true
58
- })
59
- }
60
- onMounted(() => {
61
- $script.then(async (instance) => {
62
- const YouTube: typeof YT & { ready: (fn: () => void) => void } = await instance.YT
63
- await new Promise<void>((resolve) => {
64
- if (typeof YT.Player === 'undefined')
65
- YouTube.ready(resolve)
66
- else
67
- resolve()
68
- })
69
- player.value = new YT.Player(youtubeEl.value, {
70
- ...props,
71
- events: Object.fromEntries(events.map(event => [event, (e: any) => {
72
- const emitEventName = event.replace(/([A-Z])/g, '-$1').replace('on-', '').toLowerCase()
73
- // @ts-expect-error untyped
74
- emits(emitEventName, e)
75
- if (event === 'onReady') {
76
- ready.value = true
77
- if (clickTriggered) {
78
- player.value?.playVideo()
79
- clickTriggered = false
80
- }
81
- watch(() => props.videoId, () => {
82
- player.value?.loadVideoById(props.videoId)
83
- })
84
- }
85
- }])),
86
- })
87
- })
88
- watch($script.status, (status) => {
89
- if (status === 'error') {
90
- // @ts-expect-error untyped
91
- emits('error')
92
- }
93
- })
94
- })
95
-
96
- defineExpose({
97
- player,
98
- })
99
-
100
- const rootAttrs = computed(() => {
101
- return defu(props.rootAttrs, {
102
- 'aria-busy': $script.status.value === 'loading',
103
- 'aria-label': $script.status.value === 'awaitingLoad'
104
- ? 'YouTube Player - Placeholder'
105
- : $script.status.value === 'loading'
106
- ? 'YouTube Player - Loading'
107
- : 'YouTube Player - Loaded',
108
- 'aria-live': 'polite',
109
- 'role': 'application',
110
- 'style': {
111
- cursor: 'pointer',
112
- position: 'relative',
113
- backgroundColor: 'black',
114
- maxWidth: '100%',
115
- width: `${props.width}px`,
116
- height: `'auto'`,
117
- aspectRatio: `${props.width}/${props.height}`,
118
- },
119
- }) as HTMLAttributes
120
- })
121
-
122
- const placeholder = computed(() => `https://i.ytimg.com/vi_webp/${props.videoId}/sddefault.webp`)
123
-
124
- if (import.meta.server) {
125
- // dns-prefetch https://i.vimeocdn.com
126
- useHead({
127
- link: [
128
- {
129
- rel: props.aboveTheFold ? 'preconnect' : 'dns-prefetch',
130
- href: 'https://i.ytimg.com',
131
- },
132
- props.aboveTheFold
133
- // we can preload the placeholder image
134
- ? {
135
- rel: 'preload',
136
- as: 'image',
137
- href: placeholder.value,
138
- }
139
- : {},
140
- ],
141
- })
142
- }
143
-
144
- const placeholderAttrs = computed(() => {
145
- return defu(props.placeholderAttrs, {
146
- src: placeholder.value,
147
- alt: '',
148
- loading: props.aboveTheFold ? 'eager' : 'lazy',
149
- style: {
150
- width: '100%',
151
- objectFit: 'contain',
152
- height: '100%',
153
- },
154
- } satisfies ImgHTMLAttributes)
155
- })
156
- </script>
157
-
158
- <template>
159
- <div ref="rootEl" v-bind="rootAttrs">
160
- <div ref="youtubeEl" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;" />
161
- <slot v-if="!ready" :placeholder="placeholder" name="placeholder">
162
- <img v-bind="placeholderAttrs">
163
- </slot>
164
- <slot v-if="$script.status.value === 'loading'" name="loading">
165
- <ScriptLoadingIndicator />
166
- </slot>
167
- <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
168
- <slot v-else-if="$script.status.value === 'error'" name="error" />
169
- </div>
170
- </template>
1
+ <script setup lang="ts">
2
+ /// <reference types="youtube" />
3
+ import { computed, onMounted, ref, watch } from 'vue'
4
+ import type { HTMLAttributes, ImgHTMLAttributes, Ref } from 'vue'
5
+ import { defu } from 'defu'
6
+ import type { ElementScriptTrigger } from '../types'
7
+ import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
8
+ import { useScriptYouTubePlayer } from '../registry/youtube-player'
9
+ import { useHead } from '#imports'
10
+
11
+ const props = withDefaults(defineProps<{
12
+ placeholderAttrs?: ImgHTMLAttributes
13
+ rootAttrs?: HTMLAttributes
14
+ aboveTheFold?: boolean
15
+ trigger?: ElementScriptTrigger
16
+ videoId: string
17
+ playerVars?: YT.PlayerVars
18
+ width?: number
19
+ height?: number
20
+ }>(), {
21
+ trigger: 'mousedown',
22
+ // @ts-expect-error untyped
23
+ playerVars: { autoplay: 0, playsinline: 1 },
24
+ width: 640,
25
+ height: 480,
26
+ })
27
+
28
+ const emits = defineEmits<{
29
+ 'ready': [e: YT.PlayerEvent]
30
+ 'state-change': [e: YT.OnStateChangeEvent, target: YT.Player]
31
+ 'playback-quality-change': [e: YT.OnPlaybackQualityChangeEvent, target: YT.Player]
32
+ 'playback-rate-change': [e: YT.OnPlaybackRateChangeEvent, target: YT.Player]
33
+ 'error': [e: YT.OnErrorEvent, target: YT.Player]
34
+ }>()
35
+ const events: (keyof YT.Events)[] = [
36
+ 'onReady',
37
+ 'onStateChange',
38
+ 'onPlaybackQualityChange',
39
+ 'onPlaybackRateChange',
40
+ 'onError',
41
+ 'onApiChange',
42
+ ]
43
+ const rootEl = ref()
44
+ const youtubeEl = ref()
45
+ const ready = ref(false)
46
+ const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl })
47
+ const { $script } = useScriptYouTubePlayer({
48
+ scriptOptions: {
49
+ trigger,
50
+ },
51
+ })
52
+
53
+ const player: Ref<YT.Player | undefined> = ref()
54
+ let clickTriggered = false
55
+ if (props.trigger === 'mousedown') {
56
+ trigger.then(() => {
57
+ clickTriggered = true
58
+ })
59
+ }
60
+ onMounted(() => {
61
+ $script.then(async (instance) => {
62
+ const YouTube: typeof YT & { ready: (fn: () => void) => void } = await instance.YT
63
+ await new Promise<void>((resolve) => {
64
+ if (typeof YT.Player === 'undefined')
65
+ YouTube.ready(resolve)
66
+ else
67
+ resolve()
68
+ })
69
+ player.value = new YT.Player(youtubeEl.value, {
70
+ ...props,
71
+ events: Object.fromEntries(events.map(event => [event, (e: any) => {
72
+ const emitEventName = event.replace(/([A-Z])/g, '-$1').replace('on-', '').toLowerCase()
73
+ // @ts-expect-error untyped
74
+ emits(emitEventName, e)
75
+ if (event === 'onReady') {
76
+ ready.value = true
77
+ if (clickTriggered) {
78
+ player.value?.playVideo()
79
+ clickTriggered = false
80
+ }
81
+ watch(() => props.videoId, () => {
82
+ player.value?.loadVideoById(props.videoId)
83
+ })
84
+ }
85
+ }])),
86
+ })
87
+ })
88
+ watch($script.status, (status) => {
89
+ if (status === 'error') {
90
+ // @ts-expect-error untyped
91
+ emits('error')
92
+ }
93
+ })
94
+ })
95
+
96
+ defineExpose({
97
+ player,
98
+ })
99
+
100
+ const rootAttrs = computed(() => {
101
+ return defu(props.rootAttrs, {
102
+ 'aria-busy': $script.status.value === 'loading',
103
+ 'aria-label': $script.status.value === 'awaitingLoad'
104
+ ? 'YouTube Player - Placeholder'
105
+ : $script.status.value === 'loading'
106
+ ? 'YouTube Player - Loading'
107
+ : 'YouTube Player - Loaded',
108
+ 'aria-live': 'polite',
109
+ 'role': 'application',
110
+ 'style': {
111
+ cursor: 'pointer',
112
+ position: 'relative',
113
+ backgroundColor: 'black',
114
+ maxWidth: '100%',
115
+ width: `${props.width}px`,
116
+ height: `'auto'`,
117
+ aspectRatio: `${props.width}/${props.height}`,
118
+ },
119
+ }) as HTMLAttributes
120
+ })
121
+
122
+ const placeholder = computed(() => `https://i.ytimg.com/vi_webp/${props.videoId}/sddefault.webp`)
123
+
124
+ if (import.meta.server) {
125
+ // dns-prefetch https://i.vimeocdn.com
126
+ useHead({
127
+ link: [
128
+ {
129
+ rel: props.aboveTheFold ? 'preconnect' : 'dns-prefetch',
130
+ href: 'https://i.ytimg.com',
131
+ },
132
+ props.aboveTheFold
133
+ // we can preload the placeholder image
134
+ ? {
135
+ rel: 'preload',
136
+ as: 'image',
137
+ href: placeholder.value,
138
+ }
139
+ : {},
140
+ ],
141
+ })
142
+ }
143
+
144
+ const placeholderAttrs = computed(() => {
145
+ return defu(props.placeholderAttrs, {
146
+ src: placeholder.value,
147
+ alt: '',
148
+ loading: props.aboveTheFold ? 'eager' : 'lazy',
149
+ style: {
150
+ width: '100%',
151
+ objectFit: 'contain',
152
+ height: '100%',
153
+ },
154
+ } satisfies ImgHTMLAttributes)
155
+ })
156
+ </script>
157
+
158
+ <template>
159
+ <div ref="rootEl" v-bind="rootAttrs">
160
+ <div ref="youtubeEl" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;" />
161
+ <slot v-if="!ready" :placeholder="placeholder" name="placeholder">
162
+ <img v-bind="placeholderAttrs">
163
+ </slot>
164
+ <slot v-if="$script.status.value === 'loading'" name="loading">
165
+ <ScriptLoadingIndicator />
166
+ </slot>
167
+ <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
168
+ <slot v-else-if="$script.status.value === 'error'" name="error" />
169
+ <slot />
170
+ </div>
171
+ </template>
@@ -33,7 +33,7 @@ export function useScript(input, options) {
33
33
  nuxtApp.hooks.callHook("scripts:updated", { scripts: nuxtApp._scripts });
34
34
  };
35
35
  const payload = {
36
- key: input.key || input.src,
36
+ ...options.devtools,
37
37
  src: input.src,
38
38
  $script: null,
39
39
  events: []
@@ -53,7 +53,7 @@ export function useScript(input, options) {
53
53
  syncScripts();
54
54
  });
55
55
  head.hooks.hook("script:instance-fn", (ctx) => {
56
- if (ctx.script.id !== instance.$script.id)
56
+ if (ctx.script.id !== instance.$script.id || String(ctx.fn).startsWith("__v_"))
57
57
  return;
58
58
  payload.events.push({
59
59
  type: "fn-call",
@@ -1,5 +1,8 @@
1
1
  import type { TrackedPage } from '#nuxt-scripts';
2
2
  export declare function useScriptEventPage(onChange?: (payload: TrackedPage) => void): import("vue").Ref<{
3
- title?: string;
3
+ title?: string | undefined;
4
+ path: string;
5
+ }, TrackedPage | {
6
+ title?: string | undefined;
4
7
  path: string;
5
8
  }>;
@@ -10,7 +10,8 @@ export function useScriptEventPage(onChange) {
10
10
  if (import.meta.server)
11
11
  return payload;
12
12
  let lastPayload = { path: "", title: "" };
13
- let stopDomWatcher;
13
+ let stopDomWatcher = () => {
14
+ };
14
15
  nuxt.hooks.hook("page:finish", () => {
15
16
  Promise.race([
16
17
  // possibly no head update is needed
@@ -18,15 +19,15 @@ export function useScriptEventPage(onChange) {
18
19
  new Promise((resolve) => {
19
20
  stopDomWatcher = head.hooks.hook("dom:rendered", () => resolve());
20
21
  })
21
- ]).finally(() => {
22
- stopDomWatcher && stopDomWatcher();
23
- }).then(() => {
22
+ ]).finally(stopDomWatcher).then(() => {
24
23
  payload.value = {
25
24
  path: route.fullPath,
26
25
  title: document.title
27
26
  };
28
27
  if (lastPayload.path !== payload.value.path || lastPayload.title !== payload.value.title) {
29
- onChange && onChange(payload.value);
28
+ if (onChange) {
29
+ onChange(payload.value);
30
+ }
30
31
  lastPayload = payload.value;
31
32
  }
32
33
  });
@@ -8,7 +8,7 @@ export const ClarityOptions = object({
8
8
  });
9
9
  export function useScriptClarity(_options) {
10
10
  return useRegistryScript(
11
- _options?.key || "clarity",
11
+ "clarity",
12
12
  (options) => ({
13
13
  scriptInput: {
14
14
  src: `https://www.clarity.ms/tag/${options.id}`
@@ -14,7 +14,7 @@ export const CloudflareWebAnalyticsOptions = object({
14
14
  spa: optional(boolean())
15
15
  });
16
16
  export function useScriptCloudflareWebAnalytics(_options) {
17
- return useRegistryScript(_options?.key || "cloudflareWebAnalytics", (options) => ({
17
+ return useRegistryScript("cloudflareWebAnalytics", (options) => ({
18
18
  scriptInput: {
19
19
  "src": "https://static.cloudflareinsights.com/beacon.min.js",
20
20
  "data-cf-beacon": JSON.stringify({ token: options.token, spa: options.spa || true }),
@@ -34,7 +34,7 @@ export const CrispOptions = object({
34
34
  });
35
35
  export function useScriptCrisp(_options) {
36
36
  let readyPromise = Promise.resolve();
37
- return useRegistryScript(_options?.key || "crisp", (options) => ({
37
+ return useRegistryScript("crisp", (options) => ({
38
38
  scriptInput: {
39
39
  src: "https://client.crisp.chat/l.js"
40
40
  // can't be bundled
@@ -23,7 +23,7 @@ export const FathomAnalyticsOptions = object({
23
23
  honorDnt: optional(boolean())
24
24
  });
25
25
  export function useScriptFathomAnalytics(_options) {
26
- return useRegistryScript(_options?.key || "fathomAnalytics", (options) => ({
26
+ return useRegistryScript("fathomAnalytics", (options) => ({
27
27
  scriptInput: {
28
28
  src: "https://cdn.usefathom.com/script.js",
29
29
  // can't be bundled
@@ -9,7 +9,7 @@ export const GoogleAdsenseOptions = object({
9
9
  client: optional(string())
10
10
  });
11
11
  export function useScriptGoogleAdsense(_options) {
12
- return useRegistryScript(_options?.key || "googleAdsense", (options) => ({
12
+ return useRegistryScript("googleAdsense", (options) => ({
13
13
  scriptInput: {
14
14
  src: "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
15
15
  },
@@ -1,13 +1,19 @@
1
- import type { GoogleAnalyticsApi } from 'third-party-capital';
1
+ import type { DataLayer, GTag } from 'third-party-capital';
2
2
  import type { RegistryScriptInput } from '#nuxt-scripts';
3
3
  export declare const GoogleAnalyticsOptions: import("valibot").ObjectSchema<{
4
4
  readonly id: import("valibot").StringSchema<undefined>;
5
+ readonly l: import("valibot").OptionalSchema<import("valibot").StringSchema<undefined>, never>;
5
6
  }, undefined>;
6
- declare global {
7
- interface Window extends GoogleAnalyticsApi {
8
- }
9
- }
10
7
  export type GoogleAnalyticsInput = RegistryScriptInput<typeof GoogleAnalyticsOptions>;
11
- export declare function useScriptGoogleAnalytics<T extends GoogleAnalyticsApi>(_options?: GoogleAnalyticsInput): T & {
12
- $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
8
+ export declare function useScriptGoogleAnalytics(_options?: GoogleAnalyticsInput): {
9
+ dataLayer: DataLayer;
10
+ gtag: GTag;
11
+ } & {
12
+ $script: Promise<{
13
+ dataLayer: DataLayer;
14
+ gtag: GTag;
15
+ }> & import("@unhead/vue").VueScriptInstance<{
16
+ dataLayer: DataLayer;
17
+ gtag: GTag;
18
+ }>;
13
19
  };
@@ -1,17 +1,27 @@
1
1
  import { withQuery } from "ufo";
2
2
  import { useRegistryScript } from "#nuxt-scripts-utils";
3
- import { object, string } from "#nuxt-scripts-validator";
4
- export const GoogleAnalyticsOptions = object({ id: string() });
3
+ import { object, string, optional } from "#nuxt-scripts-validator";
4
+ export const GoogleAnalyticsOptions = object({
5
+ id: string(),
6
+ l: optional(string())
7
+ });
8
+ function use(options) {
9
+ const gtag = function(...args) {
10
+ window["gtag-" + (options.l ?? "dataLayer")](...args);
11
+ };
12
+ return {
13
+ dataLayer: window[options.l ?? "dataLayer"],
14
+ gtag
15
+ };
16
+ }
5
17
  export function useScriptGoogleAnalytics(_options) {
6
- return useRegistryScript(_options?.key || "google-analytics", (options) => ({
18
+ return useRegistryScript(_options?.key || "googleAnalytics", (options) => ({
7
19
  scriptInput: {
8
- src: withQuery("https://www.googletagmanager.com/gtag/js", { id: options?.id })
20
+ src: withQuery("https://www.googletagmanager.com/gtag/js", { id: options?.id, l: options?.l })
9
21
  },
10
- schema: import.meta.dev ? void 0 : GoogleAnalyticsOptions,
22
+ schema: import.meta.dev ? GoogleAnalyticsOptions : void 0,
11
23
  scriptOptions: {
12
- use: () => {
13
- return { dataLayer: window.dataLayer, gtag: window.gtag };
14
- },
24
+ use: () => use(options),
15
25
  stub: import.meta.client ? void 0 : ({ fn }) => {
16
26
  return fn === "dataLayer" ? [] : void 0;
17
27
  },
@@ -19,13 +29,15 @@ export function useScriptGoogleAnalytics(_options) {
19
29
  ...{ tagPriority: 1 }
20
30
  },
21
31
  // eslint-disable-next-line
32
+ // @ts-ignore
33
+ // eslint-disable-next-line
22
34
  clientInit: import.meta.server ? void 0 : () => {
23
- window.dataLayer = window.dataLayer || [];
24
- window.gtag = function gtag() {
25
- window.dataLayer.push(arguments);
35
+ window[options?.l ?? "dataLayer"] = window[options?.l ?? "dataLayer"] || [];
36
+ window["gtag-" + (options?.l ?? "dataLayer")] = function() {
37
+ window[options?.l ?? "dataLayer"].push(arguments);
26
38
  };
27
- window.gtag("js", /* @__PURE__ */ new Date());
28
- window.gtag("config", options.id);
39
+ window["gtag-" + (options?.l ?? "dataLayer")]("js", /* @__PURE__ */ new Date());
40
+ window["gtag-" + (options?.l ?? "dataLayer")]("config", options?.id);
29
41
  }
30
42
  }), _options);
31
43
  }
@@ -8,7 +8,7 @@ export const GoogleMapsOptions = object({
8
8
  });
9
9
  export function useScriptGoogleMaps(_options) {
10
10
  let readyPromise = Promise.resolve();
11
- return useRegistryScript(_options?.key || "googleMaps", (options) => {
11
+ return useRegistryScript("googleMaps", (options) => {
12
12
  const libraries = options?.libraries || ["places"];
13
13
  return {
14
14
  scriptInput: {
@@ -1,13 +1,23 @@
1
- import type { GoogleTagManagerApi } from 'third-party-capital';
1
+ import type { GoogleTagManagerApi, DataLayer } from 'third-party-capital';
2
2
  import type { RegistryScriptInput } from '#nuxt-scripts';
3
- export declare const GoogleTagManagerOptions: import("valibot").ObjectSchema<{
4
- readonly id: import("valibot").StringSchema<undefined>;
5
- }, undefined>;
6
3
  declare global {
7
4
  interface Window extends GoogleTagManagerApi {
8
5
  }
9
6
  }
7
+ export declare const GoogleTagManagerOptions: import("valibot").ObjectSchema<{
8
+ readonly id: import("valibot").StringSchema<undefined>;
9
+ readonly l: import("valibot").OptionalSchema<import("valibot").StringSchema<undefined>, never>;
10
+ }, undefined>;
10
11
  export type GoogleTagManagerInput = RegistryScriptInput<typeof GoogleTagManagerOptions>;
11
- export declare function useScriptGoogleTagManager<T extends GoogleTagManagerApi>(_options?: GoogleTagManagerInput): T & {
12
- $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
12
+ export declare function useScriptGoogleTagManager(_options?: GoogleTagManagerInput): {
13
+ dataLayer: DataLayer;
14
+ google_tag_manager: import("third-party-capital").GoogleTagManagerInstance;
15
+ } & {
16
+ $script: Promise<{
17
+ dataLayer: DataLayer;
18
+ google_tag_manager: import("third-party-capital").GoogleTagManagerInstance;
19
+ }> & import("@unhead/vue").VueScriptInstance<{
20
+ dataLayer: DataLayer;
21
+ google_tag_manager: import("third-party-capital").GoogleTagManagerInstance;
22
+ }>;
13
23
  };
@@ -1,17 +1,21 @@
1
1
  import { withQuery } from "ufo";
2
2
  import { useRegistryScript } from "#nuxt-scripts-utils";
3
- import { object, string } from "#nuxt-scripts-validator";
4
- export const GoogleTagManagerOptions = object({ id: string() });
3
+ import { object, string, optional } from "#nuxt-scripts-validator";
4
+ export const GoogleTagManagerOptions = object({
5
+ id: string(),
6
+ l: optional(string())
7
+ });
8
+ function use(options) {
9
+ return { dataLayer: window[options.l ?? "dataLayer"], google_tag_manager: window.google_tag_manager };
10
+ }
5
11
  export function useScriptGoogleTagManager(_options) {
6
- return useRegistryScript(_options?.key || "google-tag-manager", (options) => ({
12
+ return useRegistryScript(_options?.key || "googleTagManager", (options) => ({
7
13
  scriptInput: {
8
- src: withQuery("https://www.googletagmanager.com/gtm.js", { id: options?.id })
14
+ src: withQuery("https://www.googletagmanager.com/gtm.js", { id: options?.id, l: options?.l })
9
15
  },
10
- schema: import.meta.dev ? void 0 : GoogleTagManagerOptions,
16
+ schema: import.meta.dev ? GoogleTagManagerOptions : void 0,
11
17
  scriptOptions: {
12
- use: () => {
13
- return { dataLayer: window.dataLayer, google_tag_manager: window.google_tag_manager };
14
- },
18
+ use: () => use(options),
15
19
  stub: import.meta.client ? void 0 : ({ fn }) => {
16
20
  return fn === "dataLayer" ? [] : void 0;
17
21
  },
@@ -19,9 +23,11 @@ export function useScriptGoogleTagManager(_options) {
19
23
  ...{ tagPriority: 1 }
20
24
  },
21
25
  // eslint-disable-next-line
26
+ // @ts-ignore
27
+ // eslint-disable-next-line
22
28
  clientInit: import.meta.server ? void 0 : () => {
23
- window.dataLayer = window.dataLayer || [];
24
- window.dataLayer.push({ "gtm.start": (/* @__PURE__ */ new Date()).getTime(), event: "gtm.js" });
29
+ window[options?.l ?? "dataLayer"] = window[options?.l ?? "dataLayer"] || [];
30
+ window[options?.l ?? "dataLayer"].push({ "gtm.start": (/* @__PURE__ */ new Date()).getTime(), event: "gtm.js" });
25
31
  }
26
32
  }), _options);
27
33
  }
@@ -5,7 +5,7 @@ export const HotjarOptions = object({
5
5
  sv: optional(number())
6
6
  });
7
7
  export function useScriptHotjar(_options) {
8
- return useRegistryScript(_options?.key || "hotjar", (options) => ({
8
+ return useRegistryScript("hotjar", (options) => ({
9
9
  scriptInput: {
10
10
  src: `https://static.hotjar.com/c/hotjar-${options?.id}.js?sv=${options?.sv || 6}`
11
11
  },
@@ -13,7 +13,7 @@ export const IntercomOptions = object({
13
13
  vertical_padding: optional(number())
14
14
  });
15
15
  export function useScriptIntercom(_options) {
16
- return useRegistryScript(_options?.key || "intercom", (options) => ({
16
+ return useRegistryScript("intercom", (options) => ({
17
17
  scriptInput: {
18
18
  src: joinURL(`https://widget.intercom.io/widget`, options?.app_id || "")
19
19
  },
@@ -1,6 +1,6 @@
1
1
  import { useRegistryScript } from "../utils.js";
2
2
  export function useScriptLemonSqueezy(_options) {
3
- return useRegistryScript(_options?.key || "lemonSqueezy", () => ({
3
+ return useRegistryScript("lemonSqueezy", () => ({
4
4
  scriptInput: {
5
5
  src: "https://assets.lemonsqueezy.com/lemon.js",
6
6
  crossorigin: false