Performance & Accessibility

ScriptLeafletMap loads near the viewport by default. It also reserves the configured dimensions during SSR, which prevents the page from shifting when Leaflet starts.

Loading Strategies

Visible by Default

The default visible trigger delays the SDK, stylesheet, and tile requests until the map approaches the viewport:

<ScriptLeafletMap :center="[-37.8136, 144.9631]" :zoom="13" />

Immediate Loading

Load immediately when the map is the page's primary content:

<ScriptLeafletMap
  trigger="immediate"
  :center="[-37.8136, 144.9631]"
  :zoom="13"
/>

You can also use an element event trigger such as mousedown when the map should load only after explicit interaction.

Stable Layout and Loading States

Always give the map a height. A number is treated as pixels; a CSS length works well for responsive layouts:

<ScriptLeafletMap
  width="100%"
  height="clamp(24rem, 60vw, 36rem)"
  :center="[-37.8136, 144.9631]"
/>

Use the placeholder, loading, and error slots when the default states do not fit your page. Put addresses, opening hours, and other essential details outside the map so they remain available before loading and after an error.

Interactive Maps

Give the map a specific aria-label and each marker a unique alt. Leaflet's keyboard controls remain available after the map loads.

<ScriptLeafletMap
  :center="[-37.8136, 144.9631]"
  :zoom="13"
  aria-label="Pickup locations in central Melbourne"
>
  <ScriptLeafletMarker
    :position="[-37.8164, 144.9656]"
    alt="Flinders Lane pickup location"
  />
</ScriptLeafletMap>

A text list should duplicate any location a user must discover or select. A visual marker alone is not enough for store selection, delivery status, or directions.

Decorative Maps

Set :interactive="false" when the map is only decoration. The component disables map input, hides it from assistive technology, and makes child controls inert.

<ScriptLeafletMap
  :center="[-37.8136, 144.9631]"
  :zoom="13"
  :interactive="false"
/>

Custom Styles

Nuxt Scripts injects its embedded Leaflet stylesheet when the SDK starts loading. If your app already provides Leaflet CSS, disable the embedded copy:

export default defineNuxtConfig({
  css: ['leaflet/dist/leaflet.css'],
})

<ScriptLeafletMap
  :center="[-37.8136, 144.9631]"
  :inject-styles="false"
/>

Use the same approach when an inline-style Content Security Policy prevents the default stylesheet injection.