@nuxt/scripts 0.13.2 → 1.0.0-beta.12

package/dist/runtime/components/ScriptYouTubePlayer.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { computed, onMounted, ref, watch } from "vue";
 import { defu } from "defu";
 import { useHead } from "nuxt/app";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useScriptTriggerElement } from "../composables/useScriptTriggerElement";
 import { useScriptYouTubePlayer } from "../registry/youtube-player";
 import ScriptAriaLoadingIndicator from "./ScriptAriaLoadingIndicator.vue";
@@ -14,12 +14,14 @@ const props = defineProps({
   playerVars: { type: null, required: false, default: { autoplay: 0, playsinline: 1 } },
   width: { type: Number, required: false, default: 640 },
   height: { type: Number, required: false, default: 360 },
+  ratio: { type: String, required: false, default: "16/9" },
   cookies: { type: Boolean, required: false, default: false },
   playerOptions: { type: null, required: false },
   thumbnailSize: { type: String, required: false, default: "hq720" },
-  webp: { type: Boolean, required: false, default: true }
+  webp: { type: Boolean, required: false, default: true },
+  placeholderObjectFit: { type: String, required: false, default: "cover" }
 });
-const emits = defineEmits(["ready", "state-change", "playback-quality-change", "playback-rate-change", "error"]);
+const emits = defineEmits(["ready", "state-change", "playback-quality-change", "playback-rate-change", "error", "api-change"]);
 const events = [
   "onReady",
   "onStateChange",
@@ -31,24 +33,48 @@ const events = [
 const rootEl = ref();
 const youtubeEl = ref();
 const ready = ref(false);
+const isTriggered = ref(false);
 const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl });
 const script = useScriptYouTubePlayer({
   scriptOptions: {
+    // Use immediate trigger so script loads when ANY player needs it
+    // Each player will wait for its own trigger before creating iframe
     trigger
   }
 });
 const { onLoaded, status } = script;
 const player = ref();
