Api

<ScriptLeafletMap>

The map facade reserves layout space during SSR, loads Leaflet when triggered, creates the L.Map, and provides it to child components.

triggerElementScriptTrigger = 'visible'

Defines when the Leaflet script loads.

centerLeaflet.LatLngExpression required

zoomnumber

optionsLeaflet.MapOptions

injectStylesboolean

widthnumber | string

heightnumber | string

ariaLabelstring

interactiveboolean

rootAttrsHTMLAttributes & ReservedProps & Record<string, unknown>

center and zoom are reactive. Use v-model:center or v-model:zoom when you also want to receive user pan and zoom changes.

<ScriptLeafletMap
  v-model:center="center"
  v-model:zoom="zoom"
  width="100%"
  height="28rem"
  @ready="({ map }) => console.log(map.value)"
/>

The placeholder, awaitingLoad, loading, and error slots customize each loading state. The default error state is visible and announced with role="alert".

Edit this page

Markdown For LLMs

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.

Adds an L.TileLayer to the nearest parent map. Nuxt Scripts does not choose a tile provider for you.