Vue-leaflet, written and compatible with Vue 3!
npm install @vue-leaflet/vue-leafletVue-leaflet, written and compatible with Vue 3!
This is a Beta version! And may yet be unstable! If you want to help, please reach out in an
issue or on discord,
or join the discussions.
- LCircle
- LCircleMarker
- LControl
- LControlAttribution
- LControlLayers
- LControlScale
- LControlZoom
- LFeatureGroup
- LGeoJson
- LIcon
- LImageOverlay
- LMap
- LMarker
- LPolygon
- LPolyline
- LPopup
- LRectangle
- LTileLayer
- LTooltip
- LWmsTileLayer
> Note that unlike the Vue 2 version, this library is fully compatible with SSR.
``bash`
yarn add @vue-leaflet/vue-leaflet leaflet
or
`bash`
npm i -D @vue-leaflet/vue-leaflet leaflet
Until the complete documentation is ready, please check the
component playground examples or the
demo project for usage with Vue 3.
Most component props mimic the vanilla Leaflet options as closely as
possible, and generally remain the same as in their Vue2Leaflet counterparts.
`vue
layer-type="base"
name="OpenStreetMap"
>
`
To see the component playground in action,
clone this repo and run the local devserver, then visit http://127.0.0.1:5173,
`bash`
git clone https://github.com/vue-leaflet/vue-leaflet.git
cd vue-leaflet
yarn
yarn dev
Note that while the vue-leaflet library has the option of enabling SSR, Leaflet itself does not.
> N.B. Using import L from "leaflet" or import { ... } from "leaflet" can lead to unexpected errors.
To provide server-side rendering and tree-shaking capabilities, vue-leaflet can be configured to use async imports from the
Leaflet ESM, by disabling the useGlobalLeaflet option on the map component, .
This can lead to issues when importing additional methods from Leaflet, because the two instances of the Leaflet
classes are technically no longer the same. See Issue 48 for more.
To avoid these issues, import any Leaflet methods asynchronously in response to the LMap component's @ready vue-leaflet SSR Demo event:`vue
``