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">
 <no-ssr>
   <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>
 </no-ssr>
</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

MisakiMa/nuxt-leaflet