How to load a component from a variable name in Vue.js?
Use a dynamic component like this:
<component :is="myTemplate.type"></component>
I was having the same issue and because I was using Vue 3. After some research, I found out that the procedure to define dynamic components (async components) is a little different in Vue 3. I hope this code helps someone.
<template>
<component :is="comp"></component>
</template>
<script>
//Vue 3 is having a special function to define these async functions
import {defineAsyncComponent} from "vue";
export default {
name: "DynamicComponent",
//I am passing the name of the Component as a prop
props: {
componentName:{
type: String,
required: true
}
},
computed: {
comp () {
return defineAsyncComponent(() => import(`../components/${this.componentName}.vue`))
}
}
}
</script>