CODEWITHSUNDEEP
nuxt.js
qwerty
qwerty

Reputation: 126

How to use vue2.leaflet.markercluster in Nuxt.js project?

I am trying to use vue2.leaflet.markercluster in a nuxt project but when using the component in the console it gives the error

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option

My code:

<template>
  <div id="map" style="height: 100vh">
    <client-only>
      <l-map>
        <l-tile-layer></l-tile-layer>
        <v-marker-cluster>
    <v-marker v-for="c in elements" v-if="c.id !== null" :lat-lng="c.latlon">
      <v-popup :content="c.tooltipContent"></v-popup>
    </v-marker>
  </v-marker-cluster>
      </l-map>
    </client-only>
  </div>
</template>
<script>
import Vue2LeafletMarkerCluster from "vue2-leaflet-markercluster"
export default {
"elements": [{/*elements*/}]
}
</script>

Upvotes: 2

Views: 1106

Answers (1)

majid
majid

Reputation: 75

  1. Add vue2-leaflet or nuxt-leaflet

  2. install vue2-leaflet-markercluster.

     npm install --save vue2-leaflet-markercluster

  3. Create a file named vue2-leaflet-markercluster.js in plugins folder with the following content.

    import Vue from "vue";
import * as L from "leaflet";
import Vue2LeafletMarkerCluster from "vue2-leaflet-markercluster";
import "leaflet/dist/leaflet.css";
import "leaflet.markercluster/dist/MarkerCluster.css";
import "leaflet.markercluster/dist/MarkerCluster.Default.css";

Vue.component("v-marker-cluster", Vue2LeafletMarkerCluster);

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

Vue.use(LeafletPlugin);

  4. In your nuxt.config.js file add the following object into plugins array

    {src: '~/plugins/vue2-leaflet-markercluster.js', mode:'client'},

  5. In your html/component use v-marker cluster as

     <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>
   <v-marker-cluster>
    <l-marker :lat-lng="[55.9464418,7.1277591]"></l-marker>
    <l-marker :lat-lng="[55.9464418,8.1277591]"></l-marker>
    <l-marker :lat-lng="[55.9464418,9.1277591]"></l-marker>
   </v-marker-cluster>
   </l-map>
  </client-only>
 </div>

Upvotes: 4

Related Questions