Guide to dynamically loading a component using a variable name in Vue.js?

Question

Guide to dynamically loading a component using a variable name in Vue.js?

Is it possible to dynamically load a component in a vue.js application using a variable name?

For example, if I have the following component registered:

<template id="goal">
  <h1>Goal:{{data.text}}</h1>
</template>

Instead of directly loading it like this

<goal></goal>

I'm looking for a way to load it from a variable name, something like this:

<{{mytemplate.type}}></{{mytemplate.type}}>

In this scenario, mytemplate.type would be equal to "goal". Is there a way to achieve this in vue.js?

javascript vue.js

Answer 1

Answer №1

Implement a dynamic component in the following manner:

<component :is="myTemplate.type"></component>

Answer 2

Implement a dynamic component in the following manner:

<component :is="myTemplate.type"></component>

Answer 3

Answer №2

I encountered a similar issue while using Vue 3. After conducting some research, I discovered that the process of defining dynamic components (async components) differs slightly in Vue 3. I hope this code snippet proves helpful to someone.

<template>
    <component :is="comp"></component>
</template>

<script>
//Vue 3 incorporates a special function for defining async functions
import {defineAsyncComponent} from "vue";

export default {
 name: "DynamicComponent",
 //Passing the Component's name as a prop
 props: {
     componentName:{
         type: String,
         required: true
     }
 },
 computed: {
  comp () {
      return defineAsyncComponent(() => import(`../components/${this.componentName}.vue`))
  }
}
}
</script>

Answer 4

I encountered a similar issue while using Vue 3. After conducting some research, I discovered that the process of defining dynamic components (async components) differs slightly in Vue 3. I hope this code snippet proves helpful to someone.

<template>
    <component :is="comp"></component>
</template>

<script>
//Vue 3 incorporates a special function for defining async functions
import {defineAsyncComponent} from "vue";

export default {
 name: "DynamicComponent",
 //Passing the Component's name as a prop
 props: {
     componentName:{
         type: String,
         required: true
     }
 },
 computed: {
  comp () {
      return defineAsyncComponent(() => import(`../components/${this.componentName}.vue`))
  }
}
}
</script>

Answer 5

Answer №3

Rakshit Arora's solution mentioned above is effective when using './' and '../' in imports.

Currently, in 2022, the use of the '@' symbol in imports is not permitted (https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations).

Answer 6

Rakshit Arora's solution mentioned above is effective when using './' and '../' in imports.

Currently, in 2022, the use of the '@' symbol in imports is not permitted (https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations).

Answer 7

Answer №4

Although @Rakshit's response seemed valid, I personally found it unnecessary to include such complexity in my solution. In case anyone else is facing a similar situation and needs to reference a different component for each v-tab in vuetify3, the following code worked well for me:

  <v-toolbar color="info-light">
    <v-tabs v-model="tab">
      <v-tab v-for="item in items" :key="item" :value="item">
        {{ item.name }}
      </v-tab>
    </v-tabs>
    <v-spacer></v-spacer>
  </v-toolbar>
  <v-window v-model="tab" fill-height>
    <v-window-item v-for="item in items" :key="item" :value="item">
      <component :is="item.component"></component>
    </v-window-item>
  </v-window>

Regarding the script section, this approach was taken:

import ThatModule from "./ThatModule.vue";

export default {
  name: "CategorizeModule",

  data: () => ({
    tab: null,
    items: [
      {
        name: "Spending",
        component: <ThatModule></ThatModule>,
      },

Answer 8

Although @Rakshit's response seemed valid, I personally found it unnecessary to include such complexity in my solution. In case anyone else is facing a similar situation and needs to reference a different component for each v-tab in vuetify3, the following code worked well for me:

  <v-toolbar color="info-light">
    <v-tabs v-model="tab">
      <v-tab v-for="item in items" :key="item" :value="item">
        {{ item.name }}
      </v-tab>
    </v-tabs>
    <v-spacer></v-spacer>
  </v-toolbar>
  <v-window v-model="tab" fill-height>
    <v-window-item v-for="item in items" :key="item" :value="item">
      <component :is="item.component"></component>
    </v-window-item>
  </v-window>

Regarding the script section, this approach was taken:

import ThatModule from "./ThatModule.vue";

export default {
  name: "CategorizeModule",

  data: () => ({
    tab: null,
    items: [
      {
        name: "Spending",
        component: <ThatModule></ThatModule>,
      },

Guide to dynamically loading a component using a variable name in Vue.js?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for implementing permission-based functions in a React frontend with a Django Rest API

Understanding the error handling in Express.js

Can anyone provide guidance on locating the parent of a pseudo element with Selenium WebDriver?

Encountering an Error while Setting Up NextJS on Vercel

Why does my ngFor consistently refresh while the array remains unchanged?

Display a Vue.js div element based on conditions matching a specific variable value

Error in Next.js: The function (0 , firebase_auth__WEBPACK_IMPORTED_MODULE_1__.onAuthStateChanged) is not defined as a function

Styling the jQuery location picker input with background and focus effects

Navigating a Vue.js realm: Transferring card button ID to backend URL pathway upon clicking

Retrieving variables using closures in Node.js

Managing multiple to-do lists within a React application using parent-child relationships

What is the best way to integrate a Vue component into a Knockout application?

What is the browser location for storing JavaScript constants?

Using Vue 3 to have the ability to include multiple composable instances in a single script tag

How can I retrieve a DOM object following an AJAX request?

html and css code to create a linebreak ↵

Is there a way to generate and transmit a text file using XmlHttpRequest or $.ajax?

Reactjs encountering issues with function of Cookies section

Issue: Unable to open port (GetCommState) : Error code 1 not recognized - Utilizing Nodejs, express, SerialPort

What is preventing Backbone from triggering a basic route [and executing its related function]?