Leaflet

Leaflet is an open-source JavaScript library for interactive maps. It provides the map renderer and interaction model; you choose the tile provider, attribution, geocoding, and routing services separately.

Nuxt Scripts supports Leaflet 1.9.4 through the useScriptLeaflet() composable and a small set of declarative components. First-party mode bundles the SDK by default, while Nuxt Scripts embeds the styles and marker images locally.

Setup

Install Leaflet's types, then enable the registry entry:

pnpm add -D @types/leaflet

export default defineNuxtConfig({
  scripts: {
    registry: {
      leaflet: { trigger: false },
    },
  },
})

Quick Start

Leaflet does not include map imagery. This example explicitly chooses OpenStreetMap's standard tile service and keeps its required visible attribution.

<script setup lang="ts">
const center = ref<[number, number]>([-37.8136, 144.9631])
</script>

<template>
  <ScriptLeafletMap
    :center="center"
    :zoom="13"
    width="100%"
    :height="480"
    aria-label="Map of central Melbourne"
  >
    <ScriptLeafletTileLayer
      url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
      :options="{
        maxZoom: 19,
        attribution: '&copy; <a href=&quot;https://www.openstreetmap.org/copyright&quot;>OpenStreetMap contributors</a>',
      }"
    />

    <ScriptLeafletMarker
      :position="center"
      alt="Melbourne CBD"
    >
      <ScriptLeafletPopup>
        Melbourne CBD
      </ScriptLeafletPopup>
    </ScriptLeafletMarker>
  </ScriptLeafletMap>
</template>

The default visible trigger defers the Leaflet SDK and all tile requests until the map approaches the viewport. The component reserves its dimensions during SSR to avoid layout shift.

Components

• <ScriptLeafletMap> creates the map and controls lazy loading.
• <ScriptLeafletTileLayer> connects an explicit tile provider.
• <ScriptLeafletMarker> adds accessible, reactive markers.
• <ScriptLeafletPopup> binds slotted HTML to a marker or coordinate.
• <ScriptLeafletGeoJson> renders inline GeoJSON.

Guides

• Pickup Locator builds a practical locator from markers, popups, and GeoJSON.
• Tiles & Attribution explains where map imagery comes from and what production deployments need to consider.
• Performance & Accessibility covers loading triggers, SSR sizing, fallback content, and decorative maps.