4.0.0 • Published 4 years ago
leaflet-nuxt-async v4.0.0
leaflet-nuxt-async
Used Packages
This helper Package uses vue2-leaflet. Please check the vue2-leaflet Docs for more Infos.
Usage in Vue:
- Install Module via
yarn add leaflet-nuxt-async
- Require Module in main file
import 'leaflet-nuxt-async';
Usage in Nuxt:
In nuxt.config.js add
{
modules: [
'leaflet-nuxt-async/nuxt'
]
}
Usage in Nuxt witch vuetify-loader:
// Import on Top:
const matcherLeaflet = require('leaflet-nuxt-async/vuetifyLoader')
match(_originalTag, { camelTag }) {
const checkLeaflet = matcherLeaflet(camelTag)
if (checkLeaflet) {
return checkLeaflet
}
}
You can use this module with vuetify loader also without nuxt. But process.client
has to be true only on client and not while SSR.
Useing SSR
You should wrap your maps in <no-ssr>
or <client-only>
when useing SSR.
What does it do?
With this Module all Components from vue2-leaflet get registerd as async components with codesspliting in webpack.
How to get access to window.L
Normal Vue
Just use import * as L from 'leaflet'
in normal Vue.
With SSR
let L = null;
if(process.client) {
L = require('leaflet');
}
// Use L witch check for null (for example with Babel or Typescript useing L?.Icon?.default)
In Nuxt you can savely use require('leaflet')
in methods and in the mounted hoock.
Treeshaking
This Package is build with Treeshaking in Mind so not used Components are in extra chunks or removed. For leaflet consider useing our Fork EC-Nordbund/leaflet for treeshaking leaflet.