@ec-nordbund/nuxt-vue2-leaflet
v3.2.1
Published
Vue2 leaflet nuxt wrapper
Downloads
101
Readme
vue2-leaflet-nuxt
Helper for vue2-leaflet with nuxt
Install
yarn add vue2-leaflet-nuxt vue2-leaflet
# Optional
yarn add leaflet-gesture-handling
In your config add:
// nuxt.config.js
export default {
components: true, // Important
modules: ['vue2-leaflet-nuxt'],
}
Done.
What does this do?
- Adds components to @nuxt/components so they are automaticly importet as needed. (see https://github.com/nuxt/components)
- On SSR it replaces the components with a dummy-Component (you should wrap them in client-only)
- On first use of a component it sets the images load css and if installed add leaflet-gesture-handling
How?
Component that is imported looks like
if (process.client) {
require("../init.js");
}
export default process.client
? /*#__PURE__*/ require("vue2-leaflet/dist/components/LCircleMarker.js")
.default
: /*#__PURE__*/ require("../noop.js").default;
In init.js
there are some config changes to Leaflet. noop.js
is a empty component. The PURE comments are good for treeshaking.
Noop:
export default process.env.NODE_ENV === "development"
? { render: (h) => h("Component muss in client-only gewrapt werden") }
: {};