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.