How to mount a Vue instance to a not yet appended HTML element

In an app I’m creating I want to mount a Vue instance to an HTML Node. But after using the $mount function, the Node doesn’t contain the Vue instance.

In the code below you can see what I’m trying to accomplish. I want to return an HTML Node containing the Vue instance.

const el = document.createElement('div');
new Vue({
  render(createElement) {
    return createElement(HelloWorldVue, {}, {});
  },
  components: {
    HelloWorldVue,
  },
}).$mount(el);
return el;

Does anybody have an idea how to mount the Vue instance to the generated element before mounting it to the view?

Answer

By the docs:

Unlike in Vue 1.x, the mounted element will be replaced with Vue-generated DOM in all cases.

So this will not work. But you can do something similar by calling $mount() without any argument:

If elementOrSelector argument is not provided, the template will be rendered as an off-document element, and you will have to use native DOM API to insert it into the document yourself.

// or, render off-document and append afterwards:
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)