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?

javascriptvue.jsvuejs3vue-component

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

bcrypt is failing to return a match when the password includes numeric characters

I've integrated node-bcrypt with PostgreSQL (using Sequelizejs) to securely hash and store passwords. In the process, the user's password undergoes hashing within a beforeValidate hook as shown below: beforeValidate: function(user, model, cb) { ...

javascriptnode.jsexpressbcrypt

Issue with AngularJS directive: Isolated scope preventing values from being inserted into template

After setting up the directive below: angular.module('news.directives', []) .directive('newsArticle', function($location, $timeout) { return { restrict: 'AE', replace: 'true&apo ...

javascriptangularjsangularjs-directiveangularjs-scope

Personalizing the dimensions of audio.js

I recently integrated the audio.js plugin into my website. I've added the necessary code to the header.php file located in the includes folder. <script src="audio/audiojs/audio.min.js"></script> While the player appears correctly on othe ...

javascriptcssaudio

A collaborative effort on Facebook, Twitter, and GooglePlus involves generating SCRIPT tags collectively

If you're familiar with the javascripts used by platforms like Facebook, Twitter, and Google Plus, you'll recognize them below. Here, I've simply organized them neatly together. How can I utilize jQuery to create the script tags and optimiz ...

javascriptjqueryfacebooktwitter

Wordpress website fails to initiate Automate on Scroll (aos) functionality

I seem to be having trouble tackling any task that requires even the smallest amount of brain power. My current struggle is trying to integrate the AOS library into my Wordpress site. In an attempt to make it work, I inserted the following code into my fu ...

javascriptphpwordpressjquery-animate

What are some strategies for stopping a form from redirecting me while utilizing ReactJS and ExpressJS?

Recently, I created a form that redirects to the route /repair upon submission with an action of /repair. However, I would prefer to keep it as a Single Page Application (SPA) where after submitting the form, the fields are cleared, and a simple message l ...

javascriptnode.jsformsexpress

What causes the server to give an incorrect response despite receiving a correctly read request?

After setting up a new project folder and initializing NPM in the Node.js repl, I proceeded to install the Express package. In my JavaScript file, I included the following code: const express = require('express'); const app = express(); ...

javascriptexpressnpmnodemon

Identifying the issue of body.onload not being triggered

My web pages use body.onload (or window.onload) to properly set up, but sometimes the onload event is not being triggered. Is there a way in a specific web browser (preferably Chrome, where this issue seems more common) to identify what is causing the pag ...

javascripthtmldom

The functionality of the Bootstrap toggle button seems to be malfunctioning

I'm having trouble with the toggle button in my Bootstrap code. When I resize the window, the toggle button appears but clicking on it doesn't do anything. This is my first time using Bootstrap, so I might have made some silly mistake. Any assist ...

javascriptjquerytwitter-bootstrapdrop-down-menutoggle

Troubleshooting React on an Apache Server: A Comprehensive Guide

An interactive React application utilizing React Router has been successfully deployed on an Apache server. After making modifications to the .htaccess file, most of the routes function correctly as intended. Some specific routes within the app rely on us ...

javascriptreactjsapache

Using the ESNEXT, Gutenberg provides a way to incorporate repeater blocks that

If you're like me, trying to create your own custom Gutenberg repeater block with a text and link input field can be quite challenging. I've spent hours looking at ES5 examples like this and this, but still feel stuck. I'm reaching out for ...

javascriptwordpressjsxwordpress-gutenberggutenberg-blocks

Tips for updating or deleting a ref value within the VueJS 3 composition api

I am utilizing a ref value in order to only trigger a click event when the ref value is changing. For instance, if I need to update/delete the array inside let myRef = ref([]);, should I simply access the proxy and carry out the operations like this : sel ...

javascriptvue.jsvue-composition-apivue-reactivity

Tips for creating a responsive layout to ensure that H2 achieves its optimal font size in a one-line DIV

Is there a way to ensure that an H2 headline fits within the width of a DIV element? I am looking for a solution where the font size of the H2 automatically adjusts to display its full text without overflowing or breaking into a second line inside the DIV ...

javascripthtmlcssdynamicresponsive-design

Having trouble displaying images in Express JS

Here are the lines of code that I wrote in Express: res.write("The current temperature is "+temp+". "); res.write("Weather is currently "+weatherDes); res.write("<img src=" +imageURL+ ">"); res.send() ...

javascripthtmlnode.jsexpress

Please explain the concept of the Node.js event loop

I've spent countless hours poring over guides and resources on the event loop, yet I still can't grasp its essence. It's common knowledge that the libuv library is responsible for implementing the event loop, but what exactly is this entity ...

javascriptnode.js

The attempt to test the AngularJS application using the Jasmine plugin was unsuccessful

I'm currently in the process of learning how to write test cases for my angularJS application. As a beginner, I'm searching for some sample examples of working demos. I came across an example online that uses the Jasmine plugin to test an angular ...

javascriptangularjsjasminekarma-jasmine

What is the method for copying table data, including input text as cells, to the clipboard without using jQuery?

I have a basic table that looks like this: <table> <thead> <tr> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>Savings <button type="button" (click)=" ...

javascripthtmlangulartypescript

I am encountering an issue where I am sending an AJAX request to a PHP file with the datatype set as JSONP, but I

When I click on the submit button, I am sending a variable to sendmail.php. However, PHP is showing that 'contactname' is undefined. Why is this happening? Here is the code snippet: var name = document.getElementById('stream_cotactname&apo ...

javascriptphpjqueryajax

Is there a way to dispatch an event from one Angular ui-router view to another view?

In order to change the login button to display "logged in as xxx" after authentication, I have structured my page into three views: header, content, footer. The login button is located in the header view. Upon clicking login, it transitions to the "app.log ...

javascriptangularjsangular-ui-router

What is the best approach for establishing an asynchronous connection to a MongoDB database?

Managing a MongoDB database using JavaScript and Node.js with Mongoose, I needed to retrieve an array containing the names of all collections in the database. Taking this into consideration, I implemented the following code snippet. let connection = mongoo ...

javascriptnode.jsmongodb