2

Estoy tratando de usar vue2.leaflet.markercluster en un proyecto nuxt pero al usar el componente, en la consola da el error

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

codigo:

<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>
1
  • El error te indica que no has registrado alguno de los componentes que estas utilizando ¿Podrías editar tu pregunta y agregar el código donde haces el "export default components"?. Aca un ejemplo
    – Marcos
    Commented el 15 ene. 2021 a las 12:38

1 respuesta 1

0

En nuxt.js es necesario hacer algunos pasos adicionales para utilizar cualquier dependencia, todo esto gracias al sistema de plugins de nuxt.js.

Lo primero que tendiras que hacer es instalar la dependencia por npm o yarn.

npm install --save vue2-leaflet-markercluster

Una vez la hallas instalado procederemos a crear un plugin.

Nota: los plugins deberian crearce en una carpeta encontrada en la raiz del proyecto llamada plugins

En este caso vamos a importarlo de forma global para que ya no tengas problemas de importacion. sin embargo puedes importalo localmente utilizando vue.use

// plugins/leaflet.js

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

ó

// plugins/leaflet.js

import Vue from 'vue'
import Vue2LeafletMarkerCluster from 'vue2-leaflet-markercluster'
Vue.use(Vue2LeafletMarkerCluster)

Este plugin le indica a nuxt.js la forma en la que quieres utilizar tu dependencia.

Cuando crees el plugin solo tendras que registrarlo en nuxt.config y eso sera todo ya podras importar este componente en cualquier parte del proyecto

// nuxt.config.js

export default {
  plugins: [
    { src: '~/plugins/leaflet.js', mode: 'client' }, // only on clientside
  ]
}

Nota: Cuando importes el plugin pudes importarlo en dos modos, server o client, esto dependera del tipo de dependencia que utilizas. La mayoria de las dependencias de vue no soportan el modo server entonces te recomiendo siempre utilizarla con client a menos de que tenga su implementacion para nuxt.

finalmente usalo asi en el archivo de vue:

export default {
...
  components: {
    'v-marker-cluster': Vue2LeafletMarkerCluster
  ...
  },
...
}

Cuentame si pude ayudarte. Saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.