Nuxt Leaflet

A Nuxt 3 module to use Leaflet. It was made using Vue Leaflet which is a Vue 3 wrapper for Leaflet, that exposes the original Leaflet API as Vue components.

This module is really just about making it work with Nuxt 3 without the need to configure anything.

✨ Release Notes

Features

⚡ No configuration needed
🦺 Typescript support
🚠 Auto import

Quick Setup

Run npx command to add nuxt3-leaflet into your package.json and nuxt.config.ts

npx nuxi@latest module add nuxt3-leaflet

That's it! You can now use Leaflet 🍃 in your Nuxt app ✨

Usage

For a complete list of the components available, check out the original Vue Leaflet library.

Please note that components are exported in PascalCase, so for example, write <LMap> instead of <l-map>.

Basic

<template>
  <div style="height:100svh; width:100svw">
    <LMap
      ref="map"
      :zoom="zoom"
      :center="center"
    >
      <LTileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors"
        layer-type="base"
        name="OpenStreetMap"
      />
      <!-- Example with a marker in the center of the map -->
      <LMarker
          v-if="hasMarker"
          :lat-lng="position.latLng"
        >
          <!-- Example with a custom icon set in public folder  -->
          <LIcon
            :icon-size="[32, 37]"
            :icon-anchor="[16, 37]"
            icon-url="/marker.png"
          />
        </LMarker>
    </LMap>
  </div>
</template>

<script setup lang="ts">
// Use leaflet library types
import type { PointExpression, LatLngExpression } from "leaflet"

const zoom = ref(6)

// You could re-use your map component passing props!
defineProps<{
  hasMarker: boolean
}>()

onMounted(() = {
  // and ... you could create animation on load
  zoom.value = 12
})

const position = () => {
  const position = [47.21322, -1.559482]

  // Example matching position to LMap's center and LMarker's lat-lng types
  return {
    latLng: position as LatLngExpression,
    center: position as PointExpression,
  }
}
</script>

<style>
body {
  margin: 0;
}
</style>

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release

fuentesloic / Nuxt-Leaflet