@nuxt/scripts 0.1.12 → 0.2.0

package/dist/runtime/components/GoogleMaps.vue

@@ -0,0 +1,130 @@
+<script lang="ts" setup>
+import { type PropType, computed, ref, watch } from 'vue'
+import { withQuery } from 'ufo'
+import type google from 'google.maps'
+import { defu } from 'defu'
+import type { ElementScriptTrigger } from '../composables/useElementScriptTrigger'
+import { useElementScriptTrigger, useRuntimeConfig, useScriptGoogleMaps } from '#imports'
+
+const props = defineProps({
+  trigger: { type: String as PropType<ElementScriptTrigger>, required: false, default: 'mouseover' },
+  /**
+   * Defines the Google Maps API key. Must have access to the Static Maps API as well.
+   *
+   * @see https://developers.google.com/maps/documentation/javascript/get-api-key
+   */
+  apiKey: { type: String, required: true },
+  /**
+   * Defines map marker location.
+   *
+   * @example City Hall, New York, NY
+   */
+  query: { type: String, required: false, default: '' },
+  /**
+   * Defines center of the map view.
+   *
+   * @example 37.4218,-122.0840
+   */
+  options: { type: Object as PropType<Omit<google.maps.MapOptions, 'center'>>, required: false, default: undefined },
+  /**
+   * Defines the width of the map.
+   */
+  width: { type: Number, required: false, default: 500 },
+  /**
+   * Defines the height of the map
+   */
+  height: { type: Number, required: false, default: 400 },
+})
+
+const apiKey = props.apiKey || useRuntimeConfig().public.scripts?.googleMaps?.apikey
+
+if (!apiKey)
+  throw new Error('GoogleMaps requires an API key')
+if (!props.query && !props.options?.center)
+  throw new Error('GoogleMaps requires either a query or center option')
+
+const elMap = ref<HTMLElement>()
+
+const { $script } = useScriptGoogleMaps({
+  apiKey: props.apiKey,
+  scriptOptions: {
+    trigger: useElementScriptTrigger(props.trigger, elMap),
+  },
+})
+
+const options = computed(() => {
+  return defu(props.options, {
+    zoom: 15,
+    mapId: 'map',
+  })
+})
+const ready = ref(false)
+
+function queryMaps(maps: google.maps, marker: google.maps.MarkerLibrary, map: google.maps.Map) {
+  const request = {
+    query: props.query,
+    fields: ['name', 'geometry'],
+  }
+  const markers: google.maps.AdvancedMarkerElement[] = []
+  const service = new maps.places.PlacesService(map)
+  service.findPlaceFromQuery(request, (results, status) => {
+    if (status === maps.places.PlacesServiceStatus.OK && results) {
+      for (let i = 0; i < results.length; i++) {
+        const location = results[i].geometry?.location
+        location && markers.push(
+          new marker.AdvancedMarkerElement({
+            map,
+            position: location,
+          }),
+        )
+      }
+
+      if (results[0].geometry?.location)
+        markers[0] && map.setCenter(results[0].geometry.location)
+      ready.value = true
+    }
+  })
+}
+
+// create the map
+$script.then(async (instance) => {
+  const maps = await instance.maps
+  const marker = await maps.importLibrary('marker') as google.maps.MarkerLibrary
+
+  const mapDiv = document.createElement('div')
+  mapDiv.style.width = '100%'
+  mapDiv.style.height = '100%'
+  const _ = watch(ready, (v) => {
+    v && elMap.value?.appendChild(mapDiv)
+    _()
+  })
+
+  const map = new maps.Map(mapDiv, options.value)
+  watch(options, () => map.setOptions(options.value))
+  watch(() => props.query, () => {
+    queryMaps(maps, marker, map)
+  }, {
+    immediate: !!props.query,
+  })
+  if (!props.query)
+    ready.value = true
+})
+
+const poster = computed(() => {
+  return withQuery('https://maps.googleapis.com/maps/api/staticmap', {
+    center: props.query, // will be overriden by options if they were set
+    size: `${props.width}x${props.height}`,
+    key: apiKey,
+    scale: 2, // we assume a high DPI to avoid hydration issues
+    ...options.value,
+  })
+})
+</script>
+
+<template>
+  <div ref="elMap" :style="{ width: `${width}px`, height: `${height}px`, position: 'relative' }">
+    <slot>
+      <img v-if="!ready" :src="poster" title="" :width="width" :height="height">
+    </slot>
+  </div>
+</template>

