🔌 Vue-Leaflet Plugins Wrapper

A modern Vue 3 wrapper for Leaflet v2-alpha plugins, extending vue-leaflet. Built with the Composition API, SSR-compatible, and designed to integrate seamlessly with the Vue-Leaflet ecosystem.

⚠️ This is an early-stage project. Only a few plugins are supported yet — contributions and requests are welcome via issues or discussions.

🚀 What's New

• ✅ Unified plugin wrapper system for Leaflet v2
• ✅ Works out-of-the-box with @maxel01/vue-leaflet
• ✅ SSR support tested with Nuxt
• ✅ Consistent Vue 3 Composition API interface
• ✅ Plugin test helpers for easy development

✅ Available Plugins

The following plugins are currently wrapped and ready for use:

☑️ Leaflet.Donut (draw donuts)
☑️ Leaflet.heat (heatmap layer)
☑️ Leaflet.hotline (heatmap-style polylines)
☑️ Leaflet.MarkerCluster (animated marker clustering)
☑️ Leaflet.RotatedMarker (rotate markers)

More plugins will be added over time. If you need a specific plugin, open a request in the repo.

⚠️ Note: Leaflet v1 plugins are not directly compatible with Leaflet v2.
However, there is a possibility to use the Leaflet-V1-polyfill. Check out the Leaflet.MarkerCluster implementation for more.

📦 Installation

pnpm add @maxel01/vue-leaflet-plugins @maxel01/vue-leaflet [email protected]
# or
yarn add @maxel01/vue-leaflet-plugins @maxel01/vue-leaflet [email protected]
# or
npm i @maxel01/vue-leaflet-plugins @maxel01/vue-leaflet [email protected]

🧑‍💻 Usage

See the vue-leaflet-plugins-docs for detailed examples. Here’s a quick start using the Hotline plugin:

<script setup lang="ts">
import { LMap, LTileLayer } from '@maxel01/vue-leaflet'
import { LHotline } from '@maxel01/vue-leaflet-plugins'
</script>

<template>
  <LMap :zoom="9" :center="[47.41322, -1.219482]">
    <LTileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        layer-type="base"
        name="OpenStreetMap"
    />
    <LHotline
        :lat-lngs="[
                [47.334852, -1.509485, 150],
                [47.342596, -1.328731, 250],
                [47.241487, -1.190568, 350],
                [47.234787, -1.358337, 250]
            ]"
        :min="150"
        :max="350"
    />
  </LMap>
</template>

🧪 Interactive Playground

Unlock the full potential of vue-leaflet-plugins with interactive demo components built right into the official documentation. The playground lets you explore real-world plugin usage, experiment with features live, and see how everything fits together.

Want to test Server-Side Rendering (SSR)? Dive into the Nuxt playground for a hands-on SSR experience.

To run the Nuxt Playground locally:

git clone https://github.com/maxel01/vue-leaflet-plugins.git
cd vue-leaflet
pnpm install
pnpm dev

Visit: http://127.0.0.1:3000

Or use the Vue-specific playground:

pnpm dev:vue

Visit: http://127.0.0.1:5173

🛠 Contribution

This repo uses pnpm for building and development.

📘 How to install PNPM

See the contribution guide for more details.

🙌 Credits

• vue-leaflet/vue-leaflet
• Leaflet and plugin authors
• Community contributors who help port plugins to v2