Add l-moving-marker component as a plugin in nuxt

[pcm0nk]

What I did is I installed it then added import LMovingMarker from 'vue2-leaflet-movingmarker' to my leaflef plugin in nuxt plugins folder and addingVue.component('l-moving-marker', LMovingMarker); at the end , but when leaflet map opens it throws this error Unknown custom element: <l-moving-marker> -did you register the component correctly? For recursive components, make sure to provide the "name" option.

// leafletmap plugin.js for nuxt
import Vue from 'vue';
import {LMap, LTileLayer, LMarker , LIconDefault, LPopup} from 'vue2-leaflet';
import {VGeosearch} from 'vue2-leaflet-geosearch';
import LMovingMarker from 'vue2-leaflet-movingmarker'
import L from 'leaflet';
delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
})

Vue.component('l-map', LMap);
Vue.component('l-tilelayer', LTileLayer);
Vue.component('l-marker', LMarker);
Vue.component('l-popup', LPopup);
Vue.component('l-icon-default', LIconDefault);
Vue.component('v-geosearch', VGeosearch);
Vue.component('l-moving-marker', LMovingMarker);

Thanks for any help

[Stuffa1991]

Mine looks as following with nuxt

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

import {LMap, LTileLayer, LMarker, LControl, LTooltip, LIcon} from 'vue2-leaflet';
import { Icon } from 'leaflet';
import 'leaflet/dist/leaflet.css';

const VueLeaflet = {
  install(Vue, options) {
    Vue.component('l-map', LMap);
    Vue.component('l-marker', LMarker);
    Vue.component('l-tile-layer', LTileLayer);
    Vue.component('l-control', LControl);
    Vue.component('l-tooltip', LTooltip);
    Vue.component('l-icon', LIcon);
  }
};

Vue.use(VueLeaflet);

delete Icon.Default.prototype._getIconUrl;
Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});

export default VueLeaflet;

// plugins/vue-leaflet-moving-marker.js
import Vue from 'vue';

import LMovingMarker from 'vue2-leaflet-movingmarker';

const VueLeafletMovingMarker = {
  install(Vue, options) {
    Vue.component('l-moving-marker', LMovingMarker);
  }
};

Vue.use(VueLeafletMovingMarker);

export default VueLeafletMovingMarker;

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

However the moving marker seems to have an issue with tooltips, i can't make them show.

Version 0.0.1 works fine, but the new 1.0.0 doesn't not sure if its some overlapping dependencies but the error im getting could indicate it.

// Error on 1.0.0 for popup
Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at NewClass._updateContent (webpack-internal:///./node_modules/leaflet/dist/leaflet-src.js:9660)
    at NewClass.update (webpack-internal:///./node_modules/leaflet/dist/leaflet-src.js:9571)
    at NewClass.onAdd (webpack-internal:///./node_modules/leaflet/dist/leaflet-src.js:9508)
    at NewClass.onAdd (webpack-internal:///./node_modules/leaflet/dist/leaflet-src.js:9794)
    at NewClass._layerAdd (webpack-internal:///./node_modules/leaflet/dist/leaflet-src.js:6616)
    at NewClass.whenReady (webpack-internal:///./node_modules/leaflet/dist/leaflet-src.js:4476)
    at NewClass.addLayer (webpack-internal:///./node_modules/leaflet/dist/leaflet-src.js:6678)
    at NewClass.openPopup (webpack-internal:///./node_modules/leaflet/dist/leaflet-src.js:10018)
    at NewClass.openPopup (webpack-internal:///./node_modules/vue2-leaflet-movingmarker/dist/vue2-leaflet-movingmarker.common.js:11581)
    at NewClass._openPopup (webpack-internal:///./node_modules/vue2-leaflet-movingmarker/dist/vue2-leaflet-movingmarker.common.js:11656)

// Error on tooltip 1.0.0

leaflet-src.js?e11e:9661 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at NewClass._updateContent (leaflet-src.js?e11e:9661)
    at NewClass.update (leaflet-src.js?e11e:9572)
    at NewClass.onAdd (leaflet-src.js?e11e:9509)
    at NewClass.onAdd (leaflet-src.js?e11e:10257)
    at NewClass._layerAdd (leaflet-src.js?e11e:6617)
    at NewClass.whenReady (leaflet-src.js?e11e:4477)
    at NewClass.addLayer (leaflet-src.js?e11e:6679)
    at NewClass.openTooltip (leaflet-src.js?e11e:10407)
    at NewClass.openTooltip (vue2-leaflet-movingmarker.common.js?529a:11979)
    at NewClass._openTooltip (vue2-leaflet-movingmarker.common.js?529a:12045)