How to render VueJS templates dynamically inside custom element

I’m using Vue to build an app with Esri’s Mapping API.

Via the Esri API, I’m able to set a popup template content using an object:

const popupWindowTemplate = {
    title: "{mag} magnitude near {place}",
    content: getContent
 };

and a function

getContent: function(){
      let node = document.createElement('div');
      node.innerHTML = "<button type='button'>Do my thing!</button>"
      return node;
}

However, I would like the getTemplate function to return a Vue component rendered in the innerHTML instead of hard coded html.

I have a component:

 const buffer = Vue.component('do-mything', {
  template: '<div><button type="button" @click="domything">Do my thing!</button></div>',
  data() {
    return {
          somevalue: ''
        };
      }
});

and suspect it has something to do with components render functions, but have been having trouble figuring out how to insert the component in the getContent function.

Answer

Assuming the that API, you integrate with, expects getContent method to return a DOM element, you can try to:

• create a component instance
• render it off-document (by calling $mount without args on the component instance)
• return the DOM element the component was rendered to

To implement the above getContent method may look like as follows:

getContent: function(){
  const vueComponent = new Vue({
    template: '<div><button type="button" @click="domything">Do my thing!</button></div>',
    methods: {
      domything() {
        console.log('Method was called')
      }
    }
  });
  return vueComponent.$mount().$el;
}