How can I implement the dynamic loading of components using the Vue 3 composition API?

Question

How can I implement the dynamic loading of components using the Vue 3 composition API?

My goal is to dynamically load a component with the name retrieved from the database, however, I keep encountering 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 directly input 'SimpleQuestions' in the :is attribute, the component is detected and loaded successfully, but when using the function, it does not work. Can anyone shed light on why this might be happening?

javascript vue.js vuejs3 vue-component

Answer 1

Answer №1

To utilize async components effectively, it is necessary to use defineAsyncComponent to create them as outlined in the Vue documentation.

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>

Answer 2

To utilize async components effectively, it is necessary to use defineAsyncComponent to create them as outlined in the Vue documentation.

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>

How can I implement the dynamic loading of components using the Vue 3 composition API?

Answer №1

Similar questions

Bootstrap form toggle switch component for ReactJS

Is it time to advance to the next input field when reaching the maxLength?

The production build encountered an issue as it was anticipating 3 arguments, however, it only received

What steps can I take to persistently subscribe to SignalR from an Angular service even in the event of connection failures?

The system cannot locate the "default" task. Please consider using the --force option to proceed. The process has been halted due to warnings

Utilizing Vue and Typescript for efficient dependency injection

Unable to display Vue image within v-for loop

Error 404 encountered while trying to access a website with parameters using Vue.js

Tips for preventing recursion when utilizing scrollIntoView() in a scroll event handler

Incorporating additional rows into a SQL Table according to user-provided information

Is it possible to use JavaScript to load, edit, and store text files?

Instructions on how to navigate to a class page by clicking a button in a ReactJS interface

Transformation of firebug console information into a function()

React throws an error message when the update depth surpasses its maximum limit

How to bind a dynamic image source in a Vue component

Convert the easeInExpo function from jQuery easing to vanilla JavaScript and CSS

Issue with Node.js OAuth authentication

Obtaining only a portion of the text when copying and editing it

Incorporating a dynamic fill effect into an SVG pie chart

Creating dynamic web content using PHP and JavaScript