vue 3 leaflet implementation

[ibrahim-developper]

These dependencies were not found:

• leaflet in ./node_modules/@vue-leaflet/vue-leaflet/dist/vue-leaflet.esm.js
• leaflet/dist/images/marker-icon-2x.png in ./node_modules/@vue-leaflet/vue-leaflet/dist/vue-leaflet.esm.js
• leaflet/dist/images/marker-icon.png in ./node_modules/@vue-leaflet/vue-leaflet/dist/vue-leaflet.esm.js
• leaflet/dist/images/marker-shadow.png in ./node_modules/@vue-leaflet/vue-leaflet/dist/vue-leaflet.esm.js
• leaflet/dist/leaflet-src.esm in ./node_modules/@vue-leaflet/vue-leaflet/dist/vue-leaflet.esm.js, ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=js
• leaflet/dist/leaflet.css in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=js

To install them, you can run: npm install --save leaflet leaflet/dist/images/marker-icon-2x.png leaflet/dist/images/marker-icon.png leaflet/dist/images/marker-shadow.png leaflet/dist/leaflet-src.esm leaflet/dist/leaflet.css

i'm user the same example in documentation

import "leaflet/dist/leaflet.css"
import { LMap, LGeoJson } from "@vue-leaflet/vue-leaflet";

export default {
name: 'App',
components: {
LMap,
LGeoJson,
},
data() {
return {
geojson: {
type: "FeatureCollection",
features: [
// ...
],
},
geojsonOptions: {
// Options that don't rely on Leaflet methods.
},
};
},
async beforeMount() {
// HERE is where to load Leaflet components!
const { circleMarker } = await import("leaflet/dist/leaflet-src.esm");

// And now the Leaflet circleMarker function can be used by the options:
this.geojsonOptions.pointToLayer = (feature, latLng) =>
  circleMarker(latLng, { radius: 8 });
this.mapIsReady = true;

},

[mikeu]

Hi @ibrahim-developper, have you installed Leaflet as a dependency, as the error message says to do?

npm install --save leaflet

If you're still seeing the error after doing that, then could you perhaps share a repository that demonstrates this issue?

[ibrahim-developper]

Hi @ibrahim-developper, have you installed Leaflet as a dependency, as the error message says to do?

npm install --save leaflet

If you're still seeing the error after doing that, then could you perhaps share a repository that demonstrates this issue?

i install using this commend npm i -D @vue-leaflet/vue-leaflet the error still but i use other map now

[mikeu]

i install using this commend npm i -D @vue-leaflet/vue-leaflet the error still but i use other map now

That command installs the library @vue-leaflet/vue-leaflet, but not its peer dependency leaflet. It is up to you to decide which version of Leaflet you want to include alongside this library. As the error message you posted indicates, one of your dependencies is not installed but can easily be added by running e.g. npm i -D leaflet.

[ibrahim-developper]

i install using this commend npm i -D @vue-leaflet/vue-leaflet the error still but i use other map now

That command installs the library @vue-leaflet/vue-leaflet, but not its peer dependency leaflet. It is up to you to decide which version of Leaflet you want to include alongside this library. As the error message you posted indicates, one of your dependencies is not installed but can easily be added by running e.g. npm i -D leaflet.

Ok thank you alot ♥️