package/dist/runtime/components/LemonSqueezyButton.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { useScriptLemonSqueezy } from '#imports'
+
+defineProps<{
+  href: string
+}>()
+
+const emits = defineEmits<{
+  event: [{ event: string, data?: Record<string, any> }]
+}>()
+
+const instance = useScriptLemonSqueezy()
+instance.Setup({
+  eventHandler(event) {
+    emits('event', event)
+  },
+})
+
+defineExpose({
+  instance,
+})
+</script>
+
+<template>
+  <a :href="href" class="lemonsqueezy-button">
+    <slot />
+  </a>
+</template>

package/dist/runtime/components/StripePricingTableEmbed.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { ElementScriptTrigger } from '../composables/useElementScriptTrigger'
+import { useElementScriptTrigger, useScript } from '#imports'
+
+const props = defineProps<{
+  trigger?: ElementScriptTrigger
+  publishableKey: string
+  pricingTableId: string
+  clientReferenceId?: string
+  customerEmail?: string
+  customerSessionClientSecret?: string
+}>()
+
+const table = ref()
+useScript(`https://js.stripe.com/v3/pricing-table.js`, {
+  trigger: useElementScriptTrigger(props.trigger, table),
+})
+</script>
+
+<template>
+  <ClientOnly>
+    <stripe-pricing-table
+      ref="table"
+      v-bind="$attrs"
+      :publishable-key="publishableKey"
+      :pricing-table-id="pricingTableId"
+      :client-reference-id="clientReferenceId"
+      :customer-email="customerEmail"
+      :customer-session-client-secret="customerSessionClientSecret"
+    />
+  </ClientOnly>
+</template>

