@nuxt/scripts 0.13.2 → 1.0.0-beta.1

package/dist/runtime/components/GoogleMaps/ScriptGoogleMaps.vue.d.ts

@@ -89,6 +89,20 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * Extra Markers to add to the map.
      */
     markers?: (`${string},${string}` | google.maps.marker.AdvancedMarkerElementOptions)[];
+    /**
+     * Map IDs for light and dark color modes.
+     * When provided, the map will automatically switch styles based on color mode.
+     * Requires @nuxtjs/color-mode or manual colorMode prop.
+     */
+    mapIds?: {
+        light?: string;
+        dark?: string;
+    };
+    /**
+     * Manual color mode control. When provided, overrides auto-detection from @nuxtjs/color-mode.
+     * Accepts 'light', 'dark', or a reactive ref.
+     */
+    colorMode?: "light" | "dark";
 }, {
     readonly googleMaps: Ref<typeof google.maps | undefined, typeof google.maps | undefined>;
     readonly map: ShallowRef<google.maps.Map | undefined>;
@@ -182,6 +196,20 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * Extra Markers to add to the map.
      */
     markers?: (`${string},${string}` | google.maps.marker.AdvancedMarkerElementOptions)[];
+    /**
+     * Map IDs for light and dark color modes.
+     * When provided, the map will automatically switch styles based on color mode.
+     * Requires @nuxtjs/color-mode or manual colorMode prop.
+     */
+    mapIds?: {
+        light?: string;
+        dark?: string;
+    };
+    /**
+     * Manual color mode control. When provided, overrides auto-detection from @nuxtjs/color-mode.
+     * Accepts 'light', 'dark', or a reactive ref.
+     */
+    colorMode?: "light" | "dark";
 }> & Readonly<{
     onError?: (() => any) | undefined;
     onReady?: ((e: {
@@ -205,7 +233,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     height: number | string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     placeholder?: (props: {
-        placeholder: any;
+        placeholder: string;
     }) => any;
 } & {
     loading?: (props: {}) => any;

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsMarkerClusterer.d.vue.ts

@@ -1,7 +1,19 @@
-import type { MarkerClusterer, MarkerClustererOptions } from '@googlemaps/markerclusterer';
 import { type InjectionKey, type ShallowRef } from 'vue';
+export interface MarkerClustererInstance {
+    render: () => void;
+    setMap: (map: google.maps.Map | null) => void;
+    addListener: (event: string, handler: () => void) => void;
+    addMarker: (marker: google.maps.marker.AdvancedMarkerElement | google.maps.Marker, noDraw?: boolean) => void;
+    removeMarker: (marker: google.maps.marker.AdvancedMarkerElement | google.maps.Marker, noDraw?: boolean) => boolean;
+}
+export interface MarkerClustererOptions {
+    markers?: google.maps.marker.AdvancedMarkerElement[];
+    algorithm?: unknown;
+    renderer?: unknown;
+    onClusterClick?: unknown;
+}
 export declare const MARKER_CLUSTERER_INJECTION_KEY: InjectionKey<{
-    markerClusterer: ShallowRef<MarkerClusterer | undefined>;
+    markerClusterer: ShallowRef<MarkerClustererInstance | undefined>;
     requestRerender: () => void;
 }>;
 declare const _default: typeof __VLS_export;
@@ -9,15 +21,15 @@ export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     options?: Omit<MarkerClustererOptions, "map">;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    click: (payload: MarkerClusterer) => any;
-    clusteringbegin: (payload: MarkerClusterer) => any;
-    clusteringend: (payload: MarkerClusterer) => any;
+    click: (payload: MarkerClustererInstance) => any;
+    clusteringbegin: (payload: MarkerClustererInstance) => any;
+    clusteringend: (payload: MarkerClustererInstance) => any;
 }, string, import("vue").PublicProps, Readonly<{
     options?: Omit<MarkerClustererOptions, "map">;
 }> & Readonly<{
-    onClick?: ((payload: MarkerClusterer) => any) | undefined;
-    onClusteringbegin?: ((payload: MarkerClusterer) => any) | undefined;
-    onClusteringend?: ((payload: MarkerClusterer) => any) | undefined;
+    onClick?: ((payload: MarkerClustererInstance) => any) | undefined;
+    onClusteringbegin?: ((payload: MarkerClustererInstance) => any) | undefined;
+    onClusteringend?: ((payload: MarkerClustererInstance) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsMarkerClusterer.vue

@@ -54,9 +54,9 @@ provide(
     requestRerender
   }
 );
-function setupMarkerClustererEventListeners(markerClusterer2) {
+function setupMarkerClustererEventListeners(clusterer) {
   markerClustererEvents.forEach((event) => {
-    markerClusterer2.addListener(event, () => emit(event, markerClusterer2));
+    clusterer.addListener(event, () => emit(event, clusterer));
   });
 }
 </script>

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsMarkerClusterer.vue.d.ts

@@ -1,7 +1,19 @@
-import type { MarkerClusterer, MarkerClustererOptions } from '@googlemaps/markerclusterer';
 import { type InjectionKey, type ShallowRef } from 'vue';
+export interface MarkerClustererInstance {
+    render: () => void;
+    setMap: (map: google.maps.Map | null) => void;
+    addListener: (event: string, handler: () => void) => void;
+    addMarker: (marker: google.maps.marker.AdvancedMarkerElement | google.maps.Marker, noDraw?: boolean) => void;
+    removeMarker: (marker: google.maps.marker.AdvancedMarkerElement | google.maps.Marker, noDraw?: boolean) => boolean;
+}
+export interface MarkerClustererOptions {
+    markers?: google.maps.marker.AdvancedMarkerElement[];
+    algorithm?: unknown;
+    renderer?: unknown;
+    onClusterClick?: unknown;
+}
 export declare const MARKER_CLUSTERER_INJECTION_KEY: InjectionKey<{
-    markerClusterer: ShallowRef<MarkerClusterer | undefined>;
+    markerClusterer: ShallowRef<MarkerClustererInstance | undefined>;
     requestRerender: () => void;
 }>;
 declare const _default: typeof __VLS_export;
@@ -9,15 +21,15 @@ export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     options?: Omit<MarkerClustererOptions, "map">;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    click: (payload: MarkerClusterer) => any;
-    clusteringbegin: (payload: MarkerClusterer) => any;
-    clusteringend: (payload: MarkerClusterer) => any;
+    click: (payload: MarkerClustererInstance) => any;
+    clusteringbegin: (payload: MarkerClustererInstance) => any;
+    clusteringend: (payload: MarkerClustererInstance) => any;
 }, string, import("vue").PublicProps, Readonly<{
     options?: Omit<MarkerClustererOptions, "map">;
 }> & Readonly<{
-    onClick?: ((payload: MarkerClusterer) => any) | undefined;
-    onClusteringbegin?: ((payload: MarkerClusterer) => any) | undefined;
-    onClusteringend?: ((payload: MarkerClusterer) => any) | undefined;
+    onClick?: ((payload: MarkerClustererInstance) => any) | undefined;
+    onClusteringbegin?: ((payload: MarkerClustererInstance) => any) | undefined;
+    onClusteringend?: ((payload: MarkerClustererInstance) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsPinElement.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { inject, shallowRef } from "vue";
+import { inject, onUnmounted, shallowRef } from "vue";
 import { whenever } from "@vueuse/core";
 import { MAP_INJECTION_KEY } from "./ScriptGoogleMaps.vue";
 import { ADVANCED_MARKER_ELEMENT_INJECTION_KEY } from "./ScriptGoogleMapsAdvancedMarkerElement.vue";
@@ -34,4 +34,10 @@ whenever(
     once: true
   }
 );
+onUnmounted(() => {
+  if (advancedMarkerElementContext?.advancedMarkerElement.value && pinElement.value) {
+    advancedMarkerElementContext.advancedMarkerElement.value.content = null;
+  }
+  pinElement.value = void 0;
+});
 </script>

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

@@ -13,7 +13,7 @@ type __VLS_Props = {
     cookieExpiry?: number;
 };
 declare var __VLS_1: {
-    ready: any;
+    ready: boolean;
 }, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;

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

@@ -13,7 +13,7 @@ type __VLS_Props = {
     cookieExpiry?: number;
 };
 declare var __VLS_1: {
-    ready: any;
+    ready: boolean;
 }, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;

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

@@ -14,7 +14,7 @@ type __VLS_Props = {
     trigger?: ElementScriptTrigger;
 };
 declare var __VLS_1: {
-    ready: any;
+    ready: boolean;
 }, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;

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

@@ -14,7 +14,7 @@ type __VLS_Props = {
     trigger?: ElementScriptTrigger;
 };
 declare var __VLS_1: {
-    ready: any;
+    ready: boolean;
 }, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;

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

@@ -64,6 +64,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     getPlaybackRate: () => Promise<number> | undefined;
     setPlaybackRate: (rate: number) => Promise<number> | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    progress: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
     error: (event: import("@vimeo/player").Error, player: Vimeo.Player) => any;
     loaded: (event: import("@vimeo/player").LoadedEvent, player: Vimeo.Player) => any;
     cuechange: (event: import("@vimeo/player").CueChangeEvent, player: Vimeo.Player) => any;
@@ -72,7 +73,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     pause: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
     play: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
     playing: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
-    progress: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
     resize: (event: import("@vimeo/player").ResizeEvent, player: Vimeo.Player) => any;
     seeked: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
     seeking: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
@@ -90,6 +90,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     enterpictureinpicture: (event: never, player: Vimeo.Player) => any;
     leavepictureinpicture: (event: never, player: Vimeo.Player) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onProgress?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
     onError?: ((event: import("@vimeo/player").Error, player: Vimeo.Player) => any) | undefined;
     onLoaded?: ((event: import("@vimeo/player").LoadedEvent, player: Vimeo.Player) => any) | undefined;
     onCuechange?: ((event: import("@vimeo/player").CueChangeEvent, player: Vimeo.Player) => any) | undefined;
@@ -98,7 +99,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     onPause?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
     onPlay?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
     onPlaying?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
-    onProgress?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
     onResize?: ((event: import("@vimeo/player").ResizeEvent, player: Vimeo.Player) => any) | undefined;
     onSeeked?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
     onSeeking?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;

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

@@ -64,6 +64,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     getPlaybackRate: () => Promise<number> | undefined;
     setPlaybackRate: (rate: number) => Promise<number> | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    progress: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
     error: (event: import("@vimeo/player").Error, player: Vimeo.Player) => any;
     loaded: (event: import("@vimeo/player").LoadedEvent, player: Vimeo.Player) => any;
     cuechange: (event: import("@vimeo/player").CueChangeEvent, player: Vimeo.Player) => any;
@@ -72,7 +73,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     pause: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
     play: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
     playing: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
-    progress: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
     resize: (event: import("@vimeo/player").ResizeEvent, player: Vimeo.Player) => any;
     seeked: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
     seeking: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
@@ -90,6 +90,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     enterpictureinpicture: (event: never, player: Vimeo.Player) => any;
     leavepictureinpicture: (event: never, player: Vimeo.Player) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onProgress?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
     onError?: ((event: import("@vimeo/player").Error, player: Vimeo.Player) => any) | undefined;
     onLoaded?: ((event: import("@vimeo/player").LoadedEvent, player: Vimeo.Player) => any) | undefined;
     onCuechange?: ((event: import("@vimeo/player").CueChangeEvent, player: Vimeo.Player) => any) | undefined;
@@ -98,7 +99,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     onPause?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
     onPlay?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
     onPlaying?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
-    onProgress?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
     onResize?: ((event: import("@vimeo/player").ResizeEvent, player: Vimeo.Player) => any) | undefined;
     onSeeked?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
     onSeeking?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;

package/dist/runtime/components/ScriptYouTubePlayer.d.vue.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/components/ScriptYouTubePlayer.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { defu } from "defu";
 import { useHead } from "nuxt/app";
 import { useScriptTriggerElement } from "../composables/useScriptTriggerElement";
@@ -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,46 @@ 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 +80,23 @@ 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 +121,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 +133,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 +153,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

@@ -65,6 +65,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/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/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>;