Note: leaflet is a great project, but I run into problem when dynamic updating layers.Now using openlayers for vue 3, I would recomment to use this project.

This demo project shows how to use leaflet map in an vue 3 web application. In this example the quasar framework was used, but this can be anything (vuetify, no framework).

Two approaches where used (demonstrated in one webpage):

• Leaflet directly (left side of screenshot)

  Use the leaflet package directly (install with npm i leaflet). The leaflet creation is all done in the script part. This gives a lot of control (any leaflet function can be used)

• With library vue-leaflet (right side of screenshot)

  Use the leaflet package through the vue-leaflet library (install with npm i vue-leaflet). The advantage is that the leaflet can be defined in the vue template. Reactive the elements can be bound. A disadvantage is that you have less control over the leaflet. Should be possible with map reference, but I didn't find out how.

Used chrome as web browser to test (didn't check other browsers)

Install the Node Package Manager (NPM).

npm install
npm run dev
# Open webbrowser on port 9000

The leaflet library is in plain JavaScript. This demo uses typescript for validation and intellisense (Visual Code Editor). In the project @types/leaflet the typescript definitions for leaflet can be found. After installing with npm i @types/leaflet the definitions are placed in node_modules\@types\leaflet. Visual Code will automatically combine this type information with the leaflet library (leaflet is still JavaScript).

• Quasar Framework

• Vue.js - The Progressive JavaScript Framework

• Leaflet

• Vue-leaflet

• Node.js and npm