Here is Vue components for Leaflet maps, which is inspired by react-leaflet and vue-google-maps.
A vue component for leaflet.js
This library is compatible with vue 3.0, and leaflet 1.9.x.
npm install vueleaflet vue leaflet -saveYou can input some Vue-styled components in a .vue file in order to use leaflet.js, like Layout.vue.
<l-map
id="map1"
:options="{
zoom: 13,
center: { lat: 51.505, lng: -0.09 },
minZoom: 8,
maxZoom: 15,
attributionControl: true,
zoomControl: true
}"
>
<l-tilelayer
urlTemplate="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
:options="{
attribution: 'vue-leaflet',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'pk.eyJ1IjoieHdwaXNtZSIsImEiOiJ5cTlCQTlRIn0.QdV-wNUKbgs7jAlbVE747Q'
}"
/>
<l-marker
:latlng="{ lat: 51.505, lng: -0.09 }"
:options="{
title: 'marker1',
opacity: 1,
draggable: true
}"
>
<l-tooltip :options="{ content: 'tooltip with marker1' }" />
</l-marker>
<l-marker
:latlng="{ lat: 51.505, lng: -0.11 }"
:options="{
title: 'marker2'
}"
>
<l-popup :options="{ content: 'popup with marker2' }" />
</l-marker>
<l-tooltip
:options="{ content: 'tooltip standalone' }"
:latlng="{ lat: 51.505, lng: 0 }"
/>
<l-popup
:options="{ content: 'popup standalone' }"
:latlng="{ lat: 51.505, lng: 0 }"
/>
<l-circle
:latlng="[51.508, -0.11]"
:options="{
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}"
/>
<l-polygon
:latlng="[
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]"
/>
</l-map># serve the example
npm run dev
# build the library
npm run build
# build the example
npm run build: example
PR Welcome