Vue, dynamically import template

Question

I want to be able to swap out a template for a component based on a data property, or a prop. Is this possible?

This is my idea, however this doesn't work of course.

./index.vue

export default {
    props:{

    },
    template: import(`./Themes/Templates/${this.template}`),
    data: function() {
        return {
            template: 'Default'
        }
    },

./Themes/Templates/Default.vue

<div>
    <p>Default template</p>
</div>

Currently getting this error:

invalid template option:[object Module]

Answer 1

Try require("./Themes/Templates/Default.vue")

Update:

In Default.vue :

...
export default {
    name: "Default"
}
...

and in index.vue :

...
template: this.temp,
data() {
    const { Default } = import("./Themes/Templates/Default.vue");

    return {
        temp: Default
    }
}
...

Answer 2

Use component that vue.js provide:

<template>
  <component :is="myComp"></component>
</template>

...
// You need to import all the possible components
import CompOne from '/CompOne.vue';
import CompTwo from '/CompTwo.vue'

props:{
  myComp: {
    default: 'comp-one',
    type: String,
  },
},
...