package/dist/runtime/components/VimeoEmbed.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import type Player from 'vimeo__player'
+import type { EventMap, VimeoVideoQuality } from 'vimeo__player'
+import type { ElementScriptTrigger } from '../composables/useElementScriptTrigger'
+import { useAsyncData, useElementScriptTrigger, useScriptVimeoPlayer } from '#imports'
+
+const props = withDefaults(defineProps<{
+  // custom
+  trigger?: ElementScriptTrigger
+  // copied from @types/vimeo__player
+  id: number | undefined
+  url?: string | undefined
+  autopause?: boolean | undefined
+  autoplay?: boolean | undefined
+  background?: boolean | undefined
+  byline?: boolean | undefined
+  color?: string | undefined
+  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
+  maxheight?: number | undefined
+  maxwidth?: number | undefined
+  muted?: boolean | undefined
+  pip?: boolean | undefined
+  playsinline?: boolean | undefined
+  portrait?: boolean | undefined
+  responsive?: boolean | undefined
+  speed?: boolean | undefined
+  quality?: VimeoVideoQuality | undefined
+  texttrack?: string | undefined
+  title?: boolean | undefined
+  transparent?: boolean | undefined
+  width?: number | undefined
+}>(), {
+  trigger: 'mouseover',
+  width: 640,
+  height: 480,
+  loop: false,
+  controls: true,
+})
+
+const emits = defineEmits<{
+  play: [e: EventMap['play'], player: Player]
+  playing: [e: EventMap['playing'], player: Player]
+  pause: [e: EventMap['pause'], player: Player]
+  ended: [e: EventMap['ended'], player: Player]
+  timeupdate: [e: EventMap['timeupdate'], player: Player]
+  progress: [e: EventMap['progress'], player: Player]
+  seeking: [e: EventMap['seeking'], player: Player]
+  seeked: [e: EventMap['seeked'], player: Player]
+  texttrackchange: [e: EventMap['texttrackchange'], player: Player]
+  chapterchange: [e: EventMap['chapterchange'], player: Player]
+  cuechange: [e: EventMap['cuechange'], player: Player]
+  cuepoint: [e: EventMap['cuepoint'], player: Player]
+  volumechange: [e: EventMap['volumechange'], player: Player]
+  playbackratechange: [e: EventMap['playbackratechange'], player: Player]
+  bufferstart: [e: EventMap['bufferstart'], player: Player]
+  bufferend: [e: EventMap['bufferend'], player: Player]
+  error: [e: EventMap['error'], player: Player]
+  loaded: [e: EventMap['loaded'], player: Player]
+  durationchange: [e: EventMap['durationchange'], player: Player]
+  fullscreenchange: [e: EventMap['fullscreenchange'], player: Player]
+  qualitychange: [e: EventMap['qualitychange'], player: Player]
+  camerachange: [e: EventMap['camerachange'], player: Player]
+  resize: [e: EventMap['resize'], player: Player]
+  enterpictureinpicture: [e: EventMap['enterpictureinpicture'], player: Player]
+  leavepictureinpicture: [e: EventMap['leavepictureinpicture'], player: Player]
+}>()
+
+const events = [
+  'play',
+  'playing',
+  'pause',
+  'ended',
+  'timeupdate',
+  'progress',
+  'seeking',
+  'seeked',
+  'texttrackchange',
+  'chapterchange',
+  'cuechange',
+  'cuepoint',
+  'volumechange',
+  'playbackratechange',
+  'bufferstart',
+  'bufferend',
+  'error',
+  'loaded',
+  'durationchange',
+  'fullscreenchange',
+  'qualitychange',
+  'camerachange',
+  'resize',
+]
+
+const elVimeo = ref()
+const root = ref()
+
+const ready = ref(false)
+const { $script } = useScriptVimeoPlayer({
+  scriptOptions: {
+    trigger: useElementScriptTrigger(props.trigger, root.value),
+  },
+})
+
+const { data: payload } = useAsyncData(
+  `vimeo-embed:${props.id}`,
+  // TODO ideally we cache this
+  () => $fetch(`https://vimeo.com/api/v2/video/${props.id}.json`).then(res => res[0]),
+  {
+    watch: [() => props.id],
+  },
+)
+
+const poster = computed(() => {
+  const { width, height } = props
+  // 2 dpi for retina, this is safest while SSR
+  return payload.value.thumbnail_large.replace(/-d_[\dx]+$/i, `-d_${Math.round(width * 2)}x${Math.round(height * 2)}`)
+})
+
+let player: Player
+$script.then(({ Player }) => {
+  // filter props for false values
+  player = Player(elVimeo.value, {
+    ...props,
+    url: encodeURI(`https://vimeo.com/${props.id}`),
+  })
+
+  events.forEach((event) => {
+    player.on(event, (e: any) => {
+      emits(event as keyof typeof emits, e, player)
+      if (event === 'loaded')
+        ready.value = true
+    })
+  })
+})
+
+onBeforeUnmount(() => player?.unload())
+
+defineExpose({
+  player,
+})
+
+watch(() => props.id, (v) => {
+  v && player?.loadVideo(v)
+})
+</script>
+
+<template>
+  <div ref="root" :style="{ width: `${width}px`, height: `${height}px`, position: 'relative' }">
+    <div v-show="ready" ref="elVimeo" style="width: 100%; height: 100%;" />
+    <slot v-bind="payload" :poster="poster">
+      <img v-if="!ready" :src="poster" v-bind="trigger ? { loading: 'lazy' } : {}" :width="width" :height="height" :style="{ aspectRatio: '4/3', cursor: $script.status.value !== 'awaitingLoad' ? 'wait' : '' }">
+    </slot>
+  </div>
+</template>

