How to Implement Vue.js Components in HERE Maps for JavaScript?

How to Implement Dynamic and Customizable Vue.js Components in Html content of HERE Maps for JavaScript?

Example of implementation for H.ui.InfoBubble UI object:

You can mount multiple Vue.js components on a single page using the Vue.$mount() method:

1. Creating Components:
Firstly, create the components that you wish to render.:

Vue.component('component-a', { template: 'Component A'});Vue.component('component-b', { template: 'Component B'});

2. Creating Vue Instances:
Create Vue instances for each component:

var vm1 = new Vue({ template: ''});var vm2 = new Vue({ template: ''});

3. HERE JS API:
Ensure that you have the DOM elements with identifiers to which you want to mount the components.:

var infob1 = document.createElement('div');infob1.id = 'infob1';var infob2 = document.createElement('div');infob2.id = 'infob2';

4. Mounting Components:
Use the Vue.$mount() method to mount each Vue instance to the respective DOM element:

var bubble1 = new H.ui.InfoBubble(position1, { // set content content: infob1 }); // show info bubble1 ui.addBubble(bubble1); // <-now infob1 HTML element is in DOM vm1.$mount('#infob1'); var bubble2 = new H.ui.InfoBubble(position2, { // set content content: infob2 }); // show info bubble2 ui.addBubble(bubble2); //<-now infob2 HTML element is in DOM vm2.$mount('#infob2');

Now, component-a will be rendered inside the DOM element with the identifier #infob1, and component-b will be rendered inside the DOM element with the identifier #infob2. This approach provides you with more control over when and where each Vue.js component is mounted on your page.