@nuxt/scripts 0.6.2 → 0.6.4

package/dist/module.mjs

@@ -1,14 +1,14 @@
-import { useNuxt, useLogger, addDevServerHandler, createResolver, addTemplate, tryUseNuxt, logger as logger$1, addImports, defineNuxtModule, addBuildPlugin, addImportsDir, addComponentsDir, addPluginTemplate, hasNuxtModule } from '@nuxt/kit';
+import { useNuxt, useLogger, addDevServerHandler, createResolver, addTemplate, tryUseNuxt, logger as logger$1, defineNuxtModule, addImportsDir, addComponentsDir, addImports, addPluginTemplate, addBuildPlugin, hasNuxtModule } from '@nuxt/kit';
 import { resolvePackageJSON, readPackageJSON } from 'pkg-types';
 import { lt } from 'semver';
 import { resolvePath } from 'mlly';
-import { join, relative, extname } from 'pathe';
+import { join, relative } from 'pathe';
 import { existsSync } from 'node:fs';
-import { pathToFileURL } from 'node:url';
 import { createUnplugin } from 'unplugin';
-import { parseURL, parseQuery, joinURL, hasProtocol } from 'ufo';
 import MagicString from 'magic-string';
 import { walk } from 'estree-walker';
+import { pathToFileURL } from 'node:url';
+import { parseURL, parseQuery, joinURL, hasProtocol } from 'ufo';
 import fsp from 'node:fs/promises';
 import { lazyEventHandler, eventHandler, createError } from 'h3';
 import { fetch } from 'ofetch';
@@ -19,10 +19,7 @@ import { createStorage } from 'unstorage';
 import fsDriver from 'unstorage/drivers/fs-lite';
 import { isCI, provider } from 'std-env';
 import { registry } from './registry.mjs';
-import { GooglaAnalyticsData, GoogleAnalytics, GoogleTagManagerData, GoogleTagManager } from 'third-party-capital';
-import { genTypeImport, genImport } from 'knitwork';
-import { parse } from 'acorn';
-import { transform } from 'esbuild';
+import 'third-party-capital';
 
 const DEVTOOLS_UI_ROUTE = "/__nuxt-scripts";
 const DEVTOOLS_UI_LOCAL_PORT = 3300;
@@ -67,20 +64,39 @@ function setupDevToolsUI(options, resolve, nuxt = useNuxt()) {
   });
 }
 
