@nuxt/scripts 0.3.3 → 0.3.5

package/dist/runtime/components/ScriptYouTubePlayer.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+/// <reference types="youtube" />
+import { type HTMLAttributes, type ImgHTMLAttributes, type Ref, computed, onMounted, ref, watch } from 'vue'
+import { defu } from 'defu'
+import type { ElementScriptTrigger } from '../composables/useElementScriptTrigger'
+import { useElementScriptTrigger, useHead, useScriptYouTubePlayer } from '#imports'
+
+const props = withDefaults(defineProps<{
+  placeholderAttrs?: ImgHTMLAttributes
+  rootAttrs?: HTMLAttributes
+  aboveTheFold?: boolean
+  trigger?: ElementScriptTrigger
+  videoId: string
+  playerVars?: YT.PlayerVars
+  width?: number
+  height?: number
+}>(), {
+  trigger: 'mousedown',
+  // @ts-expect-error untyped
+  playerVars: { autoplay: 0, playsinline: 1 },
+  width: 640,
+  height: 480,
+})
+
+const emits = defineEmits<{
+  'ready': [e: YT.PlayerEvent]
+  'state-change': [e: YT.OnStateChangeEvent, target: YT.Player]
+  'playback-quality-change': [e: YT.OnPlaybackQualityChangeEvent, target: YT.Player]
+  'playback-rate-change': [e: YT.OnPlaybackRateChangeEvent, target: YT.Player]
+  'error': [e: YT.OnErrorEvent, target: YT.Player]
+}>()
+const events: (keyof YT.Events)[] = [
+  'onReady',
+  'onStateChange',
+  'onPlaybackQualityChange',
+  'onPlaybackRateChange',
+  'onError',
+  'onApiChange',
+]
+const rootEl = ref()
+const youtubeEl = ref()
+const ready = ref(false)
+const trigger = useElementScriptTrigger({ trigger: props.trigger, el: rootEl })
+const { $script } = useScriptYouTubePlayer({
+  scriptOptions: {
+    trigger,
+  },
+})
+
+const player: Ref<YT.Player | undefined> = ref()
+let clickTriggered = false
+if (props.trigger === 'mousedown') {
+  trigger.then(() => {
+    clickTriggered = true
+  })
+}
+onMounted(() => {
+  $script.then(async (instance) => {
+    const YouTube: typeof YT & { ready: (fn: () => void) => void } = await instance.YT
+    await new Promise<void>((resolve) => {
+      if (typeof YT.Player === 'undefined')
+        YouTube.ready(resolve)
+      else
+        resolve()
+    })
+    player.value = new YT.Player(youtubeEl.value, {
+      ...props,
+      events: Object.fromEntries(events.map(event => [event, (e: any) => {
+        const emitEventName = event.replace(/([A-Z])/g, '-$1').replace('on-', '').toLowerCase()
+        // @ts-expect-error untyped
+        emits(emitEventName, e)
+        if (event === 'onReady') {
+          ready.value = true
+          if (clickTriggered) {
+            player.value?.playVideo()
+            clickTriggered = false
+          }
+          watch(() => props.videoId, () => {
+            player.value?.loadVideoById(props.videoId)
+          })
+        }
+      }])),
+    })
+  })
+})
+
+defineExpose({
+  player,
+})
+
+const rootAttrs = computed(() => {
+  return defu(props.rootAttrs, {
+    'aria-busy': $script.status.value === 'loading',
+    'aria-label': $script.status.value === 'awaitingLoad'
+      ? 'YouTube Player - Placeholder'
+      : $script.status.value === 'loading'
+        ? 'YouTube Player - Loading'
+        : 'YouTube Player - Loaded',
+    'aria-live': 'polite',
+    'role': 'application',
+    'style': {
+      cursor: 'pointer',
+      position: 'relative',
+      backgroundColor: 'black',
+      maxWidth: '100%',
+      width: `${props.width}px`,
+      height: `'auto'`,
+      aspectRatio: `${props.width}/${props.height}`,
+    },
+  }) as HTMLAttributes
+})
+
+const placeholder = computed(() => `https://i.ytimg.com/vi_webp/${props.videoId}/sddefault.webp`)
+
+if (import.meta.server) {
+  // dns-prefetch https://i.vimeocdn.com
+  useHead({
+    link: [
+      {
+        rel: props.aboveTheFold ? 'preconnect' : 'dns-prefetch',
+        href: 'https://i.ytimg.com',
+      },
+      props.aboveTheFold
+        // we can preload the placeholder image
+        ? {
+            rel: 'preload',
+            as: 'image',
+            href: placeholder.value,
+          }
+        : {},
+    ],
+  })
+}
+
+const placeholderAttrs = computed(() => {
+  return defu(props.placeholderAttrs, {
+    src: placeholder.value,
+    alt: '',
+    loading: props.aboveTheFold ? 'eager' : 'lazy',
+    style: {
+      width: '100%',
+      objectFit: 'contain',
+      height: '100%',
+    },
+  } satisfies ImgHTMLAttributes)
+})
+</script>
+
+<template>
+  <div ref="rootEl" v-bind="rootAttrs">
+    <div ref="youtubeEl" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;" />
+    <slot v-if="!ready" :placeholder="placeholder" name="placeholder">
+      <img v-bind="placeholderAttrs">
+    </slot>
+    <slot v-if="$script.status.value === 'loading'" name="loading">
+      <ScriptLoadingIndicator />
+    </slot>
+    <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
+  </div>
+</template>

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

