Initialize dynamic Component in Code using Vue.js

Question

I am currently developing a web application that is used to display elements for events on a map provided by HERE Maps. I am using Vue.

I have some components, but the relevant component is the component HereMaps.vue which initializes the map using the HERE Maps Api.

The HERE Maps Api provides the possibility to place so called InfoBubbles on the map showing additional information. These InfoBubbles can be provided some HTML-code in order to customize their appearance.

Please refer to the documentation for additional information

Following the documentation the code looks something like this:

let bubble = new H.ui.InfoBubble(marker.getPosition(), {
    content: "<div class='someClass'>Some Content</div>"
});
this.ui.addBubble(bubble)

This is happening after mount in the "mounted" method from Vue in the "HereMaps" component. The Bubbles are added in a "closed" (hidden) form and dynamically "opened" to reveal their content when the corresponding marker icon on the map is clicked. Therefore the HTML-code is present on the DOM after the component is mounted and is not removed at a later stage.

Now instead of supplying custom code within each bubble added to the UI i want to just add a component like this:

let bubble = new H.ui.InfoBubble(marker.getPosition(), {
    content: "<myDynamicComponent></myDynamicComponent>"
});
this.ui.addBubble(bubble)

It does not matter to me wether the component is initialized using props or if it is conditionally rendered depending on the state of a global variable. I just want to be able to use the "myDynamicComponent" in order to customize the appearance in a different file. Otherwise the design process gets very messy.

As far as i know this is not possible or at least i was not able to get it work. This is probably due to the fact that the "myDynamicComponent" is not used within the "template" of the "HereMaps" component und thus Vue does not know that it needs to render something here after the directive is added to the DOM in the "mounted" method.

This is what the InfoBubble looks using normal HTML as an argument:

This is what the InfoBubble looks using the component as an argument: It appears to just be empty. No content of the "myDynamicComponent" is shown.

Does anyone have any idea how i could solve this problem.

Thank You.

donMateo donMateo · Accepted Answer · 2018-01-19T13:58:41

Answer is a bit complicated and I bet you wouldn't like it:) content param can accept String or Node value. So you can make new Vue with rendered your component and pass root element as content param.

BTW, Vue does not work as you think, <myDynamicComponent></myDynamicComponent> bindings, etc exists in HTML only in compile time. After that all custom elements(components) are compiled to render functions. So you can't use your components in that way.

Give us fiddle with your problem, so we can provide working example:)

Initialize dynamic Component in Code using Vue.js

1 Answers