package/dist/runtime/components/YouTubeEmbed.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type YT from 'youtube'
+import type { ElementScriptTrigger } from '../composables/useElementScriptTrigger'
+import { useElementScriptTrigger, useScriptYouTubeIframe } from '#imports'
+
+const props = withDefaults(defineProps<{
+  trigger?: ElementScriptTrigger
+  videoId: string
+  playerVars?: YT.PlayerVars
+  width?: number
+  height?: number
+}>(), {
+  playerVars: { autoplay: 1, playsinline: 1 },
+  width: 640,
+  height: 480,
+})
+
+const emits = defineEmits<{
+  onReady: [e: YT.PlayerEvent]
+  onStateChange: [e: YT.PlayerEvent]
+  onPlaybackQualityChange: [e: YT.PlayerEvent]
+  onPlaybackRateChange: [e: YT.PlayerEvent]
+  onError: [e: YT.PlayerEvent]
+  onApiChange: [e: YT.PlayerEvent]
+}>()
+const events: (keyof YT.Events)[] = [
+  'onReady',
+  'onStateChange',
+  'onPlaybackQualityChange',
+  'onPlaybackRateChange',
+  'onError',
+  'onApiChange',
+]
+const elYoutube = ref()
+
+const ready = ref(false)
+const { $script } = useScriptYouTubeIframe({
+  scriptOptions: {
+    trigger: useElementScriptTrigger(props.trigger, elYoutube.value),
+  },
+})
+
+let player: YT.Player
+$script.then(async (instance) => {
+  const YT = await instance.YT
+  await new Promise<void>((resolve) => {
+    if (typeof YT.Player === 'undefined')
+      YT.ready(resolve)
+    else
+      resolve()
+  })
+  player = new YT.Player(elYoutube.value, {
+    ...props,
+    events: Object.fromEntries(events.map(event => [event, (e: any) => {
+      // @ts-expect-error untyped
+      emits(event, e)
+    }])),
+  })
+})
+
+defineExpose({
+  player,
+})
+
+watch(() => props.videoId, () => {
+  player?.loadVideoById(props.videoId)
+})
+
+const poster = computed(() => `https://i.ytimg.com/vi_webp/${props.videoId}/sddefault.webp`)
+</script>
+
+<template>
+  <div ref="elYoutube" :style="{ width: `${width}px`, height: `${height}px`, position: 'relative' }">
+    <slot :poster="poster">
+      <img v-if="!ready" :src="poster" title="" :width="width" :height="height">
+    </slot>
+  </div>
+</template>

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

@@ -0,0 +1,3 @@
+import type { Ref } from 'vue';
+export type ElementScriptTrigger = 'visible' | 'mouseover' | false;
+export declare function useElementScriptTrigger(trigger: ElementScriptTrigger | undefined, el?: HTMLElement | Ref<HTMLElement | undefined> | null): Promise<void>;

package/dist/runtime/composables/useElementScriptTrigger.mjs

@@ -0,0 +1,9 @@
+import { useElementHover, useElementVisibility, watchOnce } from "@vueuse/core";
+import { ref } from "vue";
+export function useElementScriptTrigger(trigger, el) {
+  if (import.meta.server || !el)
+    return new Promise(() => {
+    });
+  const activeRef = trigger ? trigger === "mouseover" ? useElementHover(el) : useElementVisibility(el) : ref(false);
+  return trigger ? new Promise((resolve) => watchOnce(activeRef, resolve)) : Promise.resolve();
+}

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

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

package/dist/runtime/composables/useScript.mjs