@@ -1,5 +1,5 @@
-import type { Ref } from 'vue';
-export type ElementScriptTrigger = 'visible' | 'mouseover' | false;
+import type { MaybeComputedElementRef, MaybeElement } from '@vueuse/core';
+export type ElementScriptTrigger = 'immediate' | 'visible' | keyof GlobalEventHandlersEventMap | (keyof GlobalEventHandlersEventMap)[] | false;
 export interface ElementScriptTriggerOptions {
     /**
      * The event to trigger the script load.
@@ -9,7 +9,7 @@ export interface ElementScriptTriggerOptions {
      * The element to watch for the trigger event.
      * @default document.body
      */
-    el?: HTMLElement | Ref<HTMLElement | undefined> | null;
+    el?: MaybeComputedElementRef<MaybeElement>;
 }
 /**
  * Create a trigger for an element to load a script based on specific element events.

package/dist/runtime/composables/useElementScriptTrigger.mjs

@@ -1,11 +1,47 @@
-import { useElementHover, useElementVisibility, watchOnce } from "@vueuse/core";
-import { ref } from "vue";
+import {
+  useEventListener,
+  useIntersectionObserver
+} from "@vueuse/core";
+function useElementVisibilityPromise(element) {
+  let observer;
+  return new Promise((resolve) => {
+    observer = useIntersectionObserver(
+      element,
+      (intersectionObserverEntries) => {
+        for (const entry of intersectionObserverEntries) {
+          if (entry.isIntersecting)
+            resolve();
+        }
+      },
+      {
+        rootMargin: "30px 0px 0px 0px",
+        threshold: 0
+      }
+    );
+  }).finally(() => {
+    observer.stop();
+  });
+}
 export function useElementScriptTrigger(options) {
   const { el, trigger } = options;
   if (import.meta.server || !el)
     return new Promise(() => {
     });
-  const $el = typeof el !== "undefined" ? el : document.body;
-  const activeRef = trigger ? trigger === "mouseover" ? useElementHover($el) : useElementVisibility($el) : ref(false);
-  return trigger ? new Promise((resolve) => watchOnce([activeRef], () => resolve())) : Promise.resolve();
+  if (el && options.trigger === "visible")
+    return useElementVisibilityPromise(el);
+  if (trigger !== "immediate") {
+    return new Promise((resolve) => {
+      const _ = useEventListener(
+        typeof el !== "undefined" ? el : document.body,
+        // @ts-expect-error untyped
+        trigger,
+        () => {
+          resolve();
+          _();
+        },
+        { once: true, passive: true }
+      );
+    });
+  }
+  return Promise.resolve();
 }

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

@@ -1,4 +1,4 @@
-import { type UseScriptInput, type VueScriptInstance } from '@unhead/vue';
+import type { UseScriptInput, VueScriptInstance } from '@unhead/vue';
 import type { NuxtUseScriptOptions } from '#nuxt-scripts';
 export declare function useScript<T extends Record<string | symbol, any>>(input: UseScriptInput, options?: NuxtUseScriptOptions): T & {
     $script: Promise<T> & VueScriptInstance<T>;

package/dist/runtime/composables/useScript.mjs

@@ -1,16 +1,18 @@
-import { useScript as _useScript, injectHead } from "@unhead/vue";
 import { hashCode } from "@unhead/shared";
 import { defu } from "defu";
-import { onNuxtReady, useNuxtApp, useRuntimeConfig } from "#imports";
+import { useScript as _useScript, injectHead, onNuxtReady, useNuxtApp, useRuntimeConfig } from "#imports";
+function useNuxtScriptRuntimeConfig() {
+  return useRuntimeConfig().public["nuxt-scripts"];
+}
 export function useScript(input, options) {
   input = typeof input === "string" ? { src: input } : input;
-  options = defu(options, useRuntimeConfig().public["nuxt-scripts"]?.defaultScriptOptions);
+  options = defu(options, useNuxtScriptRuntimeConfig()?.defaultScriptOptions);
   if (options.trigger === "onNuxtReady")
     options.trigger = onNuxtReady;
   const nuxtApp = useNuxtApp();
   const id = input.key || input.src || hashCode(typeof input.innerHTML === "string" ? input.innerHTML : "");
-  if (!nuxtApp.scripts?.[id]) {
-    if (import.meta.client) {
+  if (import.meta.client) {
+    if (!nuxtApp._scripts?.[id]) {
       performance?.mark?.("mark_feature_usage", {
         detail: {
           feature: `nuxt-scripts:${id}`
@@ -50,7 +52,6 @@ export function useScript(input, options) {
         payload.events.push({
           type: "fn-call",
           fn: ctx.fn,
-          args: ctx.args,
           at: Date.now()
         });
         syncScripts();

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

@@ -1,5 +1,5 @@
 import { defu } from "defu";
-import { registryScript } from "../utils.mjs";
+import { useRegistryScript } from "../utils.mjs";
 import { boolean, minLength, object, optional, string } from "#nuxt-scripts-validator";
 export const CloudflareWebAnalyticsOptions = object({
   /**
@@ -15,7 +15,7 @@ export const CloudflareWebAnalyticsOptions = object({
   spa: optional(boolean())
 });
 export function useScriptCloudflareWebAnalytics(_options) {
-  return registryScript("cloudflareWebAnalytics", (options) => ({
+  return useRegistryScript("cloudflareWebAnalytics", (options) => ({
     scriptInput: {
       "src": "https://static.cloudflareinsights.com/beacon.min.js",
       "data-cf-beacon": JSON.stringify(defu(options, { spa: true }))

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

@@ -7,7 +7,7 @@ export declare const FathomAnalyticsOptions: import("valibot").ObjectSchema<{
     /**
      * The Fathom Analytics tracking mode.
      */
