How can I integrate a Vue component in a leaflet popup? [duplicate]

Question

My project uses Vue.js and leaflet to display some data on a map, in the shape of markers.

The markers on the map are bound popups, which content I would like to be reactively updated when the associated data change, just like any Vue component does.

I checked the option of vueleaflet, which provides a popup component for leaflet. But this script defines the content of the popup though an attribute of the component: <l-popup content="a popup"></l-popup>. This way isn't so relevant in my case, as I have some complex templating to insert in the popup (including conditional statements and subcomponents).

I would rather need something like:

<l-popup>
  My elaborate content here.
</l-popup>

Answer 1

I advise you to use vue2-leaflet instead.

It has a popup component that behaves the way you describe. See here.

There is also another solution, if you don't want to use a package to do the link between vue and leaflet. It's almost a trick.

You create your elaborate content in a component, but you hide it :

<my-elaborate-popup-content v-show=False ref='foo'><my-elaborate-popup-content>

Then you can access the generated html of that component in your code like this :

const template = this.$refs.foo.$el.innerHTML

and use it to fill your popup !