+function isVue(id, opts = {}) {
+  const { search } = parseURL(decodeURIComponent(pathToFileURL(id).href));
+  if (id.endsWith(".vue") && !search) {
+    return true;
+  }
+  if (!search) {
+    return false;
+  }
+  const query = parseQuery(search);
+  if (query.nuxt_component) {
+    return false;
+  }
+  if (query.macro && (search === "?macro=true" || !opts.type || opts.type.includes("script"))) {
+    return true;
+  }
+  const type = "setup" in query ? "script" : query.type;
+  if (!("vue" in query) || opts.type && !opts.type.includes(type)) {
+    return false;
+  }
+  return true;
+}
+const JS_RE = /\.(?:[cm]?j|t)sx?$/;
+function isJS(id) {
+  const { pathname } = parseURL(decodeURIComponent(pathToFileURL(id).href));
+  return JS_RE.test(pathname);
+}
+
 function NuxtScriptBundleTransformer(options) {
   return createUnplugin(() => {
     return {
       name: "nuxt:scripts:bundler-transformer",
       transformInclude(id) {
-        const { pathname, search } = parseURL(decodeURIComponent(pathToFileURL(id).href));
-        const { type } = parseQuery(search);
-        if (pathname.includes("node_modules/@unhead") || pathname.includes("node_modules/vueuse"))
-          return false;
-        if (pathname.endsWith(".vue") && (type === "script" || !search))
-          return true;
-        if (pathname.match(/\.((c|m)?j|t)sx?$/g))
-          return true;
-        return false;
+        return isVue(id, { type: ["template", "script"] }) || isJS(id);
       },
       async transform(code, id) {
         if (!code.includes("useScript"))
@@ -362,270 +378,58 @@ function installNuxtModule(name, options) {
   }, { rootDir: nuxt.options.rootDir, searchPaths: nuxt.options.modulesDir, ...options });
 }
 
-const HEAD_VAR = "__head";
-const INJECTHEAD_CODE = `const ${HEAD_VAR} =  injectHead()`;
-function getTpcScriptContent(input) {
-  const nuxt = useNuxt();
-  if (!input.data.scripts)
-    throw new Error("input.data has no scripts !");
-  const mainScript = input.data.scripts?.find(({ key }) => key === input.tpcKey);
-  if (!mainScript)
-    throw new Error(`no main script found for ${input.tpcKey} in third-party-capital`);
-  const mainScriptOptions = getScriptInputOption(mainScript);
-  const imports = /* @__PURE__ */ new Set([
-    "import { withQuery } from 'ufo'",
-    "import { useRegistryScript } from '#nuxt-scripts-utils'",
-    "import type { RegistryScriptInput } from '#nuxt-scripts'"
-  ]);
-  const chunks = [];
-  const functionBody = [];
-  const hasParams = mainScript.params?.length;
-  if (input.tpcTypeImport) {
-    imports.add(genTypeImport("third-party-capital", [input.tpcTypeImport]));
-  }
-  if (hasParams) {
-    imports.add(genImport("#nuxt-scripts-validator", ["object", "any"]));
-    chunks.push(`const OptionSchema = object({${mainScript.params?.map((p) => `${p}:  any()`)}})`);
-  }
-  chunks.push(`
-declare global {
-  interface Window extends ${input.tpcTypeImport} {}
-}`);
-  const clientInitCode = [];
-  if (input.data.stylesheets) {
-    if (!functionBody.includes(INJECTHEAD_CODE)) {
-      functionBody.unshift(INJECTHEAD_CODE);
-    }
-    functionBody.push(`${HEAD_VAR}.push({link: ${JSON.stringify(input.data.stylesheets.map((s) => ({ ref: "stylesheet", href: s })))}})`);
-  }
-  for (const script of input.data.scripts) {
-    if ("code" in script)
-      clientInitCode.push(replaceTokenToRuntime(script.code));
-    if (script === mainScript)
-      continue;
-    if ("url" in script) {
-      functionBody.push(`${HEAD_VAR}.push({scripts:{ async: true, src: ${script.url} }},${JSON.stringify(getScriptInputOption(script))})`);
-    }
-  }
-  chunks.push(`export type Input = RegistryScriptInput${hasParams ? "<typeof OptionSchema>" : ""}`);
-  chunks.push(`
-export function ${input.scriptFunctionName}<T extends ${input.tpcTypeImport}>(_options?: Input) {
-${functionBody.join("\n")}
-  return useRegistryScript${hasParams ? "<T, typeof OptionSchema>" : ""}('${input.tpcKey}', options => ({
-        scriptInput: {
-            src: withQuery('${mainScript.url}', {${mainScript.params?.map((p) => `${p}: options?.${p}`)}})
-        },
-        ${nuxt.options.dev ? "schema: OptionSchema," : ""}
-        scriptOptions: {
-            use: ${input.use.toString()},
-            stub: import.meta.client ? undefined :  ${input.stub.toString()},
-            ${mainScriptOptions ? `...(${JSON.stringify(mainScriptOptions)})` : ""}
-        },
-        ${clientInitCode.length ? `clientInit: import.meta.server ? undefined : () => {${clientInitCode.join("\n")}},` : ""}
-    }), _options)
-}`);
-  chunks.unshift(...Array.from(imports));
-  return chunks.join("\n");
-}
-function replaceTokenToRuntime(code) {
-  return code.split(";").map((c) => c.replaceAll(/'?\{\{(.*?)\}\}'?/g, "options.$1")).join(";");
-}
-function getScriptInputOption(script) {
-  if (script.location === "body") {
-    if (script.action === "append") {
-      return { tagPosition: "bodyClose" };
-    }
-    return { tagPosition: "bodyOpen" };
-  }
-  if (script.action === "append") {
-    return { tagPriority: 1 };
-  }
-}
-
-function googleAnalitycsRegistry() {
-  const nuxt = useNuxt();
-  const { dst } = addTemplate({
-    getContents() {
-      return getTpcScriptContent({
-        data: GooglaAnalyticsData,
-        scriptFunctionName: "useScriptGoogleAnalytics",
-        use: () => {
-          return { dataLayer: window.dataLayer, gtag: window.gtag };
-        },
-        // allow dataLayer to be accessed on the server
-        stub: ({ fn }) => {
-          return fn === "dataLayer" ? [] : void 0;
-        },
-        tpcKey: "gtag",
-        tpcTypeImport: "GoogleAnalyticsApi"
-      });
-    },
-    filename: "nuxt-scripts/tpc/google-analytics.ts",
-    write: true
-  });
-  addImports({
-    from: dst,
-    name: "useScriptGoogleAnalytics"
-  });
-  const registry = {
-    label: "Google Tag Manager",
-    category: "tracking",
-    logo: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path fill="#8AB4F8" d="m150.262 245.516l-44.437-43.331l95.433-97.454l46.007 45.091z"/><path fill="#4285F4" d="M150.45 53.938L106.176 8.731L9.36 104.629c-12.48 12.48-12.48 32.713 0 45.207l95.36 95.986l45.09-42.182l-72.654-76.407z"/><path fill="#8AB4F8" d="m246.625 105.37l-96-96c-12.494-12.494-32.756-12.494-45.25 0c-12.495 12.495-12.495 32.757 0 45.252l96 96c12.494 12.494 32.756 12.494 45.25 0c12.495-12.495 12.495-32.757 0-45.251"/><circle cx="127.265" cy="224.731" r="31.273" fill="#246FDB"/></svg>`,
-    import: {
-      name: "useScriptGoogleAnalytics",
-      from: dst
-    },
-    scriptBundling(options) {
-      const data = GoogleAnalytics(options);
-      const mainScript = data.scripts?.find(({ key }) => key === "gtag");
-      if (mainScript && "url" in mainScript && mainScript.url)
-        return mainScript.url;
-      return false;
-    }
-  };
-  nuxt.hook("scripts:registry", (scripts) => {
-    scripts.push(registry);
-  });
-}
-
-function googleTagManagerRegistry() {
-  const nuxt = useNuxt();
-  const { dst } = addTemplate({
-    getContents() {
-      return getTpcScriptContent({
-        data: GoogleTagManagerData,
-        scriptFunctionName: "useScriptGoogleTagManager",
-        use: () => {
-          return { dataLayer: window.dataLayer, google_tag_manager: window.google_tag_manager };
-        },
-        stub: ({ fn }) => {
-          return fn === "dataLayer" ? [] : void 0;
-        },
-        tpcKey: "gtm",
-        tpcTypeImport: "GoogleTagManagerApi"
-      });
-    },
-    filename: "nuxt-scripts/tpc/google-tag-manager.ts",
-    write: true
-  });
-  addImports({
-    from: dst,
-    name: "useScriptGoogleTagManager"
-  });
-  const registry = {
-    label: "Google Tag Manager",
-    category: "tracking",
-    logo: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path fill="#8AB4F8" d="m150.262 245.516l-44.437-43.331l95.433-97.454l46.007 45.091z"/><path fill="#4285F4" d="M150.45 53.938L106.176 8.731L9.36 104.629c-12.48 12.48-12.48 32.713 0 45.207l95.36 95.986l45.09-42.182l-72.654-76.407z"/><path fill="#8AB4F8" d="m246.625 105.37l-96-96c-12.494-12.494-32.756-12.494-45.25 0c-12.495 12.495-12.495 32.757 0 45.252l96 96c12.494 12.494 32.756 12.494 45.25 0c12.495-12.495 12.495-32.757 0-45.251"/><circle cx="127.265" cy="224.731" r="31.273" fill="#246FDB"/></svg>`,
-    import: {
-      name: "useScriptGoogleTagManager",
-      from: dst
-    },
-    scriptBundling(options) {
-      const data = GoogleTagManager(options);
-      const mainScript = data.scripts?.find(({ key }) => key === "gtm");
-      if (mainScript && "url" in mainScript && mainScript.url)
-        return mainScript.url;
-      return false;
-    }
-  };
-  nuxt.hook("scripts:registry", (scripts) => {
-    scripts.push(registry);
-  });
-}
-
-const SCRIPT_RE = /<script[^>]*>([\s\S]*)<\/script>/;
-const checkScripts = () => createUnplugin(() => {
-  return {
-    name: "nuxt-scripts:check-scripts",
-    enforce: "pre",
-    async transform(code, id) {
-      if (!code.includes("useScript"))
-        return;
-      const extName = extname(id);
-      if (extName === ".vue") {
-        const scriptAst = await extractScriptContentAst(code);
-        if (scriptAst) {
-          analyzeNodes(id, scriptAst);
-        }
-      } else if (extName === ".ts" || extName === ".js") {
-        if (!code.includes("defineComponent"))
+function NuxtScriptsCheckScripts() {
+  return createUnplugin(() => {
+    return {
+      name: "nuxt-scripts:check-scripts",
+      transformInclude(id) {
+        return isVue(id, { type: ["script"] });
+      },
+      async transform(code) {
+        if (!code.includes("useScript"))
           return;
-        let result = code;
-        if (extName === ".ts") {
-          result = (await transform(code, { loader: "ts" })).code;
-        }
-        const setupFunction = extractSetupFunction(result);
-        if (setupFunction) {
-          analyzeNodes(id, setupFunction);
-        }
-      }
-      return void 0;
-    }
-  };
-});
-function analyzeNodes(id, nodes) {
-  let name;
-  for (const node of nodes) {
-    if (name) {
-      if (isAwaitingLoad(name, node)) {
-        throw new Error("Awaiting load should not be used at top level of a composable or <script>");
-      }
-    } else {
-      if (node.type === "VariableDeclaration") {
-        name = findScriptVar(node.declarations[0]);
-      }
-    }
-  }
-}
-function findScriptVar(scriptDeclaration) {
-  if (scriptDeclaration.id.type === "ObjectPattern") {
-    for (const property of scriptDeclaration.id.properties) {
-      if (property.type === "Property" && property.key.type === "Identifier" && property.key.name === "$script" && property.value.type === "Identifier") {
-        return property.value.name;
-      }
-    }
-  } else if (scriptDeclaration.id.type === "Identifier") {
-    return scriptDeclaration.id.name;
-  }
-}
-function isAwaitingLoad(name, node) {
-  if (node.type === "ExpressionStatement" && node.expression.type === "AwaitExpression") {
-    const arg = node.expression.argument;
-    if (arg.type === "CallExpression") {
-      const callee = arg.callee;
-      if (callee.type === "MemberExpression" && callee.object.type === "Identifier" && callee.object.name === name) {
-        if (callee.property.type === "Identifier" && callee.property.name === "load") {
-          return true;
+        const ast = this.parse(code);
+        let nameNode;
+        let errorNode;
+        walk(ast, {
+          enter(_node) {
+            if (_node.type === "VariableDeclaration" && _node.declarations?.[0]?.id?.type === "ObjectPattern") {
+              const objPattern = _node.declarations[0]?.id;
+              for (const property of objPattern.properties) {
+                if (property.type === "Property" && property.key.type === "Identifier" && property.key.name === "$script" && property.value.type === "Identifier") {
+                  nameNode = _node;
+                }
+              }
+            }
+            if (nameNode) {
+              let sequence = _node.type === "SequenceExpression" ? _node : null;
+              let assignmentExpression;
+              if (_node.type === "VariableDeclaration") {
+                if (_node.declarations[0]?.init?.type === "SequenceExpression") {
+                  sequence = _node.declarations[0]?.init;
+                  assignmentExpression = _node.declarations[0]?.init?.expressions?.[0];
+                }
+              }
+              if (sequence && !assignmentExpression) {
+                assignmentExpression = sequence.expressions[0]?.type === "AssignmentExpression" ? sequence.expressions[0] : null;
+              }
+              if (assignmentExpression) {
+                const right = assignmentExpression?.right;
+                if (right.callee?.name === "_withAsyncContext") {
+                  if (right.arguments[0]?.body?.name === "$script" || right.arguments[0]?.body?.callee?.object?.name === "$script") {
+                    errorNode = nameNode;
+                  }
+                }
+              }
+            }
+          }
+        });
+        if (errorNode) {
+          return this.error(new Error("You can't use a top-level await on $script as it will never resolve."));
         }
       }
-    }
-  }
-}
-async function extractScriptContentAst(code) {
-  const scriptCode = code.match(SCRIPT_RE);
-  return scriptCode ? parse((await transform(scriptCode[1], { loader: "ts" })).code, {
-    ecmaVersion: "latest",
-    sourceType: "module"
-  }).body : void 0;
-}
-function extractSetupFunction(code) {
-  const ast = parse(code, {
-    ecmaVersion: "latest",
-    sourceType: "module"
+    };
   });
-  const defaultExport = ast.body.find((node) => node.type === "ExportDefaultDeclaration");
-  if (defaultExport && defaultExport.declaration.type === "CallExpression" && defaultExport.declaration.callee.type === "Identifier" && defaultExport.declaration.callee.name === "defineComponent") {
-    const arg = defaultExport.declaration.arguments[0];
-    if (arg && arg.type === "ObjectExpression") {
-      const setupProperty = arg.properties.find((prop) => prop.type === "Property" && prop.key.type === "Identifier" && prop.key.name === "setup");
-      if (setupProperty) {
-        const setupValue = setupProperty.value;
-        if (setupValue.type === "FunctionExpression") {
-          return setupValue.body.body;
-        }
-      }
-    }
-  }
 }
 
 function templatePlugin(config, registry) {
@@ -700,7 +504,6 @@ const module = defineNuxtModule({
         return;
       }
     }
-    addBuildPlugin(checkScripts());
     nuxt.options.alias["#nuxt-scripts-validator"] = resolve(`./runtime/validation/${nuxt.options.dev || nuxt.options._prepare ? "valibot" : "mock"}`);
     nuxt.options.alias["#nuxt-scripts"] = resolve("./runtime/types");
     nuxt.options.alias["#nuxt-scripts-utils"] = resolve("./runtime/utils");
@@ -720,8 +523,6 @@ const module = defineNuxtModule({
       path: resolve("./runtime/components")
     });
     const scripts = registry(resolve);
-    googleAnalitycsRegistry();
-    googleTagManagerRegistry();
     nuxt.hooks.hook("modules:done", async () => {
       const registryScripts = [...scripts];
       await nuxt.hooks.callHook("scripts:registry", registryScripts);
@@ -772,6 +573,9 @@ ${newScripts.map((i) => {
       const scriptMap = /* @__PURE__ */ new Map();
       const { normalizeScriptData } = setupPublicAssetStrategy(config.assets);
       const moduleInstallPromises = /* @__PURE__ */ new Map();
+      addBuildPlugin(NuxtScriptsCheckScripts(), {
+        dev: true
+      });
       addBuildPlugin(NuxtScriptBundleTransformer({
         scripts: registryScriptsWithImport,
         defaultBundle: config.defaultScriptOptions?.bundle,

package/dist/registry.mjs

@@ -1,4 +1,5 @@
 import { joinURL, withQuery, withBase } from 'ufo';
+import { GoogleTagManager, GoogleAnalytics } from 'third-party-capital';
 
 const registry = (resolve) => {
   resolve = resolve || ((s) => s);
@@ -219,6 +220,38 @@ const registry = (resolve) => {
         // key is based on package name
         from: resolve("./runtime/registry/npm")
       }
+    },
+    {
+      label: "Google Tag Manager",
+      category: "tracking",
+      import: {
+        name: "useScriptGoogleTagManager",
+        from: resolve("./runtime/registry/google-tag-manager")
+      },
+      logo: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path fill="#8AB4F8" d="m150.262 245.516l-44.437-43.331l95.433-97.454l46.007 45.091z"/><path fill="#4285F4" d="M150.45 53.938L106.176 8.731L9.36 104.629c-12.48 12.48-12.48 32.713 0 45.207l95.36 95.986l45.09-42.182l-72.654-76.407z"/><path fill="#8AB4F8" d="m246.625 105.37l-96-96c-12.494-12.494-32.756-12.494-45.25 0c-12.495 12.495-12.495 32.757 0 45.252l96 96c12.494 12.494 32.756 12.494 45.25 0c12.495-12.495 12.495-32.757 0-45.251"/><circle cx="127.265" cy="224.731" r="31.273" fill="#246FDB"/></svg>`,
+      scriptBundling(options) {
+        const data = GoogleTagManager(options);
+        const mainScript = data.scripts?.find(({ key }) => key === "gtag");
+        if (mainScript && "url" in mainScript && mainScript.url)
+          return mainScript.url;
+        return false;
+      }
+    },
+    {
+      label: "Google Analytics",
+      category: "tracking",
+      import: {
+        name: "useScriptGoogleAnalytics",
+        from: resolve("./runtime/registry/google-analytics")
+      },
+      logo: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path fill="#8AB4F8" d="m150.262 245.516l-44.437-43.331l95.433-97.454l46.007 45.091z"/><path fill="#4285F4" d="M150.45 53.938L106.176 8.731L9.36 104.629c-12.48 12.48-12.48 32.713 0 45.207l95.36 95.986l45.09-42.182l-72.654-76.407z"/><path fill="#8AB4F8" d="m246.625 105.37l-96-96c-12.494-12.494-32.756-12.494-45.25 0c-12.495 12.495-12.495 32.757 0 45.252l96 96c12.494 12.494 32.756 12.494 45.25 0c12.495-12.495 12.495-32.757 0-45.251"/><circle cx="127.265" cy="224.731" r="31.273" fill="#246FDB"/></svg>`,
+      scriptBundling(options) {
+        const data = GoogleAnalytics(options);
+        const mainScript = data.scripts?.find(({ key }) => key === "gtag");
+        if (mainScript && "url" in mainScript && mainScript.url)
+          return mainScript.url;
+        return false;
+      }
     }
   ];
 };

package/dist/runtime/composables/useScript.js

@@ -20,7 +20,7 @@ export function useScript(input, options) {
     if (!nuxtApp._scripts?.[id]) {
       performance?.mark?.("mark_feature_usage", {
         detail: {
-          feature: `nuxt-scripts:${id}`
+          feature: options.performanceMarkFeature ?? `nuxt-scripts:${id}`
         }
       });
     }

package/dist/runtime/registry/clarity.js

@@ -8,7 +8,7 @@ export const ClarityOptions = object({
 });
 export function useScriptClarity(_options) {
   return useRegistryScript(
-    "clarity",
+    _options?.key || "clarity",
     (options) => ({
       scriptInput: {
         src: `https://www.clarity.ms/tag/${options.id}`

package/dist/runtime/registry/cloudflare-web-analytics.js

@@ -14,7 +14,7 @@ export const CloudflareWebAnalyticsOptions = object({
   spa: optional(boolean())
 });
 export function useScriptCloudflareWebAnalytics(_options) {
-  return useRegistryScript("cloudflareWebAnalytics", (options) => ({
+  return useRegistryScript(_options?.key || "cloudflareWebAnalytics", (options) => ({
     scriptInput: {
       "src": "https://static.cloudflareinsights.com/beacon.min.js",
       "data-cf-beacon": JSON.stringify({ token: options.token, spa: options.spa || true }),

package/dist/runtime/registry/crisp.d.ts

@@ -31,7 +31,7 @@ export declare const CrispOptions: import("valibot").ObjectSchema<{
      */
     readonly cookieExpiry: import("valibot").OptionalSchema<import("valibot").NumberSchema<undefined>, never>;
 }, undefined>;
-export type CrispInput = RegistryScriptInput<typeof CrispOptions, false>;
+export type CrispInput = RegistryScriptInput<typeof CrispOptions, false, false, false>;
 export interface CrispApi {
     push: (...args: any[]) => void;
     is: (name: 'chat:opened' | 'chat:closed' | 'chat:visible' | 'chat:hidden' | 'chat:small' | 'chat:large' | 'session:ongoing' | 'website:available' | 'overlay:opened' | 'overlay:closed' | string) => boolean;

package/dist/runtime/registry/crisp.js

@@ -34,7 +34,7 @@ export const CrispOptions = object({
 });
 export function useScriptCrisp(_options) {
   let readyPromise = Promise.resolve();
-  return useRegistryScript("crisp", (options) => ({
+  return useRegistryScript(_options?.key || "crisp", (options) => ({
     scriptInput: {
       src: "https://client.crisp.chat/l.js"
       // can't be bundled

package/dist/runtime/registry/fathom-analytics.d.ts

@@ -21,7 +21,7 @@ export declare const FathomAnalyticsOptions: import("valibot").ObjectSchema<{
      */
     readonly honorDnt: import("valibot").OptionalSchema<import("valibot").BooleanSchema<undefined>, never>;
 }, undefined>;
-export type FathomAnalyticsInput = RegistryScriptInput<typeof FathomAnalyticsOptions, false>;
+export type FathomAnalyticsInput = RegistryScriptInput<typeof FathomAnalyticsOptions, false, false, false>;
 export interface FathomAnalyticsApi {
     beacon: (ctx: {
         url: string;

package/dist/runtime/registry/fathom-analytics.js

@@ -23,7 +23,7 @@ export const FathomAnalyticsOptions = object({
   honorDnt: optional(boolean())
 });
 export function useScriptFathomAnalytics(_options) {
-  return useRegistryScript("fathomAnalytics", (options) => ({
+  return useRegistryScript(_options?.key || "fathomAnalytics", (options) => ({
     scriptInput: {
       src: "https://cdn.usefathom.com/script.js",
       // can't be bundled

package/dist/runtime/registry/google-adsense.d.ts

@@ -5,7 +5,7 @@ export declare const GoogleAdsenseOptions: import("valibot").ObjectSchema<{
      */
     readonly client: import("valibot").OptionalSchema<import("valibot").StringSchema<undefined>, never>;
 }, undefined>;
-export type GoogleAdsenseInput = RegistryScriptInput<typeof GoogleAdsenseOptions>;
+export type GoogleAdsenseInput = RegistryScriptInput<typeof GoogleAdsenseOptions, true, false, false>;
 export interface GoogleAdsenseApi {
     /**
      * The Google Adsense API.

package/dist/runtime/registry/google-adsense.js

@@ -9,7 +9,7 @@ export const GoogleAdsenseOptions = object({
   client: optional(string())
 });
 export function useScriptGoogleAdsense(_options) {
-  return useRegistryScript("googleAdsense", (options) => ({
+  return useRegistryScript(_options?.key || "googleAdsense", (options) => ({
     scriptInput: {
       src: "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
     },

package/dist/runtime/registry/google-analytics.d.ts

@@ -0,0 +1,13 @@
+import type { GoogleAnalyticsApi } from 'third-party-capital';
+import type { RegistryScriptInput } from '#nuxt-scripts';
+export declare const GoogleAnalyticsOptions: import("valibot").ObjectSchema<{
+    readonly id: import("valibot").StringSchema<undefined>;
+}, undefined>;
+declare global {
+    interface Window extends GoogleAnalyticsApi {
+    }
+}
+export type GoogleAnalyticsInput = RegistryScriptInput<typeof GoogleAnalyticsOptions>;
+export declare function useScriptGoogleAnalytics<T extends GoogleAnalyticsApi>(_options?: GoogleAnalyticsInput): T & {
+    $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
+};

package/dist/runtime/registry/google-analytics.js

@@ -0,0 +1,31 @@
+import { withQuery } from "ufo";
+import { useRegistryScript } from "#nuxt-scripts-utils";
+import { object, string } from "#nuxt-scripts-validator";
+export const GoogleAnalyticsOptions = object({ id: string() });
+export function useScriptGoogleAnalytics(_options) {
+  return useRegistryScript(_options?.key || "google-analytics", (options) => ({
+    scriptInput: {
+      src: withQuery("https://www.googletagmanager.com/gtag/js", { id: options?.id })
+    },
+    schema: import.meta.dev ? void 0 : GoogleAnalyticsOptions,
+    scriptOptions: {
+      use: () => {
+        return { dataLayer: window.dataLayer, gtag: window.gtag };
+      },
+      stub: import.meta.client ? void 0 : ({ fn }) => {
+        return fn === "dataLayer" ? [] : void 0;
+      },
+      performanceMarkFeature: "nuxt-third-parties-ga",
+      ...{ tagPriority: 1 }
+    },
+    // eslint-disable-next-line
+    clientInit: import.meta.server ? void 0 : () => {
+      window.dataLayer = window.dataLayer || [];
+      window.gtag = function gtag() {
+        window.dataLayer.push(arguments);
+      };
+      window.gtag("js", /* @__PURE__ */ new Date());
+      window.gtag("config", options.id);
+    }
+  }), _options);
+}

package/dist/runtime/registry/google-maps.js

@@ -8,7 +8,7 @@ export const GoogleMapsOptions = object({
 });
 export function useScriptGoogleMaps(_options) {
   let readyPromise = Promise.resolve();
-  return useRegistryScript("googleMaps", (options) => {
+  return useRegistryScript(_options?.key || "googleMaps", (options) => {
     const libraries = options?.libraries || ["places"];
     return {
       scriptInput: {

package/dist/runtime/registry/google-tag-manager.d.ts

@@ -0,0 +1,13 @@
+import type { GoogleTagManagerApi } from 'third-party-capital';
+import type { RegistryScriptInput } from '#nuxt-scripts';
+export declare const GoogleTagManagerOptions: import("valibot").ObjectSchema<{
+    readonly id: import("valibot").StringSchema<undefined>;
+}, undefined>;
+declare global {
+    interface Window extends GoogleTagManagerApi {
+    }
+}
+export type GoogleTagManagerInput = RegistryScriptInput<typeof GoogleTagManagerOptions>;
+export declare function useScriptGoogleTagManager<T extends GoogleTagManagerApi>(_options?: GoogleTagManagerInput): T & {
+    $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
+};