Vue2leaflet: Where does the L object come from?

[wishinghand]

When I import some components like

import {
  LMap,
  LTileLayer,
  LMarker,
  LPolygon,
  LPolyline,
  LPopup
} from "vue2-leaflet";

I'm able to access an L object, with methods like DomEvent, control, and Icon. Is this somehow made global when importing LMap? I'm using ESLint and it's not liking the lack of definition for it. I could write in an exception, but I was curious myself how I'm able to access it. I only know of it from copying examples in the repo.

[DonNicoJs]

Vue leaflet instantiate leaflet which at the version that is used attach itself to the window object. Thus you are able to use it

[hpo14]

Hi, i have the same question.
I use nuxt as my client/sever
And i copy the code from example/components/simple.vue then run the server

but my nuxt send me compile error

```
ERROR in ./pages/maps2.vue

/home/user/nuxtTestProj/pages/maps2.vue
42:15 error 'L' is not defined no-undef
43:18 error 'L' is not defined no-undef
46:15 error 'L' is not defined no-undef

✖ 3 problems (3 errors, 0 warnings)
1 error, 0 warnings potentially fixable with the --fix option.

@ ./.nuxt/router.js 28:9-75
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js```

[DonNicoJs]

@hpo14 We work with Nuxt as well, to run it on nuxt you need 2 things:
1)
A js file in your plugins folder ( say the name is : vue-leaflet.js )
Add this in your file:

import Vue from 'vue';
import Vue2Leaflet from 'vue2-leaflet';

import L from 'leaflet';
delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
});

Vue.component('l-map', Vue2Leaflet.LMap);
Vue.component('l-tilelayer', Vue2Leaflet.LTileLayer);
Vue.component('l-marker', Vue2Leaflet.LMarker);
Vue.component('l-tooltip', Vue2Leaflet.LTooltip);
Vue.component('l-popup', Vue2Leaflet.LPopup);
Vue.component('l-control-zoom', Vue2Leaflet.LControlZoom);
Vue.component('l-geo-json', Vue2Leaflet.LGeoJson);
Vue.component('l-feature-group', Vue2Leaflet.LFeatureGroup);

in your nuxt.config.js:

plugins: [ { src: '~plugins/vue-leaflet.js', ssr: false }]

2) No-ssr plugins, you can check the one from egoist or the official one from nuxt to wrap your

[hpo14]

@lordfuoco thank you very much
I'll try your method later i get home. And make response for the result.

it work~ ^_^

https://github.com/schlunsen/nuxt-leaflet
I also found this github and follow steps, and result is a page of blank (?)
If look from the Chrome DevTools, it actual generate the map (look like it DO really generate it)
But from Devtool''s [Network Tab], my page doesnt send any req to tile.osm.org, that's wired.

Am i do anything wrong ?

OK, i found the reason and i solve it.

[DonNicoJs]

@hpo14 if this is resolved can you please close the issue ?