-    spa: import("valibot").OptionalSchema<import("valibot").UnionSchema<(import("valibot").LiteralSchema<"hash", "hash"> | import("valibot").LiteralSchema<"auto", "auto"> | import("valibot").LiteralSchema<"history", "history">)[], "auto" | "hash" | "history">, undefined, "auto" | "hash" | "history" | undefined>;
+    spa: import("valibot").OptionalSchema<import("valibot").UnionSchema<(import("valibot").LiteralSchema<"auto", "auto"> | import("valibot").LiteralSchema<"history", "history"> | import("valibot").LiteralSchema<"hash", "hash">)[], "auto" | "history" | "hash">, undefined, "auto" | "history" | "hash" | undefined>;
     /**
      * Automatically track page views.
      */
@@ -23,7 +23,7 @@ export declare const FathomAnalyticsOptions: import("valibot").ObjectSchema<{
 }, undefined, {
     site: string;
     auto?: boolean | undefined;
-    spa?: "auto" | "hash" | "history" | undefined;
+    spa?: "auto" | "history" | "hash" | undefined;
     canonical?: boolean | undefined;
     honorDnt?: boolean | undefined;
 }>;

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

@@ -1,4 +1,4 @@
-import { registryScript } from "../utils.mjs";
+import { useRegistryScript } from "../utils.mjs";
 import { boolean, literal, object, optional, string, union } from "#nuxt-scripts-validator";
 export const FathomAnalyticsOptions = object({
   /**
@@ -23,7 +23,7 @@ export const FathomAnalyticsOptions = object({
   honorDnt: optional(boolean())
 });
 export function useScriptFathomAnalytics(_options) {
-  return registryScript("fathomAnalytics", (options) => ({
+  return useRegistryScript("fathomAnalytics", (options) => ({
     scriptInput: {
       src: "https://cdn.usefathom.com/script.js",
       // can't be bundled

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

@@ -1,6 +1,9 @@
 import type { GoogleAnalyticsApi } from 'third-party-capital';
 import type { RegistryScriptInput } from '#nuxt-scripts';
-declare const GoogleAnalyticsOptions: import("valibot").ObjectSchema<{
+export declare const GoogleAnalyticsOptions: import("valibot").ObjectSchema<{
+    /**
+     * The Google Analytics ID.
+     */
     id: import("valibot").StringSchema<string>;
 }, undefined, {
     id: string;
@@ -18,4 +21,3 @@ declare global {
 export declare function useScriptGoogleAnalytics<T extends GoogleAnalyticsApi>(_options?: GoogleAnalyticsInput): T & {
     $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
 };
-export {};

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

@@ -1,11 +1,14 @@
-import { registryScript } from "../utils.mjs";
+import { useRegistryScript } from "../utils.mjs";
 import { GoogleAnalyticsScriptResolver } from "../../registry";
 import { object, string } from "#nuxt-scripts-validator";
-const GoogleAnalyticsOptions = object({
+export const GoogleAnalyticsOptions = object({
+  /**
+   * The Google Analytics ID.
+   */
   id: string()
 });
 export function useScriptGoogleAnalytics(_options) {
-  return registryScript("googleAnalytics", (options) => ({
+  return useRegistryScript("googleAnalytics", (options) => ({
     scriptInput: {
       src: GoogleAnalyticsScriptResolver(options)
     },
@@ -20,12 +23,14 @@ export function useScriptGoogleAnalytics(_options) {
       }
     },
     clientInit: import.meta.server ? void 0 : () => {
-      window.dataLayer = window.dataLayer || [];
-      window.gtag = function gtag(...p) {
-        window.dataLayer.push(p);
+      const w = window;
+      w.dataLayer = w.dataLayer || [];
+      const gtag = function() {
+        w.dataLayer.push(arguments);
       };
-      window.gtag("js", /* @__PURE__ */ new Date());
-      window.gtag("config", options?.id);
+      gtag("js", /* @__PURE__ */ new Date());
+      gtag("config", "G-TR58L0EF8P");
+      w.gtag = gtag;
     }
   }), _options);
 }

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

@@ -1,5 +1,5 @@
 import { withQuery } from "ufo";
-import { registryScript } from "../utils.mjs";
+import { useRegistryScript } from "../utils.mjs";
 import { array, literal, object, optional, string, union } from "#nuxt-scripts-validator";
 export const GoogleMapsOptions = object({
   apiKey: string(),
@@ -8,7 +8,7 @@ export const GoogleMapsOptions = object({
 });
 export function useScriptGoogleMaps(_options) {
   let readyPromise = Promise.resolve();
-  return registryScript("googleMaps", (options) => {
+  return useRegistryScript("googleMaps", (options) => {
     const libraries = options?.libraries || ["places"];
     return {
       scriptInput: {

package/dist/runtime/registry/google-tag-manager.mjs

@@ -1,11 +1,11 @@
 import { withQuery } from "ufo";
-import { registryScript } from "../utils.mjs";
+import { useRegistryScript } from "../utils.mjs";
 import { object, string } from "#nuxt-scripts-validator";
 const GoogleTagManagerOptions = object({
   id: string()
 });
 export function useScriptGoogleTagManager(options) {
-  return registryScript("googleTagManager", (options2) => ({
+  return useRegistryScript("googleTagManager", (options2) => ({
     scriptInput: {
       async: true,
       src: withQuery("https://www.googletagmanager.com/gtm.js", {

package/dist/runtime/registry/hotjar.mjs

@@ -1,13 +1,13 @@
-import { registryScript } from "../utils.mjs";
+import { useRegistryScript } from "../utils.mjs";
 import { number, object, optional } from "#nuxt-scripts-validator";
 export const HotjarOptions = object({
   id: number(),
   sv: optional(number())
 });
 export function useScriptHotjar(_options) {
-  return registryScript("hotjar", (options) => ({
+  return useRegistryScript("hotjar", (options) => ({
     scriptInput: {
-      src: `https://static.hotjar.com/c/hotjar-${options?.id}.js?sv=${options?.sv}`
+      src: `https://static.hotjar.com/c/hotjar-${options?.id}.js?sv=${options?.sv || 6}`
     },
     schema: import.meta.dev ? HotjarOptions : void 0,
     scriptOptions: {
@@ -16,7 +16,7 @@ export function useScriptHotjar(_options) {
       }
     },
     clientInit: import.meta.server ? void 0 : () => {
-      window._hjSettings = window._hjSettings || { hjid: options?.id, hjsv: options?.sv };
+      window._hjSettings = window._hjSettings || { hjid: options?.id, hjsv: options?.sv || 6 };
       window.hj = window.hj || function(...params) {
         (window.hj.q = window.hj.q || []).push(params);
       };

package/dist/runtime/registry/intercom.mjs

@@ -1,5 +1,5 @@
 import { joinURL } from "ufo";
-import { registryScript } from "../utils.mjs";
+import { useRegistryScript } from "../utils.mjs";
 import { literal, number, object, optional, string, union } from "#nuxt-scripts-validator";
 export const IntercomOptions = object({
   app_id: string(),
@@ -13,14 +13,9 @@ export const IntercomOptions = object({
   vertical_padding: optional(number())
 });
 export function useScriptIntercom(_options) {
-  return registryScript("intercom", (options) => ({
+  return useRegistryScript("intercom", (options) => ({
     scriptInput: {
-      src: joinURL(`https://widget.intercom.io/widget`, options?.app_id || ""),
-      // append the data attr's
-      ...Object.entries(options).filter(([key]) => key.startsWith("data-")).reduce((acc, [key, value]) => {
-        acc[key] = value;
-        return acc;
-      })
+      src: joinURL(`https://widget.intercom.io/widget`, options?.app_id || "")
     },
     schema: import.meta.dev ? IntercomOptions : void 0,
     scriptOptions: {

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

@@ -1,6 +1,5 @@
 import type { RegistryScriptInput } from '#nuxt-scripts';
-export declare const LemonSqueezyOptions: import("valibot").ObjectSchema<{}, undefined, {}>;
-export type LemonSqueezyInput = RegistryScriptInput<typeof LemonSqueezyOptions>;
+export type LemonSqueezyInput = RegistryScriptInput;
 export interface LemonSqueezyApi {
     /**
      * Initialises Lemon.js on your page.

package/dist/runtime/registry/lemon-squeezy.mjs

@@ -1,14 +1,11 @@
-import { registryScript } from "../utils.mjs";
-import { object } from "#nuxt-scripts-validator";
-export const LemonSqueezyOptions = object({});
+import { useRegistryScript } from "../utils.mjs";
 export function useScriptLemonSqueezy(_options) {
-  return registryScript("lemonSqueezy", () => ({
+  return useRegistryScript("lemonSqueezy", () => ({
     scriptInput: {
       src: "https://assets.lemonsqueezy.com/lemon.js",
       // @ts-expect-error untyped
-      crossorigin: null
+      crossorigin: false
     },
-    schema: import.meta.dev ? LemonSqueezyOptions : void 0,
     scriptOptions: {
       use() {
         if (typeof window.createLemonSqueezy === "undefined")

package/dist/runtime/registry/matomo-analytics.mjs

@@ -1,4 +1,5 @@
-import { registryScript } from "../utils.mjs";
+import { withBase, withHttps } from "ufo";
+import { useRegistryScript } from "../utils.mjs";
 import { boolean, object, optional, string } from "#nuxt-scripts-validator";
 export const MatomoAnalyticsOptions = object({
   matomoUrl: string(),
@@ -8,9 +9,9 @@ export const MatomoAnalyticsOptions = object({
   enableLinkTracking: optional(boolean())
 });
 export function useScriptMatomoAnalytics(_options) {
-  return registryScript("matomoAnalytics", (options) => ({
+  return useRegistryScript("matomoAnalytics", (options) => ({
     scriptInput: {
-      src: `https://${options?.matomoUrl}/matomo.js`
+      src: withBase(`/matomo.js`, withHttps(options?.matomoUrl))
     },
     schema: import.meta.dev ? MatomoAnalyticsOptions : void 0,
     scriptOptions: {
@@ -20,14 +21,14 @@ export function useScriptMatomoAnalytics(_options) {
       // allow _paq to be accessed on the server
       stub: import.meta.client ? void 0 : ({ fn }) => {
         return fn === "_paq" ? [] : void 0;
-      },
-      clientInit: import.meta.server ? void 0 : () => {
-        const _paq = window._paq = window._paq || [];
-        options?.trackPageView !== false && _paq.push(["trackPageView"]);
-        options?.enableLinkTracking !== false && _paq.push(["enableLinkTracking"]);
-        _paq.push(["setTrackerUrl", `//${options?.matomoUrl}/matomo.php`]);
-        _paq.push(["setSiteId", options?.siteId]);
       }
+    },
+    clientInit: import.meta.server ? void 0 : () => {
+      const _paq = window._paq = window._paq || [];
+      options?.trackPageView !== false && _paq.push(["trackPageView"]);
+      options?.enableLinkTracking !== false && _paq.push(["enableLinkTracking"]);
+      _paq.push(["setTrackerUrl", withBase(`/matomo.php`, withHttps(options?.matomoUrl))]);
+      _paq.push(["setSiteId", options?.siteId || "1"]);
     }
   }), _options);
 }

package/dist/runtime/registry/{facebook-pixel.d.ts → meta-pixel.d.ts}

@@ -19,26 +19,26 @@ interface EventObjectProperties {
     [key: string]: any;
 }
 type FbqFns = ((event: 'track', eventName: StandardEvents, data?: EventObjectProperties) => void) & ((event: 'trackCustom', eventName: string, data?: EventObjectProperties) => void) & ((event: 'init', id: number, data?: Record<string, any>) => void) & ((event: 'init', id: string) => void) & ((event: string, ...params: any[]) => void);
-export interface FacebookPixelApi {
+export interface MetaPixelApi {
     fbq: FbqFns & {
         push: FbqFns;
         loaded: boolean;
         version: string;
         queue: any[];
     };
-    _fbq: FacebookPixelApi['fbq'];
+    _fbq: MetaPixelApi['fbq'];
 }
 declare global {
-    interface Window extends FacebookPixelApi {
+    interface Window extends MetaPixelApi {
     }
 }
-export declare const FacebookPixelOptions: import("valibot").ObjectSchema<{
-    id: import("valibot").UnionSchema<(import("valibot").NumberSchema<number> | import("valibot").StringSchema<string>)[], string | number>;
+export declare const MetaPixelOptions: import("valibot").ObjectSchema<{
+    id: import("valibot").UnionSchema<(import("valibot").StringSchema<string> | import("valibot").NumberSchema<number>)[], string | number>;
 }, undefined, {
     id: string | number;
 }>;
-export type FacebookPixelInput = RegistryScriptInput<typeof FacebookPixelOptions>;
-export declare function useScriptFacebookPixel<T extends FacebookPixelApi>(_options?: FacebookPixelInput): T & {
+export type MetaPixelInput = RegistryScriptInput<typeof MetaPixelOptions>;
+export declare function useScriptMetaPixel<T extends MetaPixelApi>(_options?: MetaPixelInput): T & {
     $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
 };
 export {};

package/dist/runtime/registry/{facebook-pixel.mjs → meta-pixel.mjs}

@@ -1,15 +1,17 @@
-import { registryScript } from "../utils.mjs";
-import { FacebookPixelScriptResolver } from "../../registry";
+import { useRegistryScript } from "../utils.mjs";
+import { MetaPixelScriptResolver } from "../../registry";
 import { number, object, string, union } from "#nuxt-scripts-validator";
-export const FacebookPixelOptions = object({
+export const MetaPixelOptions = object({
   id: union([string(), number()])
 });
-export function useScriptFacebookPixel(_options) {
-  return registryScript("facebookPixel", (options) => ({
+export function useScriptMetaPixel(_options) {
+  return useRegistryScript("metaPixel", (options) => ({
     scriptInput: {
-      src: FacebookPixelScriptResolver()
+      src: MetaPixelScriptResolver(),
+      // @ts-expect-error TODO fix upstream
+      crossorigin: false
     },
-    schema: import.meta.dev ? FacebookPixelOptions : void 0,
+    schema: import.meta.dev ? MetaPixelOptions : void 0,
     scriptOptions: {
       use() {
         return { fbq: window.fbq };

package/dist/runtime/registry/npm.mjs

@@ -1,5 +1,5 @@
 import { withBase } from "ufo";
-import { registryScript } from "../utils.mjs";
+import { useRegistryScript } from "../utils.mjs";
 import { object, optional, string } from "#nuxt-scripts-validator";
 export const NpmOptions = object({
   packageName: string(),
@@ -8,7 +8,7 @@ export const NpmOptions = object({
   type: optional(string())
 });
 export function useScriptNpm(_options) {
-  return registryScript(`${_options.packageName}-npm`, (options) => ({
+  return useRegistryScript(`${_options.packageName}-npm`, (options) => ({
     scriptInput: {
       src: withBase(options.file || "", `https://unpkg.com/${options?.packageName}@${options.version || "latest"}`)
     },

package/dist/runtime/registry/plausible-analytics.mjs

@@ -1,4 +1,4 @@
-import { registryScript } from "../utils.mjs";
+import { useRegistryScript } from "../utils.mjs";
 import { PlausibleAnalyticsScriptResolver } from "../../registry";
 import { array, literal, object, optional, string, union } from "#nuxt-scripts-validator";
 const extensions = [
@@ -18,7 +18,7 @@ export const PlausibleAnalyticsOptions = object({
   extension: optional(union([union(extensions), array(union(extensions))]))
 });
 export function useScriptPlausibleAnalytics(_options) {
-  return registryScript("plausibleAnalytics", (options) => {
+  return useRegistryScript("plausibleAnalytics", (options) => {
     return {
       scriptInput: {
         "src": PlausibleAnalyticsScriptResolver(options),