Problems using vue2-leaflet-markercluster in Nuxt

[pablocattaneo]

Using nuxt-leaflet module I can set an use alot of the component list: https://github.com/schlunsen/nuxt-leaflet/blob/master/lib/templates/plugin.js like l-marker, l-map, l-tile-layer, but my project also require to use https://github.com/jperelli/vue2-leaflet-markercluster

What is the correct way to implement it in Nuxt?

I try this:

Create a plugins: vue2-leaflet-markercluster.js

import Vue from "vue";
import Vue2LeafletMarkerCluster from "vue2-leaflet-markercluster";
Vue.component("v-marker-cluster", Vue2LeafletMarkerCluster);
Vue.use(Vue2LeafletMarkerCluster);

Then set it in nuxt.config.js

  plugins: [
    { src: "~/plugins/vue2-leaflet-markercluster.js", mode: "client" }
  ],
  modules: [
    "@nuxtjs/axios",
    "@nuxtjs/pwa",
    "@nuxtjs/sitemap",
    "nuxt-leaflet"
  ],

and implemented in a page:

<script>
export default {
  head() {
    return {
      link: [
        {
          rel: "stylesheet",
          href:
            "https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css"
        },
        {
          rel: "stylesheet",
          href:
            "https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css"
        }
      ]
    };
  },
  data() {
    return {
      tileLayer: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      latitude: -34.477518,
      longitude: -58.496699,
      zoom: 10,
      options: { scrollWheelZoom: false },
      markers: [
        { markerLat: "-34.477518", markerpLng: "-58.496699" },
        { markerLat: "-34.808505", markerpLng: "-58.402064" },
        { markerLat: "-34.796024", markerpLng: "-58.388854" },
        { markerLat: "-34.678739", markerpLng: "-58.338006" },
        { markerLat: "-34.678269", markerpLng: "-58.367989" },
       ...
      ]
    };
  },
  mounted() {
    // eslint-disable-next-line no-console
    console.log(this.$L);
  }
};
</script>

The output:

It look great, the problem happens when I click over a cluster it give me this error:

Uncaught TypeError: Cannot read property '_removePath' of undefined

[nelsonlarocca]

any new about this ? thanks !

[pablocattaneo]

Hi @nelsonlarocca I solved the problem in that way:

1- I created a plugin in the plugins directory I named it vue2-leaflet-markercluster.js. The code:

import Vue from "vue";
import * as L from "leaflet";
import Vue2LeafletMarkerCluster from "vue2-leaflet-markercluster";
Vue.component("v-marker-cluster", Vue2LeafletMarkerCluster);

const LeafletPlugin = {
  install(Vue) {
    // Expose Leaflet
    Vue.prototype.$L = L;
  }
};

Vue.use(LeafletPlugin);

2- I added plugin in /nuxt.config.js

Hope it can help you.

[nelsonlarocca]

Thanks Pablo, it worked out !!!

[pablocattaneo]

Great @nelsonlarocca !! Glad to hear that!!

[davebot9000]

Awesome! Should close this issue? @pablocattaneo

[jperelli]

Closing issue. Thanks @pablocattaneo. Also as an alternative, try upgrading to latest version, it works very differently on exposing the global.L variable

[pablocattaneo]

Awesome! Should close this issue? @pablocattaneo

Yes @dpr989 you can close it!