@@ -10,7 +10,6 @@ export function useScript(input, options) {
   const nuxtApp = useNuxtApp();
   const id = input.key || input.src || hashCode(typeof input.innerHTML === "string" ? input.innerHTML : "");
   if (!nuxtApp.scripts?.[id]) {
-    options.beforeInit?.();
     if (import.meta.client) {
       performance?.mark?.("mark_feature_usage", {
         detail: {

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

@@ -1,12 +1,16 @@
-import { type Input } from 'valibot';
-import type { NuxtUseScriptIntegrationOptions } from '#nuxt-scripts';
+import type { RegistryScriptInput } from '#nuxt-scripts';
+/**
+ * Sample:
+ * <!-- Cloudflare Web Analytics -->
+ * <script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "12ee46bf598b45c2868bbc07a3073f58"}'></script>
+ * <!-- End Cloudflare Web Analytics -->
+ */
 export interface CloudflareWebAnalyticsApi {
     __cfBeacon: {
         load: 'single';
         spa: boolean;
         token: string;
     };
-    __cfRl?: unknown;
 }
 declare global {
     interface Window extends CloudflareWebAnalyticsApi {
@@ -15,8 +19,6 @@ declare global {
 export declare const CloudflareWebAnalyticsOptions: import("valibot").ObjectSchema<{
     /**
      * The Cloudflare Web Analytics token.
-     *
-     * Required when used for the first time.
      */
     token: import("valibot").StringSchema<string>;
     /**
@@ -30,5 +32,5 @@ export declare const CloudflareWebAnalyticsOptions: import("valibot").ObjectSche
     token: string;
     spa?: boolean | undefined;
 }>;
-export type CloudflareWebAnalyticsInput = Input<typeof CloudflareWebAnalyticsOptions>;
-export declare function useScriptCloudflareWebAnalytics<T extends CloudflareWebAnalyticsApi>(options?: CloudflareWebAnalyticsInput, _scriptOptions?: NuxtUseScriptIntegrationOptions): any;
+export type CloudflareWebAnalyticsInput = RegistryScriptInput<typeof CloudflareWebAnalyticsOptions>;
+export declare function useScriptCloudflareWebAnalytics<T extends CloudflareWebAnalyticsApi>(_options?: CloudflareWebAnalyticsInput): any;

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

@@ -1,13 +1,11 @@
 import { boolean, minLength, object, optional, string } from "valibot";
 import { defu } from "defu";
-import { useScript, validateScriptInputSchema } from "#imports";
+import { registryScript } from "../utils.mjs";
 export const CloudflareWebAnalyticsOptions = object({
   /**
    * The Cloudflare Web Analytics token.
-   *
-   * Required when used for the first time.
    */
-  token: string([minLength(33)]),
+  token: string([minLength(32)]),
   /**
    * Cloudflare Web Analytics enables measuring SPAs automatically by overriding the History API’s pushState function
    * and listening to the onpopstate. Hash-based router is not supported.
@@ -16,19 +14,19 @@ export const CloudflareWebAnalyticsOptions = object({
    */
   spa: optional(boolean())
 });
-export function useScriptCloudflareWebAnalytics(options, _scriptOptions) {
-  const scriptOptions = _scriptOptions || {};
-  scriptOptions.beforeInit = () => {
-    import.meta.dev && validateScriptInputSchema(CloudflareWebAnalyticsOptions, options);
-    _scriptOptions?.beforeInit?.();
-  };
-  return useScript({
-    "src": "https://static.cloudflareinsights.com/beacon.min.js",
-    "data-cf-beacon": JSON.stringify(defu(options, { spa: true }))
-  }, {
-    ...scriptOptions,
-    use() {
-      return { __cfBeacon: window.__cfBeacon, __cfRl: window.__cfRl };
+export function useScriptCloudflareWebAnalytics(_options) {
+  return registryScript("cloudflareWebAnalytics", (options) => ({
+    scriptInput: {
+      "src": "https://static.cloudflareinsights.com/beacon.min.js",
+      "data-cf-beacon": JSON.stringify(defu(options, { spa: true }))
+    },
+    schema: import.meta.dev ? CloudflareWebAnalyticsOptions : void 0,
+    scriptOptions: {
+      // we want to load earlier so that the web vitals reports are correct
+      trigger: "client",
+      use() {
+        return { __cfBeacon: window.__cfBeacon };
+      }
     }
-  });
+  }), _options);
 }

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

@@ -1,5 +1,4 @@
-import { type Input } from 'valibot';
-import type { NuxtUseScriptIntegrationOptions } from '#nuxt-scripts';
+import type { RegistryScriptInput } from '#nuxt-scripts';
 export interface ConfettiApi {
     addConfetti: (options?: {
         emojis: string[];
@@ -16,8 +15,9 @@ export declare const ConfettiOptions: import("valibot").ObjectSchema<Pick<{
     packageName: import("valibot").StringSchema<string>;
     file: import("valibot").OptionalSchema<import("valibot").StringSchema<string>, undefined, string | undefined>;
     version: import("valibot").OptionalSchema<import("valibot").StringSchema<string>, undefined, string | undefined>;
+    type: import("valibot").OptionalSchema<import("valibot").StringSchema<string>, undefined, string | undefined>;
 }, "version">, undefined, {
     version?: string | undefined;
 }>;
-export type ConfettiInput = Input<typeof ConfettiOptions>;
-export declare function useScriptConfetti(options: ConfettiInput, _scriptOptions?: NuxtUseScriptIntegrationOptions): any;
+export type ConfettiInput = RegistryScriptInput<typeof ConfettiOptions>;
+export declare function useScriptConfetti<T extends ConfettiApi>(options?: ConfettiInput): any;

package/dist/runtime/registry/confetti.mjs

@@ -1,15 +1,18 @@
 import { pick } from "valibot";
 import { NpmOptions, useScriptNpm } from "./npm.mjs";
 export const ConfettiOptions = pick(NpmOptions, ["version"]);
-export function useScriptConfetti(options, _scriptOptions = {}) {
-  return useScriptNpm({
+export function useScriptConfetti(options) {
+  return useScriptNpm("js-confetti", {
+    // ...options,
     packageName: "js-confetti",
-    version: options.version,
+    version: options?.version,
     file: "dist/js-confetti.browser.js"
-  }, {
-    ...options,
-    use() {
-      return new window.JSConfetti();
-    }
+    // scriptOptions: {
+    //   use() {
+    //     if (typeof window.JSConfetti === 'undefined')
+    //       return null
+    //     return new window.JSConfetti()
+    //   },
+    // },
   });
 }

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

@@ -1,5 +1,4 @@
-import { type Input } from 'valibot';
-import type { NuxtUseScriptIntegrationOptions } from '#nuxt-scripts';
+import type { RegistryScriptInput } from '#nuxt-scripts';
 type StandardEvents = 'AddPaymentInfo' | 'AddToCart' | 'AddToWishlist' | 'CompleteRegistration' | 'Contact' | 'CustomizeProduct' | 'Donate' | 'FindLocation' | 'InitiateCheckout' | 'Lead' | 'Purchase' | 'Schedule' | 'Search' | 'StartTrial' | 'SubmitApplication' | 'Subscribe' | 'ViewContent';
 interface EventObjectProperties {
     content_category?: string;
@@ -34,10 +33,10 @@ declare global {
     }
 }
 export declare const FacebookPixelOptions: import("valibot").ObjectSchema<{
-    id: import("valibot").UnionSchema<(import("valibot").StringSchema<string> | import("valibot").NumberSchema<number>)[], string | number>;
+    id: import("valibot").UnionSchema<(import("valibot").NumberSchema<number> | import("valibot").StringSchema<string>)[], string | number>;
 }, undefined, {
     id: string | number;
 }>;
-export type FacebookPixelInput = Input<typeof FacebookPixelOptions>;
-export declare function useScriptFacebookPixel<T extends FacebookPixelApi>(options?: FacebookPixelInput, _scriptOptions?: NuxtUseScriptIntegrationOptions): any;
+export type FacebookPixelInput = RegistryScriptInput<typeof FacebookPixelOptions>;
+export declare function useScriptFacebookPixel<T extends FacebookPixelApi>(_options?: FacebookPixelInput): any;
 export {};

package/dist/runtime/registry/facebook-pixel.mjs

@@ -1,13 +1,21 @@
 import { number, object, string, union } from "valibot";
-import { useScript, validateScriptInputSchema } from "#imports";
+import { registryScript } from "../utils.mjs";
+import { FacebookPixelScriptResolver } from "../../registry";
 export const FacebookPixelOptions = object({
   id: union([string(), number()])
 });
-export function useScriptFacebookPixel(options, _scriptOptions) {
-  const scriptOptions = _scriptOptions || {};
-  scriptOptions.beforeInit = () => {
-    import.meta.dev && validateScriptInputSchema(FacebookPixelOptions, options);
-    if (import.meta.client) {
+export function useScriptFacebookPixel(_options) {
+  return registryScript("facebookPixel", (options) => ({
+    scriptInput: {
+      src: FacebookPixelScriptResolver()
+    },
+    schema: FacebookPixelOptions,
+    scriptOptions: {
+      use() {
+        return { fbq: window.fbq };
+      }
+    },
+    clientInit: import.meta.server ? void 0 : () => {
       const fbq = window.fbq = function(...params) {
         fbq.callMethod ? fbq.callMethod(...params) : fbq.queue.push(params);
       };
@@ -20,15 +28,5 @@ export function useScriptFacebookPixel(options, _scriptOptions) {
       fbq("init", options?.id);
       fbq("track", "PageView");
     }
-    _scriptOptions?.beforeInit?.();
-  };
-  return useScript({
-    key: "facebookPixel",
-    src: "https://connect.facebook.net/en_US/fbevents.js"
-  }, {
-    ...scriptOptions,
-    use() {
-      return { fbq: window.fbq };
-    }
-  });
+  }), _options);
 }