nuxt-leaflet

Nuxt module for leafletjs

Features

Nuxt module for vue2-leaflet.

See vue2-leaflet for more details.

Setup

Add nuxt-leaflet dependency using yarn or npm to your project
Add nuxt-leaflet to modules section of nuxt.config.js

{  modules: [    // Simple usage    'nuxt-leaflet',    // With options    ['nuxt-leaflet', { /* module options */ }], ]}

Usage

Add the map to your page

<div id="map-wrap" style="height: 100vh"> <client-only>   <l-map :zoom=13 :center="[55.9464418,8.1277591]">     <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>     <l-marker :lat-lng="[55.9464418,8.1277591]"></l-marker>   </l-map> </client-only></div>

The Leaflet 'L' object can be found on vue component: this.$L

Typescript

If you're using TypeScript, you'll need to add nuxt-leaflet in your compilerOptions of your tsconfig.json :

{  "compilerOptions": {    "types": [      "@types/node",      "@nuxt/vue-app",      "nuxt-leaflet"    ]  }}

You'll then be able to have autocompletion in Vue instances (this.$L).

List of currently implemented components

See components supported

Development

Clone this repository
Install dependencies using yarn install or npm install
Start development server using npm run dev

License

MIT License