@nuxt/scripts 1.3.5 → 2.0.0-beta.1

package/dist/runtime/components/GoogleMaps/useGoogleMapsResource.js

@@ -18,37 +18,6 @@ export function normalizeLatLng(p) {
   }
   return { lat: p.lat, lng: p.lng };
 }
-export function defineDeprecatedAlias(target, alias, canonicalKey, message) {
-  let warned = false;
-  Object.defineProperty(target, alias, {
-    get() {
-      if (!warned) {
-        warned = true;
-        console.warn(message);
-      }
-      return target[canonicalKey];
-    },
-    enumerable: true,
-    configurable: true
-  });
-  return target;
-}
-export function warnDeprecatedTopLevelMapProps(props) {
-  let warned = 0;
-  if (props.center !== void 0) {
-    warned++;
-    console.warn(
-      '[nuxt-scripts] <ScriptGoogleMaps> prop "center" is deprecated; use `:map-options="{ center: ... }"` instead. See https://scripts.nuxt.com/docs/migration-guide/v0-to-v1'
-    );
-  }
-  if (props.zoom !== void 0) {
-    warned++;
-    console.warn(
-      '[nuxt-scripts] <ScriptGoogleMaps> prop "zoom" is deprecated; use `:map-options="{ zoom: ... }"` instead. See https://scripts.nuxt.com/docs/migration-guide/v0-to-v1'
-    );
-  }
-  return warned;
-}
 export async function waitForMapsReady({
   mapsApi,
   map,

package/dist/runtime/components/Leaflet/ScriptLeafletGeoJson.d.vue.ts

@@ -0,0 +1,31 @@
+import type { GeoJsonObject } from 'geojson';
+import type * as Leaflet from 'leaflet';
+type __VLS_Props = {
+    /** GeoJSON object, feature, or feature collection. Replace it to update the layer. */
+    data: GeoJsonObject | GeoJsonObject[];
+    /** Options passed to `L.geoJSON`. */
+    options?: Leaflet.GeoJSONOptions;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    geoJson: import("vue").ShallowRef<Leaflet.GeoJSON<any, import("geojson").Geometry> | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: Leaflet.LeafletMouseEvent) => any;
+    contextmenu: (event: Leaflet.LeafletMouseEvent) => any;
+    dblclick: (event: Leaflet.LeafletMouseEvent) => any;
+    mousedown: (event: Leaflet.LeafletMouseEvent) => any;
+    mouseout: (event: Leaflet.LeafletMouseEvent) => any;
+    mouseover: (event: Leaflet.LeafletMouseEvent) => any;
+    layeradd: (event: Leaflet.LayerEvent) => any;
+    layerremove: (event: Leaflet.LayerEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((event: Leaflet.LeafletMouseEvent) => any) | undefined;
+    onContextmenu?: ((event: Leaflet.LeafletMouseEvent) => any) | undefined;
+    onDblclick?: ((event: Leaflet.LeafletMouseEvent) => any) | undefined;
+    onMousedown?: ((event: Leaflet.LeafletMouseEvent) => any) | undefined;
+    onMouseout?: ((event: Leaflet.LeafletMouseEvent) => any) | undefined;
+    onMouseover?: ((event: Leaflet.LeafletMouseEvent) => any) | undefined;
+    onLayeradd?: ((event: Leaflet.LayerEvent) => any) | undefined;
+    onLayerremove?: ((event: Leaflet.LayerEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Leaflet/ScriptLeafletGeoJson.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { watch } from "vue";
+import { bindLeafletEvents, useLeafletResource } from "./useLeafletResource";
+const props = defineProps({
+  data: { type: [Object, Array], required: true },
+  options: { type: null, required: false }
+});
+const emit = defineEmits(["click", "dblclick", "mousedown", "mouseover", "mouseout", "contextmenu", "layeradd", "layerremove"]);
+const geoJsonEvents = ["click", "dblclick", "mousedown", "mouseover", "mouseout", "contextmenu", "layeradd", "layerremove"];
+const geoJson = useLeafletResource({
+  create({ leaflet, map }) {
+    const layer = leaflet.geoJSON(props.data, props.options);
+    bindLeafletEvents(layer, emit, geoJsonEvents);
+    return layer.addTo(map);
+  },
+  cleanup(layer) {
+    layer.off();
+    layer.remove();
+  }
+});
+watch(() => props.data, (data) => {
+  if (!geoJson.value)
+    return;
+  geoJson.value.clearLayers();
+  if (Array.isArray(data))
+    data.forEach((item) => geoJson.value.addData(item));
+  else
+    geoJson.value.addData(data);
+});
+watch(() => props.options?.style, (style) => {
+  if (!geoJson.value)
+    return;
+  if (style)
+    geoJson.value.setStyle(style);
+  else
+    geoJson.value.resetStyle();
+}, { deep: 2 });
+defineExpose({ geoJson });
+</script>
+
+<template>
+  <!-- nuxt-scripts: Leaflet GeoJSON layer -->
+</template>

package/dist/runtime/components/Leaflet/ScriptLeafletGeoJson.vue.d.ts

@@ -0,0 +1,31 @@
+import type { GeoJsonObject } from 'geojson';
+import type * as Leaflet from 'leaflet';
+type __VLS_Props = {
+    /** GeoJSON object, feature, or feature collection. Replace it to update the layer. */
+    data: GeoJsonObject | GeoJsonObject[];
+    /** Options passed to `L.geoJSON`. */
+    options?: Leaflet.GeoJSONOptions;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    geoJson: import("vue").ShallowRef<Leaflet.GeoJSON<any, import("geojson").Geometry> | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: Leaflet.LeafletMouseEvent) => any;
+    contextmenu: (event: Leaflet.LeafletMouseEvent) => any;
+    dblclick: (event: Leaflet.LeafletMouseEvent) => any;
+    mousedown: (event: Leaflet.LeafletMouseEvent) => any;
+    mouseout: (event: Leaflet.LeafletMouseEvent) => any;
+    mouseover: (event: Leaflet.LeafletMouseEvent) => any;
+    layeradd: (event: Leaflet.LayerEvent) => any;
+    layerremove: (event: Leaflet.LayerEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((event: Leaflet.LeafletMouseEvent) => any) | undefined;
+    onContextmenu?: ((event: Leaflet.LeafletMouseEvent) => any) | undefined;
+    onDblclick?: ((event: Leaflet.LeafletMouseEvent) => any) | undefined;
+    onMousedown?: ((event: Leaflet.LeafletMouseEvent) => any) | undefined;
+    onMouseout?: ((event: Leaflet.LeafletMouseEvent) => any) | undefined;
+    onMouseover?: ((event: Leaflet.LeafletMouseEvent) => any) | undefined;
+    onLayeradd?: ((event: Leaflet.LayerEvent) => any) | undefined;
+    onLayerremove?: ((event: Leaflet.LayerEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Leaflet/ScriptLeafletMap.d.vue.ts

@@ -0,0 +1,90 @@
+import type * as Leaflet from 'leaflet';
+import type { HTMLAttributes, ReservedProps, ShallowRef } from 'vue';
+import type { ElementScriptTrigger } from '#nuxt-scripts/types';
+export { LEAFLET_MAP_INJECTION_KEY } from './useLeafletResource.js';
+export interface ScriptLeafletMapProps {
+    /**
+     * Defines when the Leaflet script loads.
+     * @default 'visible'
+     */
+    trigger?: ElementScriptTrigger;
+    /** Initial and reactively controlled map center. */
+    center: Leaflet.LatLngExpression;
+    /** Initial and reactively controlled zoom level. @default 13 */
+    zoom?: number;
+    /** Options passed to `L.map`. `center` and `zoom` use their dedicated props. */
+    options?: Leaflet.MapOptions;
+    /** Inject Leaflet's styles and embedded default marker images. @default true */
+    injectStyles?: boolean;
+    /** Width reserved before the map loads. @default 640 */
+    width?: number | string;
+    /** Height reserved before the map loads. @default 400 */
+    height?: number | string;
+    /** Accessible name for an interactive map. @default 'Interactive map' */
+    ariaLabel?: string;
+    /** Disable map input and remove it from the accessibility tree when decorative. @default true */
+    interactive?: boolean;
+    /** Attributes applied to the outer layout container. */
+    rootAttrs?: HTMLAttributes & ReservedProps & Record<string, unknown>;
+}
+export interface ScriptLeafletMapExpose {
+    leaflet: ShallowRef<typeof Leaflet | undefined>;
+    map: ShallowRef<Leaflet.Map | undefined>;
+    load: () => Promise<unknown> | unknown;
+}
+export interface ScriptLeafletMapEmits {
+    'ready': [payload: ScriptLeafletMapExpose];
+    'error': [error: Error];
+    'click': [event: Leaflet.LeafletMouseEvent];
+    'move': [event: Leaflet.LeafletEvent];
+    'moveend': [event: Leaflet.LeafletEvent];
+    'zoom': [event: Leaflet.LeafletEvent];
+    'zoomend': [event: Leaflet.LeafletEvent];
+    'update:center': [center: Leaflet.LatLng];
+    'update:zoom': [zoom: number];
+}
+export interface ScriptLeafletMapSlots {
+    default?: () => any;
+    loading?: () => any;
+    awaitingLoad?: () => any;
+    error?: (props: {
+        error: Error;
+    }) => any;
+    placeholder?: () => any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ScriptLeafletMapProps, ScriptLeafletMapExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (error: Error) => any;
+    ready: (payload: ScriptLeafletMapExpose) => any;
+    click: (event: Leaflet.LeafletMouseEvent) => any;
+    move: (event: Leaflet.LeafletEvent) => any;
+    zoom: (event: Leaflet.LeafletEvent) => any;
+    zoomend: (event: Leaflet.LeafletEvent) => any;
+    moveend: (event: Leaflet.LeafletEvent) => any;
+    "update:center": (center: Leaflet.LatLng) => any;
+    "update:zoom": (zoom: number) => any;
+}, string, import("vue").PublicProps, Readonly<ScriptLeafletMapProps> & Readonly<{
+    onError?: ((error: Error) => any) | undefined;
+    onReady?: ((payload: ScriptLeafletMapExpose) => any) | undefined;
+    onClick?: ((event: Leaflet.LeafletMouseEvent) => any) | undefined;
+    onMove?: ((event: Leaflet.LeafletEvent) => any) | undefined;
+    onZoom?: ((event: Leaflet.LeafletEvent) => any) | undefined;
+    onZoomend?: ((event: Leaflet.LeafletEvent) => any) | undefined;
+    onMoveend?: ((event: Leaflet.LeafletEvent) => any) | undefined;
+    "onUpdate:center"?: ((center: Leaflet.LatLng) => any) | undefined;
+    "onUpdate:zoom"?: ((zoom: number) => any) | undefined;
+}>, {
+    injectStyles: boolean;
+    trigger: ElementScriptTrigger;
+    width: number | string;
+    height: number | string;
+    zoom: number;
+    ariaLabel: string;
+    interactive: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ScriptLeafletMapSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Leaflet/ScriptLeafletMap.vue

@@ -0,0 +1,171 @@
+<script>
+export { LEAFLET_MAP_INJECTION_KEY } from "./useLeafletResource";
+</script>
+
+<script setup>
+import { computed, onBeforeUnmount, onMounted, onUnmounted, provide, shallowRef, toRaw, useTemplateRef, watch } from "vue";
+import { useScriptTriggerElement } from "#nuxt-scripts/composables/useScriptTriggerElement";
+import { useScriptLeaflet } from "#nuxt-scripts/registry/leaflet";
+import ScriptAriaLoadingIndicator from "../ScriptAriaLoadingIndicator.vue";
+import { LEAFLET_MAP_INJECTION_KEY } from "./useLeafletResource";
+const props = defineProps({
+  trigger: { type: [String, Array, Boolean], required: false, default: "visible" },
+  center: { type: null, required: true },
+  zoom: { type: Number, required: false, default: 13 },
+  options: { type: null, required: false },
+  injectStyles: { type: Boolean, required: false, default: true },
+  width: { type: [Number, String], required: false, default: 640 },
+  height: { type: [Number, String], required: false, default: 400 },
+  ariaLabel: { type: String, required: false, default: "Interactive map" },
+  interactive: { type: Boolean, required: false, default: true },
+  rootAttrs: { type: Object, required: false }
+});
+const emit = defineEmits(["ready", "error", "click", "move", "moveend", "zoom", "zoomend", "update:center", "update:zoom"]);
+defineSlots();
+const rootEl = useTemplateRef("rootEl");
+const mapEl = useTemplateRef("mapEl");
+const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl });
+const { load, status, onLoaded, onError } = useScriptLeaflet({
+  injectStyles: props.injectStyles,
+  scriptOptions: { trigger }
+});
+const leaflet = shallowRef();
+const map = shallowRef();
+const isMapReady = shallowRef(false);
+const loadError = shallowRef(new Error("Leaflet failed to load"));
+const initializationError = shallowRef();
+const hasError = computed(() => status.value === "error" || !!initializationError.value);
+let isUnmounted = false;
+onError((error) => {
+  loadError.value = error ?? new Error("Leaflet failed to load");
+  emit("error", loadError.value);
+});
+const exposed = { leaflet, map, load };
+defineExpose(exposed);
+provide(LEAFLET_MAP_INJECTION_KEY, { leaflet, map });
+function bindMapEvents(instance) {
+  instance.on("click", (event) => emit("click", event));
+  instance.on("move", (event) => emit("move", event));
+  instance.on("moveend", (event) => {
+    emit("moveend", event);
+    emit("update:center", instance.getCenter());
+  });
+  instance.on("zoom", (event) => emit("zoom", event));
+  instance.on("zoomend", (event) => {
+    emit("zoomend", event);
+    emit("update:zoom", instance.getZoom());
+  });
+}
+function mapOptions() {
+  if (props.interactive)
+    return { ...props.options };
+  return {
+    ...props.options,
+    boxZoom: false,
+    doubleClickZoom: false,
+    dragging: false,
+    keyboard: false,
+    scrollWheelZoom: false,
+    touchZoom: false,
+    zoomControl: false
+  };
+}
+onMounted(() => {
+  onLoaded((instance) => {
+    if (isUnmounted || !mapEl.value)
+      return;
+    leaflet.value = instance.L;
+    let mapInstance;
+    try {
+      mapInstance = instance.L.map(mapEl.value, mapOptions());
+      mapInstance.setView(toRaw(props.center), props.zoom, { animate: false });
+      bindMapEvents(mapInstance);
+      map.value = mapInstance;
+      isMapReady.value = true;
+      emit("ready", exposed);
+    } catch (error) {
+      mapInstance?.remove();
+      const cause = error instanceof Error ? error : new Error("Leaflet map initialization failed");
+      initializationError.value = cause;
+      loadError.value = cause;
+      emit("error", cause);
+    }
+  });
+});
+watch(() => props.center, (center) => {
+  if (!map.value || !leaflet.value)
+    return;
+  const next = leaflet.value.latLng(toRaw(center));
+  if (!map.value.getCenter().equals(next))
+    map.value.panTo(next, { animate: false });
+}, { deep: 1 });
+watch(() => props.zoom, (zoom) => {
+  if (map.value && map.value.getZoom() !== zoom)
+    map.value.setZoom(zoom);
+});
+const DIGITS_ONLY_RE = /^\d+$/;
+const DIGITS_PX_RE = /^\d+px$/i;
+function toCssUnit(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
+function isPixelValue(value) {
+  return typeof value === "number" || typeof value === "string" && (DIGITS_ONLY_RE.test(value) || DIGITS_PX_RE.test(value));
+}
+function pixelValue(value) {
+  return isPixelValue(value) ? Number.parseFloat(String(value)) : void 0;
+}
+const rootAttrs = computed(() => ({
+  ...trigger instanceof Promise ? trigger.ssrAttrs || {} : {},
+  ...props.rootAttrs,
+  "aria-busy": status.value === "loading" ? true : void 0,
+  "style": [
+    {
+      position: "relative",
+      maxWidth: "100%",
+      width: toCssUnit(props.width),
+      height: isPixelValue(props.width) && isPixelValue(props.height) ? "auto" : toCssUnit(props.height),
+      aspectRatio: isPixelValue(props.width) && isPixelValue(props.height) ? `${pixelValue(props.width)} / ${pixelValue(props.height)}` : void 0
+    },
+    props.rootAttrs?.style
+  ]
+}));
+onBeforeUnmount(() => {
+  isUnmounted = true;
+});
+onUnmounted(() => {
+  map.value?.off();
+  map.value?.remove();
+  map.value = void 0;
+});
+</script>
+
+<template>
+  <div ref="rootEl" v-bind="rootAttrs">
+    <div
+      ref="mapEl"
+      :aria-hidden="interactive ? void 0 : 'true'"
+      :aria-label="interactive ? ariaLabel : void 0"
+      :inert="interactive ? void 0 : true"
+      :role="interactive ? 'region' : void 0"
+      :style="{
+  position: 'absolute',
+  inset: 0,
+  width: '100%',
+  height: '100%',
+  maxWidth: '100%',
+  visibility: isMapReady ? 'visible' : 'hidden'
+}"
+    />
+    <slot v-if="!isMapReady && !hasError" name="placeholder" />
+    <slot v-if="hasError" name="error" :error="loadError">
+      <p role="alert">
+        The map could not be loaded.
+      </p>
+    </slot>
+    <slot v-else-if="status === 'loading'" name="loading">
+      <ScriptAriaLoadingIndicator />
+    </slot>
+    <slot v-else-if="status === 'awaitingLoad'" name="awaitingLoad" />
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/Leaflet/ScriptLeafletMap.vue.d.ts

@@ -0,0 +1,90 @@
+import type * as Leaflet from 'leaflet';
+import type { HTMLAttributes, ReservedProps, ShallowRef } from 'vue';
+import type { ElementScriptTrigger } from '#nuxt-scripts/types';
+export { LEAFLET_MAP_INJECTION_KEY } from './useLeafletResource.js';
+export interface ScriptLeafletMapProps {
+    /**
+     * Defines when the Leaflet script loads.
+     * @default 'visible'
+     */
+    trigger?: ElementScriptTrigger;
+    /** Initial and reactively controlled map center. */
+    center: Leaflet.LatLngExpression;
+    /** Initial and reactively controlled zoom level. @default 13 */
+    zoom?: number;
+    /** Options passed to `L.map`. `center` and `zoom` use their dedicated props. */
+    options?: Leaflet.MapOptions;
+    /** Inject Leaflet's styles and embedded default marker images. @default true */
+    injectStyles?: boolean;
+    /** Width reserved before the map loads. @default 640 */
+    width?: number | string;
+    /** Height reserved before the map loads. @default 400 */
+    height?: number | string;
+    /** Accessible name for an interactive map. @default 'Interactive map' */
+    ariaLabel?: string;
+    /** Disable map input and remove it from the accessibility tree when decorative. @default true */
+    interactive?: boolean;
+    /** Attributes applied to the outer layout container. */
+    rootAttrs?: HTMLAttributes & ReservedProps & Record<string, unknown>;
+}
+export interface ScriptLeafletMapExpose {
+    leaflet: ShallowRef<typeof Leaflet | undefined>;
+    map: ShallowRef<Leaflet.Map | undefined>;
+    load: () => Promise<unknown> | unknown;
+}
+export interface ScriptLeafletMapEmits {
+    'ready': [payload: ScriptLeafletMapExpose];
+    'error': [error: Error];
+    'click': [event: Leaflet.LeafletMouseEvent];
+    'move': [event: Leaflet.LeafletEvent];
+    'moveend': [event: Leaflet.LeafletEvent];
+    'zoom': [event: Leaflet.LeafletEvent];
+    'zoomend': [event: Leaflet.LeafletEvent];
+    'update:center': [center: Leaflet.LatLng];
+    'update:zoom': [zoom: number];
+}
+export interface ScriptLeafletMapSlots {
+    default?: () => any;
+    loading?: () => any;
+    awaitingLoad?: () => any;
+    error?: (props: {
+        error: Error;
+    }) => any;
+    placeholder?: () => any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ScriptLeafletMapProps, ScriptLeafletMapExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (error: Error) => any;
+    ready: (payload: ScriptLeafletMapExpose) => any;
+    click: (event: Leaflet.LeafletMouseEvent) => any;
+    move: (event: Leaflet.LeafletEvent) => any;
+    zoom: (event: Leaflet.LeafletEvent) => any;
+    zoomend: (event: Leaflet.LeafletEvent) => any;
+    moveend: (event: Leaflet.LeafletEvent) => any;
+    "update:center": (center: Leaflet.LatLng) => any;
+    "update:zoom": (zoom: number) => any;
+}, string, import("vue").PublicProps, Readonly<ScriptLeafletMapProps> & Readonly<{
+    onError?: ((error: Error) => any) | undefined;
+    onReady?: ((payload: ScriptLeafletMapExpose) => any) | undefined;
+    onClick?: ((event: Leaflet.LeafletMouseEvent) => any) | undefined;
+    onMove?: ((event: Leaflet.LeafletEvent) => any) | undefined;
+    onZoom?: ((event: Leaflet.LeafletEvent) => any) | undefined;
+    onZoomend?: ((event: Leaflet.LeafletEvent) => any) | undefined;
+    onMoveend?: ((event: Leaflet.LeafletEvent) => any) | undefined;
+    "onUpdate:center"?: ((center: Leaflet.LatLng) => any) | undefined;
+    "onUpdate:zoom"?: ((zoom: number) => any) | undefined;
+}>, {
+    injectStyles: boolean;
+    trigger: ElementScriptTrigger;
+    width: number | string;
+    height: number | string;
+    zoom: number;
+    ariaLabel: string;
+    interactive: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ScriptLeafletMapSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Leaflet/ScriptLeafletMarker.d.vue.ts

@@ -0,0 +1,47 @@
+import type * as Leaflet from 'leaflet';
+type __VLS_Props = {
+    /** Reactive marker position. */
+    position: Leaflet.LatLngExpression;
+    /** Unique text alternative for the marker icon. */
+    alt?: string;
+    /** Tooltip text for the marker icon. */
+    title?: string;
+    /** Options passed to `L.marker`. */
+    options?: Leaflet.MarkerOptions;
+};
+type __VLS_Slots = {
+    default?: () => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    marker: import("vue").ShallowRef<Leaflet.Marker<any> | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: Leaflet.LeafletMouseEvent) => any;
+    contextmenu: (event: Leaflet.LeafletMouseEvent) => any;
+    dblclick: (event: Leaflet.LeafletMouseEvent) => any;
+    drag: (event: Leaflet.LeafletEvent) => any;
+    dragend: (event: Leaflet.DragEndEvent) => any;
+    dragstart: (event: Leaflet.LeafletEvent) => any;
+    mousedown: (event: Leaflet.LeafletMouseEvent) => any;
+    mouseout: (event: Leaflet.LeafletMouseEvent) => any;
+    mouseover: (event: Leaflet.LeafletMouseEvent) => any;
+    move: (event: Leaflet.LeafletEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((event: Leaflet.LeafletMouseEvent) => any) | undefined;
+    onContextmenu?: ((event: Leaflet.LeafletMouseEvent) => any) | undefined;
+    onDblclick?: ((event: Leaflet.LeafletMouseEvent) => any) | undefined;
+    onDrag?: ((event: Leaflet.LeafletEvent) => any) | undefined;
+    onDragend?: ((event: Leaflet.DragEndEvent) => any) | undefined;
+    onDragstart?: ((event: Leaflet.LeafletEvent) => any) | undefined;
+    onMousedown?: ((event: Leaflet.LeafletMouseEvent) => any) | undefined;
+    onMouseout?: ((event: Leaflet.LeafletMouseEvent) => any) | undefined;
+    onMouseover?: ((event: Leaflet.LeafletMouseEvent) => any) | undefined;
+    onMove?: ((event: Leaflet.LeafletEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Leaflet/ScriptLeafletMarker.vue

@@ -0,0 +1,70 @@
+<script setup>
+import { inject, onMounted, provide, watch } from "vue";
+import { bindLeafletEvents, LEAFLET_MAP_INJECTION_KEY, LEAFLET_MARKER_INJECTION_KEY, useLeafletResource } from "./useLeafletResource";
+const props = defineProps({
+  position: { type: null, required: true },
+  alt: { type: String, required: false },
+  title: { type: String, required: false },
+  options: { type: null, required: false }
+});
+const emit = defineEmits(["click", "dblclick", "mousedown", "mouseover", "mouseout", "contextmenu", "dragstart", "drag", "dragend", "move"]);
+defineSlots();
+const mapContext = inject(LEAFLET_MAP_INJECTION_KEY, void 0);
+const markerEvents = ["click", "dblclick", "mousedown", "mouseover", "mouseout", "contextmenu", "dragstart", "drag", "dragend", "move"];
+function markerOptions() {
+  return {
+    ...props.options,
+    alt: props.alt ?? props.options?.alt,
+    title: props.title ?? props.options?.title
+  };
+}
+const marker = useLeafletResource({
+  create({ leaflet, map }) {
+    const instance = leaflet.marker(props.position, markerOptions());
+    bindLeafletEvents(instance, emit, markerEvents);
+    return instance.addTo(map);
+  },
+  cleanup(instance) {
+    instance.off();
+    instance.remove();
+  }
+});
+provide(LEAFLET_MARKER_INJECTION_KEY, { marker });
+defineExpose({ marker });
+onMounted(() => {
+  if (import.meta.dev && !props.alt && !props.options?.alt) {
+    console.warn("[nuxt-scripts] <ScriptLeafletMarker> should have a unique `alt` for screen reader users.");
+  }
+});
+watch(() => props.position, (position) => marker.value?.setLatLng(position), { deep: 1 });
+watch(markerOptions, (options) => {
+  if (!marker.value || !mapContext?.leaflet.value)
+    return;
+  mapContext.leaflet.value.Util.setOptions(marker.value, options);
+  if (options.icon)
+    marker.value.setIcon(options.icon);
+  if (options.opacity !== void 0)
+    marker.value.setOpacity(options.opacity);
+  if (options.zIndexOffset !== void 0)
+    marker.value.setZIndexOffset(options.zIndexOffset);
+  if (options.draggable === true)
+    marker.value.dragging?.enable();
+  else if (options.draggable === false)
+    marker.value.dragging?.disable();
+  const element = marker.value.getElement();
+  if (element) {
+    if (options.alt)
+      element.setAttribute("alt", options.alt);
+    else
+      element.removeAttribute("alt");
+    if (options.title)
+      element.setAttribute("title", options.title);
+    else
+      element.removeAttribute("title");
+  }
+}, { deep: 2 });
+</script>
+
+<template>
+  <slot />
+</template>

package/dist/runtime/components/Leaflet/ScriptLeafletMarker.vue.d.ts

@@ -0,0 +1,47 @@
+import type * as Leaflet from 'leaflet';
+type __VLS_Props = {
+    /** Reactive marker position. */
+    position: Leaflet.LatLngExpression;
+    /** Unique text alternative for the marker icon. */
+    alt?: string;
+    /** Tooltip text for the marker icon. */
+    title?: string;
+    /** Options passed to `L.marker`. */
+    options?: Leaflet.MarkerOptions;
+};
+type __VLS_Slots = {
+    default?: () => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    marker: import("vue").ShallowRef<Leaflet.Marker<any> | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: Leaflet.LeafletMouseEvent) => any;
+    contextmenu: (event: Leaflet.LeafletMouseEvent) => any;
+    dblclick: (event: Leaflet.LeafletMouseEvent) => any;
+    drag: (event: Leaflet.LeafletEvent) => any;
+    dragend: (event: Leaflet.DragEndEvent) => any;
+    dragstart: (event: Leaflet.LeafletEvent) => any;
+    mousedown: (event: Leaflet.LeafletMouseEvent) => any;
+    mouseout: (event: Leaflet.LeafletMouseEvent) => any;
+    mouseover: (event: Leaflet.LeafletMouseEvent) => any;
+    move: (event: Leaflet.LeafletEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((event: Leaflet.LeafletMouseEvent) => any) | undefined;
+    onContextmenu?: ((event: Leaflet.LeafletMouseEvent) => any) | undefined;
+    onDblclick?: ((event: Leaflet.LeafletMouseEvent) => any) | undefined;
+    onDrag?: ((event: Leaflet.LeafletEvent) => any) | undefined;
+    onDragend?: ((event: Leaflet.DragEndEvent) => any) | undefined;
+    onDragstart?: ((event: Leaflet.LeafletEvent) => any) | undefined;
+    onMousedown?: ((event: Leaflet.LeafletMouseEvent) => any) | undefined;
+    onMouseout?: ((event: Leaflet.LeafletMouseEvent) => any) | undefined;
+    onMouseover?: ((event: Leaflet.LeafletMouseEvent) => any) | undefined;
+    onMove?: ((event: Leaflet.LeafletEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};