Demo with vue component

[AurelienLavorel]

Hello,

Can you make an example with Vue component?

Thank you

[KoRiGaN]

Not sure what you mean here. In the demo all part of the app are in separated components using Vue2Leaflet.

[See here] : https://github.com/KoRiGaN/Vue2Leaflet/tree/master/examples/src/components

Could you please clarify if needed ?

[AurelienLavorel]

I'm speaking about global component sorry

Vue.component('my-component', {
  // options
})

<div id="example">
  <my-component></my-component>
</div>

I'm trying to adapt this example to global component but I can’t make it work.

Thank you for your help.

[KoRiGaN]

Then you can just declare then globally like this.

import Vue from 'vue'
import Vue2Leaflet from 'vue2-leaflet';

Vue.component( 'v-map', Vue2Leaflet.Map);
Vue.component( 'v-tilelayer', Vue2Leaflet.TileLayer);
Vue.component( 'v-marker', Vue2Leaflet.Marker);
Vue.component( 'v-poly', Vue2Leaflet.Polyline);
Vue.component('v-group', Vue2Leaflet.LayerGroup);

'v-map' and other tag name are up to you. Use one that make sense for you.

[AurelienLavorel]

It's what I tried but I can't initialize data if I declare component that way, do you know how should I do?

[KoRiGaN]

Do you have an example I can help on ?

[AurelienLavorel]

It's hard to make an example without publishing the project, I'm a newbie with vuejs. I finally find a way to make it work. I populate parameters directly from my laravel app.

Thank you for your time! template

<v-map :zoom=6 :center="[46.385, 0.264]">
    <v-tilelayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></v-tilelayer>
    <v-marker :lat-lng="[46.385, 0.264]">
        <v-tooltip :content="'Example tooltip'"></v-tooltip>
    </v-marker>
    <v-marker :lat-lng="[47.385, 0.264]"></v-marker>
</v-map>

js

Vue.component('v-map', Vue2Leaflet.Map);
Vue.component('v-tilelayer', Vue2Leaflet.TileLayer);
Vue.component('v-marker', Vue2Leaflet.Marker);
Vue.component('v-poly', Vue2Leaflet.Polyline);
Vue.component('v-group', Vue2Leaflet.LayerGroup);
Vue.component('v-tooltip', Vue2Leaflet.Tooltip);
Vue.component('v-popup', Vue2Leaflet.Popup);
Vue.component('v-icondefault', Vue2Leaflet.IconDefault);
Vue.component('v-circle', Vue2Leaflet.LCircle);