---
title: "Leaflet"
description: "Add lightweight, provider-agnostic interactive maps to Nuxt with lazy loading."
canonical_url: "https://scripts.nuxt.com/scripts/leaflet"
last_updated: "2026-08-11T04:26:57.949Z"
---

[Leaflet](https://leafletjs.com/) 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()`](/scripts/leaflet/api/use-script-leaflet) 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.

<script-types :exclude-components="true">



</script-types>

## Setup

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

```bash
pnpm add -D @types/leaflet
```

```ts [nuxt.config.ts]
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.

```vue
<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.

<callout color="amber">

OpenStreetMap's public tile service has usage limits and no SLA. Read [Tiles & Attribution](/scripts/leaflet/guides/tiles-and-attribution) before choosing it for production.

</callout>

<callout icon="i-lucide-map-pin">

**Real-world example:** [Build a pickup locator](/scripts/leaflet/guides/pickup-locator) with a keyboard-accessible store list, reactive selection, marker popups, error fallback content, and a GeoJSON delivery zone.

</callout>

## Components

- [`<ScriptLeafletMap>`](/scripts/leaflet/api/script-leaflet-map) creates the map and controls lazy loading.
- [`<ScriptLeafletTileLayer>`](/scripts/leaflet/api/tile-layer) connects an explicit tile provider.
- [`<ScriptLeafletMarker>`](/scripts/leaflet/api/marker) adds accessible, reactive markers.
- [`<ScriptLeafletPopup>`](/scripts/leaflet/api/popup) binds slotted HTML to a marker or coordinate.
- [`<ScriptLeafletGeoJson>`](/scripts/leaflet/api/geojson) renders inline GeoJSON.

## Guides

- [Pickup Locator](/scripts/leaflet/guides/pickup-locator) builds a practical locator from markers, popups, and GeoJSON.
- [Tiles & Attribution](/scripts/leaflet/guides/tiles-and-attribution) explains where map imagery comes from and what production deployments need to consider.
- [Performance & Accessibility](/scripts/leaflet/guides/performance-and-accessibility) covers loading triggers, SSR sizing, fallback content, and decorative maps.