Vue dynamic component

I had previously experimented with setting the template at run time. Vue components are just objects. That means we can construct a new component at run time. This is a quick test page.

The new component here has two props and a template, which you can edit above. There’s also a child component Add which could be imported from elsewhere.

return {
    props: {a: Number, b: Number},
    components: {Add},
    template: templateText.value,
};

I find it easier to build run time components using the Options API, but the Vue community seems to be moving towards the Composition API.

To handle a template, you need the “non-runtime” build of Vue^[1], which can compile templates at run time. I’m doing that here.

To handle SFC files (*.vue), you need to use the SFC compiler^[2]. I’m not doing that here.

Source: vue-dynamic-component.js