How do I load this dynamic components in Vue 3 composition API?

Question

Im trying to load a component with the name that I get from the database, but it keeps sending me the error [Vue warn]: Component is missing template or render function.

import SimpleQuestions from '@/components/SimpleQuestions.vue';

const templates = {
  SimpleQuestions,
}

const getMissionComponent = async (name) =>{
  let missionInfo = await userStore.getMissionInfo(email.value, roomID.value, name);
  let templateName = missionInfo.template; 
  switch (templateName){
    case 'SimpleQuestions':
      return templates[templateName];

<div v-for="(mission, index) in missions" :key="index">
      <component :is="getMissionComponent(mission)"></component>
    </div>

When I put directly in the :is the words SimpleQuestions it detects the component and it loads, but in the function, it does not. Does anyone have an idea about what is happening?

Answer 1

If you want to use async components,you need use defineAsyncComponent to creat it according to the vue document

import SimpleQuestions from '@/components/SimpleQuestions.vue';
import {
  defineAsyncComponent
} from 'vue'

const templates = {
  SimpleQuestions,
}
const getMissionComponent = async(name) => {
  let missionInfo = await userStore.getMissionInfo(email.value, roomID.value, name);
  let templateName = missionInfo.template;
  switch (templateName) {
    case 'SimpleQuestions':
      return templates[templateName];

  }
}

function creatAsyncComponent(prop) {
  return defineAsyncComponent(()=>getMissionComponent(prop))
}

<div v-for = "(mission, index) in missions": key = "index" >
  <component: is = "creatAsyncComponent(mission)" ></component> 
</div>