-let clickTriggered = false;
-if (props.trigger === "mousedown" && trigger instanceof Promise) {
+const clickTriggered = ref(false);
+if (trigger instanceof Promise) {
   trigger.then((triggered) => {
     if (triggered) {
-      clickTriggered = true;
+      isTriggered.value = true;
+      if (props.trigger === "mousedown") {
+        clickTriggered.value = true;
+      }
     }
   });
+} else {
+  isTriggered.value = true;
 }
+const stopVideoIdWatch = watch(() => props.videoId, (newId) => {
+  if (ready.value && player.value) {
+    player.value.loadVideoById(newId);
+  }
+});
+onBeforeUnmount(() => {
+  stopVideoIdWatch();
+  player.value?.destroy();
+});
 onMounted(() => {
   onLoaded(async (instance) => {
+    if (!isTriggered.value && trigger instanceof Promise) {
+      const triggered = await trigger;
+      if (!triggered)
+        return;
+    }
+    if (!youtubeEl.value)
+      return;
     const YouTube = instance.YT instanceof Promise ? await instance.YT : instance.YT;
     await new Promise((resolve) => {
       if (typeof YT.Player === "undefined")
@@ -56,22 +82,24 @@ onMounted(() => {
       else
         resolve();
     });
+    if (!youtubeEl.value)
+      return;
     player.value = new YT.Player(youtubeEl.value, {
       host: !props.cookies ? "https://www.youtube-nocookie.com" : "https://www.youtube.com",
-      ...props,
+      videoId: props.videoId,
+      width: props.width,
+      height: props.height,
+      playerVars: props.playerVars,
       ...props.playerOptions,
       events: Object.fromEntries(events.map((event) => [event, (e) => {
         const emitEventName = event.replace(/([A-Z])/g, "-$1").replace("on-", "").toLowerCase();
         emits(emitEventName, e);
         if (event === "onReady") {
           ready.value = true;
-          if (clickTriggered) {
+          if (clickTriggered.value) {
             player.value?.playVideo();
-            clickTriggered = false;
+            clickTriggered.value = false;
           }
-          watch(() => props.videoId, () => {
-            player.value?.loadVideoById(props.videoId);
-          });
         }
       }]))
     });
@@ -96,7 +124,7 @@ const rootAttrs = computed(() => {
       position: "relative",
       backgroundColor: "black",
       width: "100%",
-      aspectRatio: `${props.width}/${props.height}`
+      aspectRatio: props.ratio
     },
     ...trigger instanceof Promise ? trigger.ssrAttrs || {} : {}
   });
@@ -108,12 +136,12 @@ if (import.meta.server) {
   useHead({
     link: [
       {
-        key: `nuxt-script-youtube-img`,
+        key: "nuxt-script-youtube-img-preconnect",
         rel: props.aboveTheFold ? "preconnect" : "dns-prefetch",
         href: "https://i.ytimg.com"
       },
       props.aboveTheFold ? {
-        key: `nuxt-script-youtube-img`,
+        key: `nuxt-script-youtube-img-preload-${props.videoId}`,
         rel: "preload",
         as: "image",
         href: placeholder.value
@@ -128,7 +156,7 @@ const placeholderAttrs = computed(() => {
     loading: props.aboveTheFold ? "eager" : "lazy",
     style: {
       width: "100%",
-      objectFit: "contain",
+      objectFit: props.placeholderObjectFit,
       height: "100%"
     },
     onLoad(payload) {

package/dist/runtime/components/ScriptYouTubePlayer.vue.d.ts

@@ -10,6 +10,7 @@ type __VLS_Props = {
     playerVars?: YT.PlayerVars;
     width?: number;
     height?: number;
+    ratio?: string;
     /**
      * Whether to use youtube-nocookie.com for embedding.
      *
@@ -19,9 +20,15 @@ type __VLS_Props = {
     playerOptions?: YT.PlayerOptions;
     thumbnailSize?: YoutubeThumbnailSize;
     webp?: boolean;
+    /**
+     * Object-fit for the placeholder image.
+     *
+     * @default 'cover'
+     */
+    placeholderObjectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
 };
 declare var __VLS_1: {
-    placeholder: any;
+    placeholder: string;
 }, __VLS_3: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {};
 type __VLS_Slots = {} & {
     placeholder?: (props: typeof __VLS_1) => any;
@@ -42,20 +49,24 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     "state-change": (e: YT.OnStateChangeEvent, target: YT.Player) => any;
     "playback-quality-change": (e: YT.OnPlaybackQualityChangeEvent, target: YT.Player) => any;
     "playback-rate-change": (e: YT.OnPlaybackRateChangeEvent, target: YT.Player) => any;
+    "api-change": (e: YT.PlayerEvent, target: YT.Player) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onError?: ((e: YT.OnErrorEvent, target: YT.Player) => any) | undefined;
     onReady?: ((e: YT.PlayerEvent) => any) | undefined;
     "onState-change"?: ((e: YT.OnStateChangeEvent, target: YT.Player) => any) | undefined;
     "onPlayback-quality-change"?: ((e: YT.OnPlaybackQualityChangeEvent, target: YT.Player) => any) | undefined;
     "onPlayback-rate-change"?: ((e: YT.OnPlaybackRateChangeEvent, target: YT.Player) => any) | undefined;
+    "onApi-change"?: ((e: YT.PlayerEvent, target: YT.Player) => any) | undefined;
 }>, {
     trigger: ElementScriptTrigger;
     width: number;
     height: number;
     playerVars: YT.PlayerVars;
+    ratio: string;
     cookies: boolean;
     thumbnailSize: YoutubeThumbnailSize;
     webp: boolean;
+    placeholderObjectFit: "cover" | "contain" | "fill" | "none" | "scale-down";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/composables/useScript.js

@@ -1,9 +1,9 @@
-import { defu } from "defu";
+import { resolveTrigger } from "#build/nuxt-scripts-trigger-resolver";
 import { useScript as _useScript } from "@unhead/vue/scripts";
-import { reactive } from "vue";
-import { onNuxtReady, useNuxtApp, useRuntimeConfig, injectHead } from "nuxt/app";
+import { defu } from "defu";
+import { injectHead, onNuxtReady, useHead, useNuxtApp, useRuntimeConfig } from "nuxt/app";
+import { reactive, ref } from "vue";
 import { logger } from "../logger.js";
-import { resolveTrigger } from "#build/nuxt-scripts-trigger-resolver";
 function useNuxtScriptRuntimeConfig() {
   return useRuntimeConfig().public["nuxt-scripts"];
 }
@@ -13,6 +13,27 @@ export function resolveScriptKey(input) {
 export function useScript(input, options) {
   input = typeof input === "string" ? { src: input } : input;
   options = defu(options, useNuxtScriptRuntimeConfig()?.defaultScriptOptions);
+  if (options.partytown) {
+    const src = input.src;
+    if (!src) {
+      throw new Error("useScript with partytown requires a src");
+    }
+    useHead({
+      script: [{ src, type: "text/partytown" }]
+    });
+    const nuxtApp2 = useNuxtApp();
+    nuxtApp2.$scripts = nuxtApp2.$scripts || reactive({});
+    const status = ref("loaded");
+    const stub = {
+      id: src,
+      status,
+      load: () => Promise.resolve({}),
+      remove: () => false,
+      entry: void 0
+    };
+    nuxtApp2.$scripts[src] = stub;
+    return stub;
+  }
   if (import.meta.dev && options.bundle === "unsupported") {
     console.warn("[Nuxt Scripts] Bundling is not supported for dynamic script sources. Static URLs are required for bundling.");
     options.bundle = false;
@@ -23,8 +44,8 @@ export function useScript(input, options) {
       options.trigger = resolved;
     }
   }
-  const id = String(resolveScriptKey(input));
   const nuxtApp = useNuxtApp();
+  const id = String(resolveScriptKey(input));
   options.head = options.head || injectHead();
   if (!options.head) {
     throw new Error("useScript() has been called without Nuxt context.");
@@ -65,6 +86,16 @@ export function useScript(input, options) {
     }
     return _load();
   };
+  instance.reload = async () => {
+    instance.remove();
+    const reloadInput = typeof input === "string" ? { src: input, key: `${id}-${Date.now()}` } : { ...input, key: `${id}-${Date.now()}` };
+    const reloaded = _useScript(reloadInput, { ...options, trigger: "client" });
+    Object.assign(instance, {
+      status: reloaded.status,
+      entry: reloaded.entry
+    });
+    return reloaded.load();
+  };
   nuxtApp.$scripts[id] = instance;
   if (import.meta.dev && import.meta.client) {
     let syncScripts = function() {

package/dist/runtime/composables/useScriptEventPage.js

@@ -1,5 +1,5 @@
-import { useNuxtApp, useRoute, injectHead } from "nuxt/app";
-import { ref, onScopeDispose } from "vue";
+import { injectHead, useNuxtApp, useRoute } from "nuxt/app";
+import { onScopeDispose, ref } from "vue";
 export function useScriptEventPage(onChange) {
   const nuxt = useNuxtApp();
   const route = useRoute();

package/dist/runtime/composables/useScriptTriggerConsent.js

@@ -1,5 +1,5 @@
+import { onNuxtReady, requestIdleCallback, tryUseNuxtApp } from "nuxt/app";
 import { isRef, ref, toValue, watch } from "vue";
-import { tryUseNuxtApp, onNuxtReady, requestIdleCallback } from "nuxt/app";
 export function useScriptTriggerConsent(options) {
   if (import.meta.server)
     return new Promise(() => {

package/dist/runtime/composables/useScriptTriggerElement.js

@@ -2,7 +2,7 @@ import {
   useEventListener,
   useIntersectionObserver
 } from "@vueuse/core";
-import { tryOnScopeDispose, tryOnMounted } from "@vueuse/shared";
+import { tryOnMounted, tryOnScopeDispose } from "@vueuse/shared";
 import { watch } from "vue";
 function useElementVisibilityPromise(element) {
   let observer;

package/dist/runtime/composables/useScriptTriggerIdleTimeout.js

@@ -1,5 +1,5 @@
-import { tryOnScopeDispose } from "@vueuse/shared";
 import { useTimeoutFn } from "@vueuse/core";
+import { tryOnScopeDispose } from "@vueuse/shared";
 import { onNuxtReady } from "nuxt/app";
 export function useScriptTriggerIdleTimeout(options) {
   if (import.meta.server) {

package/dist/runtime/composables/useScriptTriggerServiceWorker.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Create a trigger that loads a script after the service worker is controlling the page.
+ * Falls back to immediate loading if service workers are not supported or after timeout.
+ */
+export declare function useScriptTriggerServiceWorker(options?: {
+    timeout?: number;
+}): Promise<boolean>;

package/dist/runtime/composables/useScriptTriggerServiceWorker.js

@@ -0,0 +1,39 @@
+import { tryOnScopeDispose } from "@vueuse/shared";
+export function useScriptTriggerServiceWorker(options) {
+  if (import.meta.server)
+    return new Promise(() => {
+    });
+  const timeout = options?.timeout ?? 3e3;
+  return new Promise((resolve) => {
+    if (!("serviceWorker" in navigator)) {
+      resolve(true);
+      return;
+    }
+    let resolved = false;
+    const done = () => {
+      if (resolved)
+        return;
+      resolved = true;
+      resolve(true);
+    };
+    if (navigator.serviceWorker.controller) {
+      done();
+      return;
+    }
+    const onControllerChange = () => {
+      navigator.serviceWorker.removeEventListener("controllerchange", onControllerChange);
+      done();
+    };
+    navigator.serviceWorker.addEventListener("controllerchange", onControllerChange);
+    const timer = setTimeout(() => {
+      navigator.serviceWorker.removeEventListener("controllerchange", onControllerChange);
+      console.warn("[nuxt-scripts] Service worker not controlling after timeout, loading scripts anyway");
+      done();
+    }, timeout);
+    tryOnScopeDispose(() => {
+      navigator.serviceWorker.removeEventListener("controllerchange", onControllerChange);
+      clearTimeout(timer);
+      resolve(false);
+    });
+  });
+}

package/dist/runtime/npm-script-stub.d.ts

@@ -0,0 +1,20 @@
+import type { Ref } from 'vue';
+import type { NuxtUseScriptOptions } from './types.js';
+export interface NpmScriptStubOptions {
+    key: string;
+    use?: () => any;
+    clientInit?: () => void | Promise<any>;
+    trigger?: NuxtUseScriptOptions['trigger'];
+}
+export interface NpmScriptStub<T = any> {
+    status: Ref<'awaitingLoad' | 'loading' | 'loaded' | 'error'>;
+    load: () => Promise<void>;
+    onLoaded: (callback: (api: T) => void) => void;
+    proxy: T;
+    $script?: any;
+}
+/**
+ * Creates a script stub for NPM-only packages (no external script tag)
+ * Manages lifecycle and status without relying on script tag loading
+ */
+export declare function createNpmScriptStub<T = any>(options: NpmScriptStubOptions): NpmScriptStub<T>;

package/dist/runtime/npm-script-stub.js

@@ -0,0 +1,73 @@
+import { ref } from "vue";
+import { logger } from "./logger.js";
+export function createNpmScriptStub(options) {
+  const status = ref("awaitingLoad");
+  const loadedCallbacks = [];
+  let initPromise = null;
+  let hasInitialized = false;
+  const proxy = options.use?.() || {};
+  const stub = {
+    status,
+    proxy,
+    async load() {
+      if (hasInitialized || status.value !== "awaitingLoad")
+        return;
+      hasInitialized = true;
+      status.value = "loading";
+      try {
+        if (options.clientInit) {
+          console.log(`[NpmScriptStub] Initializing ${options.key}...`);
+          initPromise = Promise.resolve(options.clientInit());
+          await initPromise;
+          console.log(`[NpmScriptStub] ${options.key} initialized successfully`);
+        }
+        status.value = "loaded";
+        loadedCallbacks.forEach((cb) => {
+          try {
+            cb(proxy);
+          } catch (error) {
+            logger.error(`[NpmScriptStub] Error in onLoaded callback for ${options.key}:`, error);
+          }
+        });
+      } catch (error) {
+        logger.error(`[NpmScriptStub] Failed to initialize ${options.key}:`, error);
+        status.value = "error";
+      }
+    },
+    onLoaded(callback) {
+      if (status.value === "loaded") {
+        callback(proxy);
+      } else {
+        loadedCallbacks.push(callback);
+      }
+    },
+    // Mock $script for compatibility with useScript API
+    get $script() {
+      return {
+        status: status.value,
+        load: stub.load
+      };
+    }
+  };
+  if (options.trigger) {
+    if (typeof options.trigger === "function") {
+      const res = options.trigger(() => stub.load());
+      if (res && typeof res === "object" && "then" in res)
+        res.then(() => stub.load());
+    } else if (options.trigger === "manual") {
+    } else if (options.trigger === "onNuxtReady") {
+      import("nuxt/app").then(({ onNuxtReady }) => {
+        onNuxtReady(() => stub.load());
+      });
+    } else if (options.trigger === "client") {
+      if (import.meta.client) {
+        stub.load();
+      }
+    }
+  } else {
+    if (import.meta.client) {
+      stub.load();
+    }
+  }
+  return stub;
+}

package/dist/runtime/registry/clarity.js

@@ -1,5 +1,5 @@
+import { minLength, object, pipe, string } from "#nuxt-scripts-validator";
 import { useRegistryScript } from "../utils.js";
-import { minLength, object, string, pipe } from "#nuxt-scripts-validator";
 export const ClarityOptions = object({
   /**
    * The Clarity token.
@@ -7,30 +7,26 @@ export const ClarityOptions = object({
   id: pipe(string(), minLength(10))
 });
 export function useScriptClarity(_options) {
-  return useRegistryScript(
-    "clarity",
-    (options) => ({
-      scriptInput: {
-        src: `https://www.clarity.ms/tag/${options.id}`
-      },
-      schema: import.meta.dev ? ClarityOptions : void 0,
-      scriptOptions: {
-        use() {
-          return {
-            // @ts-expect-error untyped
-            clarity: Object.assign(function(...params) {
-              const clarity = window.clarity;
-              return clarity.apply(this, params);
-            }, window.clarity)
-          };
-        }
-      },
-      clientInit: import.meta.server ? void 0 : () => {
-        window.clarity = window.clarity || function(...params) {
-          (window.clarity.q = window.clarity.q || []).push(params);
+  return useRegistryScript("clarity", (options) => ({
+    scriptInput: {
+      src: `https://www.clarity.ms/tag/${options.id}`
+    },
+    schema: import.meta.dev ? ClarityOptions : void 0,
+    scriptOptions: {
+      use() {
+        return {
+          // @ts-expect-error untyped
+          clarity: Object.assign(function(...params) {
+            const clarity = window.clarity;
+            return clarity.apply(this, params);
+          }, window.clarity)
         };
       }
-    }),
-    _options
-  );
+    },
+    clientInit: import.meta.server ? void 0 : () => {
+      window.clarity = window.clarity || function(...params) {
+        (window.clarity.q = window.clarity.q || []).push(params);
+      };
+    }
+  }), _options);
 }

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

@@ -1,5 +1,5 @@
-import { useRegistryScript } from "../utils.js";
 import { boolean, minLength, object, optional, pipe, string } from "#nuxt-scripts-validator";
+import { useRegistryScript } from "../utils.js";
 export const CloudflareWebAnalyticsOptions = object({
   /**
    * The Cloudflare Web Analytics token.

package/dist/runtime/registry/crisp.js

@@ -1,5 +1,5 @@
+import { number, object, optional, string } from "#nuxt-scripts-validator";
 import { useRegistryScript } from "../utils.js";
-import { object, string, optional, number } from "#nuxt-scripts-validator";
 export const CrispOptions = object({
   /**
    * The Crisp ID.

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

@@ -1,5 +1,5 @@
+import { boolean, number, object, optional, string } from "#nuxt-scripts-validator";
 import { useRegistryScript } from "../utils.js";
-import { object, optional, string, boolean, number } from "#nuxt-scripts-validator";
 export const DatabuddyAnalyticsOptions = object({
   // Required
   clientId: string(),

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

@@ -1,5 +1,5 @@
-import { useRegistryScript } from "../utils.js";
 import { boolean, literal, object, optional, string, union } from "#nuxt-scripts-validator";
+import { useRegistryScript } from "../utils.js";
 export const FathomAnalyticsOptions = object({
   /**
    * The Fathom Analytics site ID.

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

@@ -1,6 +1,6 @@
+import { boolean, object, optional, string } from "#nuxt-scripts-validator";
 import { useHead } from "nuxt/app";
 import { useRegistryScript } from "../utils.js";
-import { object, string, optional, boolean } from "#nuxt-scripts-validator";
 export const GoogleAdsenseOptions = object({
   /**
    * The Google Adsense ID.

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

@@ -1,6 +1,6 @@
-import { withQuery } from "ufo";
+import { object, optional, string } from "#nuxt-scripts-validator";
 import { useRegistryScript } from "#nuxt-scripts/utils";
-import { object, string, optional } from "#nuxt-scripts-validator";
+import { withQuery } from "ufo";
 export const GoogleAnalyticsOptions = object({
   id: optional(string()),
   // The GA4 measurement ID (format: G-XXXXXXXX)

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

@@ -15,7 +15,7 @@ declare global {
     interface Window {
         google: {
             maps: {
-                __ib__(): void;
+                __ib__: () => void;
             };
         };
     }

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

@@ -1,6 +1,6 @@
+import { array, literal, object, optional, string, union } from "#nuxt-scripts-validator";
 import { withQuery } from "ufo";
 import { useRegistryScript } from "../utils.js";
-import { array, literal, object, optional, string, union } from "#nuxt-scripts-validator";
 export const GoogleMapsOptions = object({
   apiKey: string(),
   libraries: optional(array(string())),

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

@@ -0,0 +1,27 @@
+import type { RegistryScriptInput } from '#nuxt-scripts/types';
+export declare const GoogleRecaptchaOptions: import("valibot").ObjectSchema<{
+    readonly siteKey: import("valibot").StringSchema<undefined>;
+    readonly enterprise: import("valibot").OptionalSchema<import("valibot").BooleanSchema<undefined>, undefined>;
+    readonly recaptchaNet: import("valibot").OptionalSchema<import("valibot").BooleanSchema<undefined>, undefined>;
+    readonly hl: import("valibot").OptionalSchema<import("valibot").StringSchema<undefined>, undefined>;
+}, undefined>;
+export type GoogleRecaptchaInput = RegistryScriptInput<typeof GoogleRecaptchaOptions>;
+export interface GoogleRecaptchaApi {
+    grecaptcha: {
+        ready: (callback: () => void) => void;
+        execute: (siteKey: string, options: {
+            action: string;
+        }) => Promise<string>;
+        enterprise?: {
+            ready: (callback: () => void) => void;
+            execute: (siteKey: string, options: {
+                action: string;
+            }) => Promise<string>;
+        };
+    };
+}
+declare global {
+    interface Window extends GoogleRecaptchaApi {
+    }
+}
+export declare function useScriptGoogleRecaptcha<T extends GoogleRecaptchaApi>(_options?: GoogleRecaptchaInput): import("#nuxt-scripts/types").UseScriptContext<T>;

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

@@ -0,0 +1,45 @@
+import { boolean, object, optional, string } from "#nuxt-scripts-validator";
+import { useRegistryScript } from "#nuxt-scripts/utils";
+import { withQuery } from "ufo";
+export const GoogleRecaptchaOptions = object({
+  siteKey: string(),
+  // Use enterprise.js instead of api.js
+  enterprise: optional(boolean()),
+  // Use recaptcha.net (works in China)
+  recaptchaNet: optional(boolean()),
+  // Language code
+  hl: optional(string())
+});
+export function useScriptGoogleRecaptcha(_options) {
+  return useRegistryScript(_options?.key || "googleRecaptcha", (options) => {
+    const baseUrl = options?.recaptchaNet ? "https://www.recaptcha.net/recaptcha" : "https://www.google.com/recaptcha";
+    const scriptPath = options?.enterprise ? "enterprise.js" : "api.js";
+    return {
+      scriptInput: {
+        src: withQuery(`${baseUrl}/${scriptPath}`, {
+          render: options?.siteKey,
+          hl: options?.hl
+        }),
+        crossorigin: false
+      },
+      schema: import.meta.dev ? GoogleRecaptchaOptions : void 0,
+      scriptOptions: {
+        use() {
+          return { grecaptcha: window.grecaptcha };
+        }
+      },
+      clientInit: import.meta.server ? void 0 : () => {
+        const w = window;
+        w.grecaptcha = w.grecaptcha || {};
+        const readyFn = function(cb) {
+          (w.___grecaptcha_cfg = w.___grecaptcha_cfg || {}).fns = (w.___grecaptcha_cfg.fns || []).concat([cb]);
+        };
+        w.grecaptcha.ready = w.grecaptcha.ready || readyFn;
+        if (options?.enterprise) {
+          w.grecaptcha.enterprise = w.grecaptcha.enterprise || {};
+          w.grecaptcha.enterprise.ready = w.grecaptcha.enterprise.ready || readyFn;
+        }
+      }
+    };
+  }, _options);
+}