Vue compile when inserting in DOM

Question

I need to insert a compiled element into the DOM, however it will be inserted into a random place, not in a pre-defined location as is documentation...

var res = Vue.compile('{{ msg }}')
new Vue({
  data: {
    msg: 'hello'
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns
})

All approaches with V-for, V-if/show will not serve as they also require predefined elements.

I tried something like this...

document.getElementById('elPai').insertAdjacentHTML('beforeend', Vue.compile('{{ msg }}'));

It returns an object containing ' render ' and ' StaticRenderFns ', but did not find the result compiled on these objects, it seems to me that it is recorded in a ' Promisse ', which is triggered when the element is predefined in ' DOM '.

Finally, there is how to insert elements compiled into DOM with ' Vue 2 '?

user_8971276 · Answer

Try this

var MyComponent = Vue.extend({
  template: 'Hello!'
})

new MyComponent().$mount('#app')

Example from: https://v2.vuejs.org/v2/api/#vm-mount

user_3499595 · Answer

You almost got it right, but for mounting it, you use .$mount() (like in @Wszerad's answer):

console.clear();

var res = Vue.compile('{{ msg }}');

console.log(res);

var vm = new Vue({
  data: {
    msg: 'hello'
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns
});

vm.$mount('#app')

Vue compile when inserting in DOM

2 Answers