Scripts

MapLibre GL JS

MapLibre GL JS is an open-source WebGL renderer for interactive vector maps. It renders the map and handles interaction; you choose the style, tile source, attribution, geocoding, and routing services separately.

Nuxt Scripts supports MapLibre GL JS v6 through the useScriptMapLibre() composable and declarative components for common map resources. MapLibre v6 is ESM-only, so Nuxt Scripts loads it from the maplibre-gl package rather than a CDN script tag. The stylesheet comes from the same package.

injectStylesboolean = true

Inject the MapLibre stylesheet when the script begins loading. Disable this when supplying the stylesheet through Nuxt.

stylesheetUrlstring

Stylesheet URL used when `injectStyles` is enabled. Defaults to the stylesheet shipped in the `maplibre-gl` package.

workerUrlstring

Worker URL passed to `maplibregl.setWorkerUrl()`. Set this when serving the MapLibre worker from your own origin.

Setup

Install MapLibre v6, then enable the registry entry:

pnpm add -D maplibre-gl

nuxt.config.ts

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

Quick Start

Pass a MapLibre style URL or an inline style specification. This example uses OpenFreeMap's keyless Liberty style.

<script setup lang="ts">
import type { LngLatLike } from 'maplibre-gl'

const center = ref<LngLatLike>([144.9631, -37.8136])
</script>

<template>
  <ScriptMapLibreMap
    v-model:center="center"
    map-style="https://tiles.openfreemap.org/styles/liberty"
    :zoom="12"
    width="100%"
    :height="480"
    aria-label="Map of central Melbourne"
  >
    <template #description>
      Interactive street map centred on Melbourne CBD.
    </template>

    <ScriptMapLibreNavigationControl position="top-right" />

    <ScriptMapLibreMarker
      :position="center"
      aria-label="Melbourne CBD"
    >
      <ScriptMapLibrePopup>
        Melbourne CBD
      </ScriptMapLibrePopup>
    </ScriptMapLibreMarker>
  </ScriptMapLibreMap>
</template>

MapLibre coordinates use [longitude, latitude] order. This is the reverse of the [latitude, longitude] convention used by Leaflet.

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

OpenFreeMap's public instance needs no API key, but it has no SLA. Read Styles & Providers before choosing a production style service.

Real-world example: Build a delivery tracker with reactive route progress, a live courier marker, error fallback content, and an accessible status alternative.

Components

<ScriptMapLibreMap> creates the map and controls lazy loading.
<ScriptMapLibreMarker> adds an accessible, reactive marker.
<ScriptMapLibrePopup> binds slotted HTML to a marker or coordinate.
<ScriptMapLibreNavigationControl> adds zoom, compass, and pitch controls.
<ScriptMapLibreScaleControl> adds a scale bar.
<ScriptMapLibreGeolocateControl> finds the user's location.
<ScriptMapLibreFullscreenControl> toggles fullscreen mode.
<ScriptMapLibreAttributionControl> moves or restyles the map attribution.
<ScriptMapLibreGeoJson> manages a GeoJSON source and its style layers, including clustering.

Guides

Delivery Tracker builds a practical route tracker from reactive markers and styled GeoJSON.
Styles & Providers separates the renderer, style, tile service, and map data choices.
Performance, CSP & Accessibility covers loading triggers, WebGL fallbacks, workers, and decorative maps.
Raw Map Instance covers layer events, filtering, feature state, and animated camera moves.

Edit this page

Markdown For LLMs

Adds MapLibre's fullscreen button to the nearest parent map. The map container goes fullscreen by default. Pass options.container to make a different element fullscreen.

Matomo Analytics

Track Matomo page views and events with built-in consent controls.

On this page

Setup
Quick Start
Components
Guides