Skip to content
Quick guide to making Leaflet works with Nuxt
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE
README.md

README.md

Nuxt-Leaflet

A Nuxt module already exists for using Leaflet with Nuxt (nuxt-leaflet) but it doesn't expose L from Leaflet, which makes the use of plugins really difficult, which now exports $L (See https://github.com/M-Gregoire/Nuxt-Leaflet/issues/2).

Moveover, Leaflet cannot be used (cleanly) with Nuxt by default because of ssr. The best way I found was creating a Nuxt plugin (Thanks Christian Nwamba!)

Steps

Vue2Leaflet

Install Vue2Leaflet : $ npm install vue2-leaflet leaflet --save

Nuxt plugin

Create a Nuxt Plugin in src/plugins :

// src/plugins/vue-leaflet.js
import Vue from 'vue'

import Vue2Leaflet from 'vue2-leaflet'

const VueLeaflet = {

  install(Vue, options) {
    Vue.component('l-map', Vue2Leaflet.LMap)
    Vue.component('l-marker', Vue2Leaflet.LMarker)
    Vue.component('l-tile-layer', Vue2Leaflet.LTileLayer)
  }

};

Vue.use(VueLeaflet);

export default VueLeaflet;

Of course, you can add any other component from Leaflet that you need using Vue.component, such as L-Rectangle.

Add the plugin to nuxt.config.js and disable ssr :

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

CSS

Finally, because we are using a Nuxt plugin, the CSS won't work properly. You can either :

  • Add it in each page you are using Leaflet : <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css">

  • Load it globally using a CDN :

// nuxt.config.js
  head: {
    link: [
      { rel: 'stylesheet', href: 'https://unpkg.com/leaflet@1.2.0/dist/leaflet.css' },
    ],
  },
  • Load it locally, you will also need to serve the image locally also :
// nuxt.config.js
  css: [
    "~assets/css/leaflet/leaflet.css",
  ],
  • Load it in the Leaflet plugin (Thank you xpuu):
import 'leaflet/dist/leaflet.css'

Use it !

You can now access L in your vue template !
Example : (Don't forget to replace your.mapbox.access.token) !

<template>
	<div id="map-wrap"></div>
</template>
<script>
	export default {
		name: 'leaflet-map',
		mounted() {
			var mymap = L.map('map-wrap').setView([51.505, -0.09], 13)
			L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'your.mapbox.access.token'
}).addTo(mymap);
		}
	}
</script>

Add methods to plugin

I did this in order to being able to use PruneCluster with Nuxt.

Add your import in the plugin and set a property for the methods you wan't to use :
Example :

import Vue from 'vue'

import Vue2Leaflet from 'vue2-leaflet'

import { PruneCluster, PruneClusterForLeaflet } from 'exports-loader?PruneCluster,PruneClusterForLeaflet!prunecluster/dist/PruneCluster.js'

const VueLeaflet = {

  install(Vue, options) {
    Vue.component('l-map', Vue2Leaflet.LMap)
    Vue.component('l-marker', Vue2Leaflet.LMarker)
    Vue.component('l-tile-layer', Vue2Leaflet.LTileLayer)
    Vue.prototype.PruneCluster = PruneCluster;
    Vue.prototype.PruneClusterForLeaflet = PruneClusterForLeaflet;
  }
};


Vue.use(VueLeaflet);

export default VueLeaflet;

In your vue template, you can call your methods by prepending them with this. Example :

<template>
	<div id="map-wrap"></div>
</template>
<script>
	export default {
		name: 'leaflet-map',
		mounted() {
			var map = L.map("map-wrap", {
				attributionControl: false,
				zoomControl: false
			}).setView(L.latLng(-37.79, 175.27), 12);
			L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
				detectRetina: true,
				maxNativeZoom: 17
			}).addTo(map);

			var pruneCluster = new this.PruneClusterForLeaflet();
			var marker = new this.PruneCluster.Marker(59.8717, 11.1909);
			pruneCluster.RegisterMarker(marker);
			map.addLayer(pruneCluster);
		},
	}
</script>

Donation

This project helped you ? You can buy me a cup of coffee
Donate

You can’t perform that action at this time.