Можно попробовать вот так (см код ниже). По сути это решение Philipp Kühn, но для вашего случая, когда в файлах хранятся шаблоны, а не компоненты. Чтобы заработало, нужно настроить загрузчик для html файлов (
raw-loader отлично подойдёт) и включить компилятор в сборку (
вариант "полный").
В теории это можно оптимизировать до функционального компонента, но на практике почему-то не работает. Может быть, у меня руки кривые)
export default {
props: {
name: {
type: String,
default: 'default'
}
},
computed: {
component () {
// Не сокращать до одной строки, иначе свойство не будет реактивным.
const name = this.name
return () => this.load(name)
}
},
methods: {
async load (name) {
// В import() должен быть статический элемент (как './templates/'), иначе не заработает.
const { default: template } = await import(`./templates/${name}.html`)
return { template }
}
},
render (h) {
return h(this.component)
}
}
