@nuxt/scripts 0.6.6 → 0.7.0

package/dist/runtime/components/ScriptStripePricingTable.vue

@@ -26,11 +26,11 @@ const containerEl = ref<HTMLDivElement | undefined>()
 const instance = useScript(`https://js.stripe.com/v3/pricing-table.js`, {
   trigger: useScriptTriggerElement({ trigger: props.trigger, el: rootEl }),
 })
-const { $script } = instance
+const { onLoaded, status } = instance
 
 const pricingTable = ref<HTMLElement | undefined>()
 onMounted(() => {
-  $script.then(() => {
+  onLoaded(() => {
     const StripePricingTable = window.customElements.get('stripe-pricing-table')!
     const stripePricingTable = new StripePricingTable()
     stripePricingTable.setAttribute('publishable-key', props.publishableKey)
@@ -45,7 +45,7 @@ onMounted(() => {
     rootEl.value!.appendChild(stripePricingTable)
     emit('ready', instance)
   })
-  watch($script.status, (status) => {
+  watch(status, (status) => {
     if (status === 'error') {
       emit('error')
     }
@@ -60,9 +60,9 @@ onBeforeUnmount(() => {
 <template>
   <div ref="rootEl">
     <div ref="containerEl" />
-    <slot v-if="$script.status.value === 'loading'" name="loading" />
-    <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
-    <slot v-else-if="$script.status.value === 'error'" name="error" />
+    <slot v-if="status === 'loading'" name="loading" />
+    <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
+    <slot v-else-if="status === 'error'" name="error" />
     <slot />
   </div>
 </template>

package/dist/runtime/components/ScriptVimeoPlayer.vue

@@ -8,12 +8,7 @@ import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
 import { useScriptVimeoPlayer } from '../registry/vimeo-player'
 import { useAsyncData, useHead } from '#imports'
 
-const props = withDefaults(defineProps<{
-  // custom
-  trigger?: ElementScriptTrigger
-  placeholderAttrs?: ImgHTMLAttributes
-  rootAttrs?: HTMLAttributes
-  aboveTheFold?: boolean
+interface VimeoOptions {
   // copied from @types/vimeo__player
   id?: number | undefined
   url?: string | undefined
@@ -25,7 +20,7 @@ const props = withDefaults(defineProps<{
   controls?: boolean | undefined
   dnt?: boolean | undefined
   height?: number | undefined
-  // eslint-disable-next-line vue/prop-name-casing
+
   interactive_params?: string | undefined
   keyboard?: boolean | undefined
   loop?: boolean | undefined
@@ -42,12 +37,19 @@ const props = withDefaults(defineProps<{
   title?: boolean | undefined
   transparent?: boolean | undefined
   width?: number | undefined
+}
+
+const props = withDefaults(defineProps<{
+  // custom
+  trigger?: ElementScriptTrigger
+  placeholderAttrs?: ImgHTMLAttributes
+  rootAttrs?: HTMLAttributes
+  aboveTheFold?: boolean
+  vimeoOptions?: VimeoOptions
+  id?: number | undefined
+  url?: string | undefined
 }>(), {
   trigger: 'mousedown',
-  width: 640,
-  height: 480,
-  loop: false,
-  controls: true,
 })
 
 const emits = defineEmits<TEmits>()
@@ -122,7 +124,7 @@ if (props.trigger === 'mousedown') {
   })
 }
 const ready = ref(false)
-const { $script } = useScriptVimeoPlayer({
+const { onLoaded, status } = useScriptVimeoPlayer({
   scriptOptions: {
     trigger,
   },
@@ -140,12 +142,16 @@ if (import.meta.server) {
   })
 }
 
+const id = computed(() => {
+  return props.vimeoOptions?.id || props.id
+})
+
 const { data: payload } = useAsyncData(
-  `vimeo-embed:${props.id}`,
+  `vimeo-embed:${id.value}`,
   // TODO ideally we cache this
-  () => $fetch(`https://vimeo.com/api/v2/video/${props.id}.json`).then(res => (res as any)[0]),
+  () => $fetch(`https://vimeo.com/api/v2/video/${id.value}.json`).then(res => (res as any)[0]),
   {
-    watch: [() => props.id],
+    watch: [id],
   },
 )
 
@@ -169,10 +175,26 @@ defineExpose({
   setPlaybackRate: (rate: number) => player?.setPlaybackRate(rate),
 })
 
+const width = computed(() => {
+  return props.vimeoOptions?.width || elVimeo.value?.parentNode?.offsetWidth || 640
+})
+
+const height = computed(() => {
+  return props.vimeoOptions?.height || elVimeo.value?.parentNode?.offsetHeight || 480
+})
+
 onMounted(() => {
-  $script.then(async ({ Vimeo }) => {
-    // filter props for false values
-    player = new Vimeo.Player(elVimeo.value, props)
+  onLoaded(async ({ Vimeo }) => {
+    const vimeoOptions = props.vimeoOptions || {}
+    if (!vimeoOptions.id && props.id) {
+      vimeoOptions.id = props.id
+    }
+    if (!vimeoOptions.url && props.url) {
+      vimeoOptions.url = props.url
+    }
+    vimeoOptions.width = width.value
+    vimeoOptions.height = height.value
+    player = new Vimeo.Player(elVimeo.value, vimeoOptions)
     if (clickTriggered) {
       player!.play()
       clickTriggered = false
@@ -186,35 +208,35 @@ onMounted(() => {
       })
     }
   })
+})
 
-  watch(() => props.id, (v) => {
-    if (v) {
-      player?.loadVideo(Number(v))
-    }
-  })
-  watch($script.status, (status) => {
-    if (status === 'error') {
-      // @ts-expect-error untyped
-      emits('error')
-    }
-  })
+watch(() => props.id, (v) => {
+  if (v) {
+    player?.loadVideo(Number(v))
+  }
+})
+watch(status, (status) => {
+  if (status === 'error') {
+    // @ts-expect-error untyped
+    emits('error')
+  }
 })
 
 const rootAttrs = computed(() => {
   return defu(props.rootAttrs, {
-    'aria-busy': $script.status.value === 'loading',
-    'aria-label': $script.status.value === 'awaitingLoad'
+    'aria-busy': status.value === 'loading',
+    'aria-label': status.value === 'awaitingLoad'
       ? 'Vimeo Player - Placeholder'
-      : $script.status.value === 'loading'
+      : status.value === 'loading'
         ? 'Vimeo Player - Loading'
         : 'Vimeo Player - Loaded',
     'aria-live': 'polite',
     'role': 'application',
     'style': {
       maxWidth: '100%',
-      width: `${props.width}px`,
-      height: `'auto'`,
-      aspectRatio: `${props.width}/${props.height}`,
+      width: `${width.value}px`,
+      height: 'auto',
+      aspectRatio: `16/9`,
       position: 'relative',
       backgroundColor: 'black',
     },
@@ -242,19 +264,19 @@ onBeforeUnmount(() => player?.unload())
 
 <template>
   <div ref="rootEl" v-bind="rootAttrs">
-    <div v-show="ready" ref="elVimeo" class="vimeo-player" style="width: 100%; height: 100%; max-width: 100%;" />
+    <div v-show="ready" ref="elVimeo" class="vimeo-player" />
     <slot v-if="!ready" v-bind="payload" :placeholder="placeholder" name="placeholder">
       <img v-if="placeholder" v-bind="placeholderAttrs">
     </slot>
-    <slot v-if="$script.status.value === 'loading'" name="loading">
+    <slot v-if="status === 'loading'" name="loading">
       <ScriptLoadingIndicator color="white" />
     </slot>
-    <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
-    <slot v-else-if="$script.status.value === 'error'" name="error" />
+    <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
+    <slot v-else-if="status === 'error'" name="error" />
     <slot />
   </div>
 </template>
 
 <style>
-.vimeo-player iframe{max-width:100%!important}
+.vimeo-player iframe{aspect-ratio:16/9;height:auto;max-width:100%!important;width:100%}
 </style>

package/dist/runtime/components/ScriptYouTubePlayer.vue

@@ -44,7 +44,7 @@ const rootEl = ref()
 const youtubeEl = ref()
 const ready = ref(false)
 const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl })
-const { $script } = useScriptYouTubePlayer({
+const { onLoaded, status } = useScriptYouTubePlayer({
   scriptOptions: {
     trigger,
   },
@@ -58,7 +58,7 @@ if (props.trigger === 'mousedown') {
   })
 }
 onMounted(() => {
-  $script.then(async (instance) => {
+  onLoaded(async (instance) => {
     const YouTube: typeof YT & { ready: (fn: () => void) => void } = await instance.YT
     await new Promise<void>((resolve) => {
       if (typeof YT.Player === 'undefined')
@@ -85,7 +85,7 @@ onMounted(() => {
       }])),
     })
   })
-  watch($script.status, (status) => {
+  watch(status, (status) => {
     if (status === 'error') {
       // @ts-expect-error untyped
       emits('error')
@@ -99,10 +99,10 @@ defineExpose({
 
 const rootAttrs = computed(() => {
   return defu(props.rootAttrs, {
-    'aria-busy': $script.status.value === 'loading',
-    'aria-label': $script.status.value === 'awaitingLoad'
+    'aria-busy': status.value === 'loading',
+    'aria-label': status.value === 'awaitingLoad'
       ? 'YouTube Player - Placeholder'
-      : $script.status.value === 'loading'
+      : status.value === 'loading'
         ? 'YouTube Player - Loading'
         : 'YouTube Player - Loaded',
     'aria-live': 'polite',
@@ -161,11 +161,11 @@ const placeholderAttrs = computed(() => {
     <slot v-if="!ready" :placeholder="placeholder" name="placeholder">
       <img v-bind="placeholderAttrs">
     </slot>
-    <slot v-if="$script.status.value === 'loading'" name="loading">
+    <slot v-if="status === 'loading'" name="loading">
       <ScriptLoadingIndicator />
     </slot>
-    <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
-    <slot v-else-if="$script.status.value === 'error'" name="error" />
+    <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
+    <slot v-else-if="status === 'error'" name="error" />
     <slot />
   </div>
 </template>

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

@@ -1,5 +1,10 @@
 import type { UseScriptInput, VueScriptInstance } from '@unhead/vue';
+import type { UseFunctionType, AsAsyncFunctionValues } from '@unhead/schema';
 import type { NuxtUseScriptOptions } from '#nuxt-scripts';
-export declare function useScript<T extends Record<string | symbol, any>>(input: UseScriptInput, options?: NuxtUseScriptOptions): T & {
+export type UseScriptContext<T extends Record<symbol | string, any>> = (Promise<T> & VueScriptInstance<T>) & AsAsyncFunctionValues<T> & {
+    /**
+     * @deprecated Use top-level functions instead.
+     */
     $script: Promise<T> & VueScriptInstance<T>;
 };
+export declare function useScript<T extends Record<symbol | string, any> = Record<symbol | string, any>, U = Record<symbol | string, any>>(input: UseScriptInput, options?: NuxtUseScriptOptions<T, U>): UseScriptContext<UseFunctionType<NuxtUseScriptOptions<T, U>, T>>;

package/dist/runtime/composables/useScript.js

@@ -1,4 +1,4 @@
-import { hashCode } from "@unhead/shared";
+import { resolveScriptKey } from "unhead";
 import { defu } from "defu";
 import { useScript as _useScript } from "@unhead/vue";
 import { injectHead, onNuxtReady, useNuxtApp, useRuntimeConfig, reactive } from "#imports";
@@ -11,7 +11,7 @@ export function useScript(input, options) {
   if (options.trigger === "onNuxtReady")
     options.trigger = onNuxtReady;
   const nuxtApp = useNuxtApp();
-  const id = input.key || input.src || hashCode(typeof input.innerHTML === "string" ? input.innerHTML : "");
+  const id = resolveScriptKey(input);
   nuxtApp.$scripts = nuxtApp.$scripts || reactive({});
   if (nuxtApp.$scripts[id]) {
     return nuxtApp.$scripts[id];
@@ -29,7 +29,7 @@ export function useScript(input, options) {
   nuxtApp.$scripts[id] = instance;
   if (import.meta.dev && import.meta.client) {
     let syncScripts = function() {
-      nuxtApp._scripts[instance.$script.id] = payload;
+      nuxtApp._scripts[instance.id] = payload;
       nuxtApp.hooks.callHook("scripts:updated", { scripts: nuxtApp._scripts });
     };
     const payload = {
@@ -39,21 +39,21 @@ export function useScript(input, options) {
       events: []
     };
     nuxtApp._scripts = nuxtApp._scripts || {};
-    if (!nuxtApp._scripts[instance.$script.id]) {
+    if (!nuxtApp._scripts[instance.id]) {
       const head = injectHead();
       head.hooks.hook("script:updated", (ctx) => {
-        if (ctx.script.id !== instance.$script.id)
+        if (ctx.script.id !== instance.id)
           return;
         payload.events.push({
           type: "status",
           status: ctx.script.status,
           at: Date.now()
         });
-        payload.$script = instance.$script;
+        payload.$script = instance;
         syncScripts();
       });
       head.hooks.hook("script:instance-fn", (ctx) => {
-        if (ctx.script.id !== instance.$script.id || String(ctx.fn).startsWith("__v_"))
+        if (ctx.script.id !== instance.id || String(ctx.fn).startsWith("__v_"))
           return;
         payload.events.push({
           type: "fn-call",
@@ -62,7 +62,7 @@ export function useScript(input, options) {
         });
         syncScripts();
       });
-      payload.$script = instance.$script;
+      payload.$script = instance;
       payload.events.push({
         type: "status",
         status: "awaitingLoad",

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

@@ -2,7 +2,4 @@ import type { TrackedPage } from '#nuxt-scripts';
 export declare function useScriptEventPage(onChange?: (payload: TrackedPage) => void): import("vue").Ref<{
     title?: string | undefined;
     path: string;
-}, TrackedPage | {
-    title?: string | undefined;
-    path: string;
 }>;

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

@@ -1,13 +1,4 @@
 import type { RegistryScriptInput } from '#nuxt-scripts';
-/**
- * <script type="text/javascript">
- *     (function(c,l,a,r,i,t,y){
- *         c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
- *         t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
- *         y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
- *     })(window, document, "clarity", "script", "mpy5c6k7xi");
- * </script>
- */
 type ClarityFunctions = ((fn: 'start', options: {
     content: boolean;
     cookies: string[];
@@ -38,7 +29,5 @@ export declare const ClarityOptions: import("valibot").ObjectSchema<{
     readonly id: import("valibot").SchemaWithPipe<[import("valibot").StringSchema<undefined>, import("valibot").MinLengthAction<string, 10, undefined>]>;
 }, undefined>;
 export type ClarityInput = RegistryScriptInput<typeof ClarityOptions>;
-export declare function useScriptClarity<T extends ClarityApi>(_options?: ClarityInput): T & {
-    $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
-};
+export declare function useScriptClarity<T extends ClarityApi>(_options?: ClarityInput): import("../composables/useScript").UseScriptContext<T>;
 export {};

package/dist/runtime/registry/cloudflare-web-analytics.d.ts

@@ -30,6 +30,4 @@ export declare const CloudflareWebAnalyticsOptions: import("valibot").ObjectSche
     readonly spa: import("valibot").OptionalSchema<import("valibot").BooleanSchema<undefined>, never>;
 }, undefined>;
 export type CloudflareWebAnalyticsInput = RegistryScriptInput<typeof CloudflareWebAnalyticsOptions>;
-export declare function useScriptCloudflareWebAnalytics<T extends CloudflareWebAnalyticsApi>(_options?: CloudflareWebAnalyticsInput): T & {
-    $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
-};
+export declare function useScriptCloudflareWebAnalytics<T extends CloudflareWebAnalyticsApi>(_options?: CloudflareWebAnalyticsInput): import("../composables/useScript").UseScriptContext<T>;

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

@@ -57,6 +57,4 @@ declare global {
         $crisp: CrispApi;
     }
 }
-export declare function useScriptCrisp<T extends CrispApi>(_options?: CrispInput): T & {
-    $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
-};
+export declare function useScriptCrisp<T extends CrispApi>(_options?: CrispInput): import("../composables/useScript").UseScriptContext<T>;

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

@@ -47,6 +47,4 @@ declare global {
         fathom: FathomAnalyticsApi;
     }
 }
-export declare function useScriptFathomAnalytics<T extends FathomAnalyticsApi>(_options?: FathomAnalyticsInput): T & {
-    $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
-};
+export declare function useScriptFathomAnalytics<T extends FathomAnalyticsApi>(_options?: FathomAnalyticsInput): import("../composables/useScript").UseScriptContext<T>;

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

@@ -23,6 +23,4 @@ declare global {
  *
  * A 3P wrapper for Google Analytics that takes an options input to feed into third-party-capital({@link https://github.com/GoogleChromeLabs/third-party-capital}), which returns instructions for nuxt-scripts.
  */
-export declare function useScriptGoogleAdsense<T extends GoogleAdsenseApi>(_options?: GoogleAdsenseInput): T & {
-    $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
-};
+export declare function useScriptGoogleAdsense<T extends GoogleAdsenseApi>(_options?: GoogleAdsenseInput): import("../composables/useScript").UseScriptContext<T>;

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

@@ -5,15 +5,7 @@ export declare const GoogleAnalyticsOptions: import("valibot").ObjectSchema<{
     readonly l: import("valibot").OptionalSchema<import("valibot").StringSchema<undefined>, never>;
 }, undefined>;
 export type GoogleAnalyticsInput = RegistryScriptInput<typeof GoogleAnalyticsOptions>;
-export declare function useScriptGoogleAnalytics(_options?: GoogleAnalyticsInput): {
+export declare function useScriptGoogleAnalytics(_options?: GoogleAnalyticsInput): import("../composables/useScript").UseScriptContext<{
     dataLayer: DataLayer;
     gtag: GTag;
-} & {
-    $script: Promise<{
-        dataLayer: DataLayer;
-        gtag: GTag;
-    }> & import("@unhead/vue").VueScriptInstance<{
-        dataLayer: DataLayer;
-        gtag: GTag;
-    }>;
-};
+}>;

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

@@ -15,7 +15,7 @@ export declare const GoogleMapsOptions: import("valibot").ObjectSchema<{
 export type GoogleMapsInput = RegistryScriptInput<typeof GoogleMapsOptions>;
 type MapsNamespace = typeof google.maps;
 export interface GoogleMapsApi {
-    maps: MapsNamespace | Promise<MapsNamespace>;
+    maps: Promise<MapsNamespace>;
 }
 declare global {
     interface Window {
@@ -24,7 +24,5 @@ declare global {
         };
     }
 }
-export declare function useScriptGoogleMaps<T extends GoogleMapsApi>(_options?: GoogleMapsInput): T & {
-    $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
-};
+export declare function useScriptGoogleMaps<T extends GoogleMapsApi>(_options?: GoogleMapsInput): import("../composables/useScript").UseScriptContext<T>;
 export {};

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

@@ -30,9 +30,7 @@ export function useScriptGoogleMaps(_options) {
       scriptOptions: {
         use() {
           return {
-            maps: readyPromise.then(() => {
-              return window.google.maps;
-            })
+            maps: readyPromise.then(() => window.google.maps)
           };
         }
       }

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

@@ -9,15 +9,7 @@ export declare const GoogleTagManagerOptions: import("valibot").ObjectSchema<{
     readonly l: import("valibot").OptionalSchema<import("valibot").StringSchema<undefined>, never>;
 }, undefined>;
 export type GoogleTagManagerInput = RegistryScriptInput<typeof GoogleTagManagerOptions>;
-export declare function useScriptGoogleTagManager(_options?: GoogleTagManagerInput): {
+export declare function useScriptGoogleTagManager(_options?: GoogleTagManagerInput): import("../composables/useScript").UseScriptContext<{
     dataLayer: DataLayer;
     google_tag_manager: import("third-party-capital").GoogleTagManagerInstance;
-} & {
-    $script: Promise<{
-        dataLayer: DataLayer;
-        google_tag_manager: import("third-party-capital").GoogleTagManagerInstance;
-    }> & import("@unhead/vue").VueScriptInstance<{
-        dataLayer: DataLayer;
-        google_tag_manager: import("third-party-capital").GoogleTagManagerInstance;
-    }>;
-};
+}>;

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

@@ -17,6 +17,4 @@ export declare const HotjarOptions: import("valibot").ObjectSchema<{
     readonly sv: import("valibot").OptionalSchema<import("valibot").NumberSchema<undefined>, never>;
 }, undefined>;
 export type HotjarInput = RegistryScriptInput<typeof HotjarOptions, true, false, false>;
-export declare function useScriptHotjar<T extends HotjarApi>(_options?: HotjarInput): T & {
-    $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
-};
+export declare function useScriptHotjar<T extends HotjarApi>(_options?: HotjarInput): import("../composables/useScript").UseScriptContext<T>;

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

@@ -19,6 +19,4 @@ declare global {
         intercomSettings?: any;
     }
 }
-export declare function useScriptIntercom<T extends IntercomApi>(_options?: IntercomInput): T & {
-    $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
-};
+export declare function useScriptIntercom<T extends IntercomApi>(_options?: IntercomInput): import("../composables/useScript").UseScriptContext<T>;

package/dist/runtime/registry/lemon-squeezy.d.ts

@@ -69,6 +69,4 @@ declare global {
         LemonSqueezy: LemonSqueezyApi;
     }
 }
-export declare function useScriptLemonSqueezy<T extends LemonSqueezyApi>(_options?: LemonSqueezyInput): T & {
-    $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
-};
+export declare function useScriptLemonSqueezy<T extends LemonSqueezyApi>(_options?: LemonSqueezyInput): import("../composables/useScript").UseScriptContext<T>;

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

@@ -13,7 +13,5 @@ declare global {
     interface Window extends MatomoAnalyticsApi {
     }
 }
-export declare function useScriptMatomoAnalytics<T extends MatomoAnalyticsApi>(_options?: MatomoAnalyticsInput): T & {
-    $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
-};
+export declare function useScriptMatomoAnalytics<T extends MatomoAnalyticsApi>(_options?: MatomoAnalyticsInput): import("../composables/useScript").UseScriptContext<T>;
 export {};

package/dist/runtime/registry/meta-pixel.d.ts

@@ -37,7 +37,5 @@ export declare const MetaPixelOptions: import("valibot").ObjectSchema<{
     readonly id: import("valibot").UnionSchema<[import("valibot").StringSchema<undefined>, import("valibot").NumberSchema<undefined>], undefined>;
 }, undefined>;
 export type MetaPixelInput = RegistryScriptInput<typeof MetaPixelOptions, true, false, false>;
-export declare function useScriptMetaPixel<T extends MetaPixelApi>(_options?: MetaPixelInput): T & {
-    $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
-};
+export declare function useScriptMetaPixel<T extends MetaPixelApi>(_options?: MetaPixelInput): import("../composables/useScript").UseScriptContext<T>;
 export {};

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

@@ -6,6 +6,4 @@ export declare const NpmOptions: import("valibot").ObjectSchema<{
     readonly type: import("valibot").OptionalSchema<import("valibot").StringSchema<undefined>, never>;
 }, undefined>;
 export type NpmInput = RegistryScriptInput<typeof NpmOptions, true, true, false>;
-export declare function useScriptNpm<T extends Record<string | symbol, any>>(_options: NpmInput): T & {
-    $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
-};
+export declare function useScriptNpm<T extends Record<string | symbol, any>>(_options: NpmInput): import("../composables/useScript").UseScriptContext<T>;

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

@@ -14,6 +14,4 @@ declare global {
         plausible: PlausibleAnalyticsApi;
     }
 }
-export declare function useScriptPlausibleAnalytics<T extends PlausibleAnalyticsApi>(_options?: PlausibleAnalyticsInput): T & {
-    $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
-};
+export declare function useScriptPlausibleAnalytics<T extends PlausibleAnalyticsApi>(_options?: PlausibleAnalyticsInput): import("../composables/useScript").UseScriptContext<T>;

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

@@ -29,7 +29,5 @@ declare global {
     interface Window extends SegmentApi {
     }
 }
-export declare function useScriptSegment<T extends SegmentApi>(_options?: SegmentInput): T & {
-    $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
-};
+export declare function useScriptSegment<T extends SegmentApi>(_options?: SegmentInput): import("../composables/useScript").UseScriptContext<T>;
 export {};

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

@@ -10,6 +10,4 @@ declare global {
     interface Window extends StripeApi {
     }
 }
-export declare function useScriptStripe<T extends StripeApi>(_options?: StripeInput): T & {
-    $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
-};
+export declare function useScriptStripe<T extends StripeApi>(_options?: StripeInput): import("../composables/useScript").UseScriptContext<T>;

package/dist/runtime/registry/vimeo-player.d.ts

@@ -11,7 +11,5 @@ declare global {
     interface Window extends VimeoPlayerApi {
     }
 }
-export declare function useScriptVimeoPlayer<T extends VimeoPlayerApi>(_options?: VimeoPlayerInput): T & {
-    $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
-};
+export declare function useScriptVimeoPlayer<T extends VimeoPlayerApi>(_options?: VimeoPlayerInput): import("../composables/useScript").UseScriptContext<T>;
 export {};

package/dist/runtime/registry/vimeo-player.js

@@ -15,7 +15,7 @@ export function useScriptVimeoPlayer(_options) {
     }
   }), _options);
   if (import.meta.client) {
-    const _ = watch(instance.$script.status, (status) => {
+    const _ = watch(instance.status, (status) => {
       if (status === "loading") {
         useHead({
           link: [

package/dist/runtime/registry/x-pixel.d.ts

@@ -32,7 +32,5 @@ export declare const XPixelOptions: import("valibot").ObjectSchema<{
     readonly version: import("valibot").OptionalSchema<import("valibot").StringSchema<undefined>, never>;
 }, undefined>;
 export type XPixelInput = RegistryScriptInput<typeof XPixelOptions, true, false, false>;
-export declare function useScriptXPixel<T extends XPixelApi>(_options?: XPixelInput): T & {
-    $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
-};
+export declare function useScriptXPixel<T extends XPixelApi>(_options?: XPixelInput): import("../composables/useScript").UseScriptContext<T>;
 export {};

package/dist/runtime/registry/youtube-player.d.ts

@@ -10,6 +10,4 @@ declare global {
     }
 }
 export type YouTubePlayerInput = RegistryScriptInput;
-export declare function useScriptYouTubePlayer<T extends YouTubePlayerApi>(_options: YouTubePlayerInput): T & {
-    $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
-};
+export declare function useScriptYouTubePlayer<T extends YouTubePlayerApi>(_options: YouTubePlayerInput): import("../composables/useScript").UseScriptContext<T>;

package/dist/runtime/registry/youtube-player.js

@@ -25,7 +25,7 @@ export function useScriptYouTubePlayer(_options) {
     }
   }), _options);
   if (import.meta.client) {
-    const _ = watch(instance.$script.status, (status) => {
+    const _ = watch(instance.status, (status) => {
       if (status === "loading") {
         useHead({
           link: [

package/dist/runtime/types.d.ts

@@ -23,14 +23,14 @@ import type { ClarityInput } from './registry/clarity.js';
 import type { CrispInput } from './registry/crisp.js';
 import type { GoogleAnalyticsInput } from './registry/google-analytics.js';
 import type { GoogleTagManagerInput } from './registry/google-tag-manager.js';
-export type NuxtUseScriptOptions<T = any> = Omit<UseScriptOptions<T>, 'trigger'> & {
+export type NuxtUseScriptOptions<T extends Record<symbol | string, any> = {}, U = {}> = Omit<UseScriptOptions<T, U>, 'trigger'> & {
     /**
      * The trigger to load the script:
      * - `onNuxtReady` - Load the script when Nuxt is ready.
-     * - `manual` - Load the script manually by calling `$script.load()` or `$script.waitForLoad()`.
+     * - `manual` - Load the script manually by calling `load()`.
      * - `Promise` - Load the script when the promise resolves.
      */
-    trigger?: UseScriptOptions<T>['trigger'] | 'onNuxtReady';
+    trigger?: UseScriptOptions<T, U>['trigger'] | 'onNuxtReady';
     /**
      * Should the script be bundled as an asset and loaded from your server. This is useful for improving the
      * performance by avoiding the extra DNS lookup and reducing the number of requests. It also