@nuxtjs/leaflet

Nuxt Leaflet

A Nuxt 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 without the need to configure anything.

• ✨  Release Notes

• 📖  Documentation

Features

• ⚡  No configuration needed
• 🦺  Typescript support
• 🚠  Auto import

Quick Setup

npx nuxi@latest module add @nuxtjs/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 official documentation library.

Basic

<template>
  <div style="height:100vh; width:100vw">
    <LMap
      ref="map"
      :zoom="zoom"
      :center="[47.21322, -1.559482]"
      :use-global-leaflet="false"
    >
      <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"
      />
    </LMap>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const zoom = ref(6)
</script>

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

Changelog

v1.0.14

This release is a migration from the old nuxt3-leaflet module to the new @nuxtjs/leaflet module. It includes the same features as version 1.0.13 of the old module, but also enable compatibility with Nuxt 4.

Consider that this is the new module's first stable release, as previous versions are not available on npm through the @nuxtjs namespace.

🏡 Chore

• Indicate compatibility with Nuxt 4 : commit

❤️ Contributors

• Gugustinette [e-mail]
• Daniel Roe [e-mail]