How can I dynamically render a component using VueJS?

Question

How can I dynamically render a component using VueJS?

Incorporating a component named CanvasComp from my components folder, I am rendering it on the template like

<CanvasComp :jsoData="data"/>

to send jsonData to the component. However, I am seeking a way to dynamically render this component without manually displaying it on the template and pass the jsonData dynamically as well. Here is my current implementation:

<template>
    <ion-page id="main-content">
        <CanvasComp :jsoData="data"/>
    </ion-page>
</template>

<script lang="ts">
    import { defineComponent, onBeforeMount, onMounted, ref, watch, watchEffect, reactive, computed  } from "vue";
    import { IonContent,IonPage } from "@ionic/vue";
    import CanvasComp from "@/components/CanvasComp.vue";

    export default defineComponent({
        name: "GraphView",
        components: {
        IonContent,
        IonPage,
        CanvasComp,
    },

    setup() {
        const data= [
            { id: 1, name: 'Default' },
            { id: 2, name: 'Demographics'},
            { id: 3, name: 'Other'},
        ];
    }

    return { data, CanvasComp }
</script>

Exploring if there is a method to dynamically render

<CanvasComp :jsoData="data"/>

in the template while passing the jsonData, for example like

const CanvasComp = prop{jsonData: data};

then returning it.

typescript vuejs3 ionic-vue

Answer 1

Answer №1

If you're unsure if this is the solution you're looking for, there is a method to dynamically display a component within a template:

Let's consider a basic component components/HelloWorld.vue which takes a text prop and shows it in an <h1> element:

<template>
  <h1>{{ text }}</h1>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      required: true,
    },
  },
};
</script>

Now, I also have another component components/Wrapper.vue that utilizes the <component> element to dynamically show a component based on the value of the dynamicComponent data property.

<template>
  <component :is="dynamicComponent" :text="dynamicText" />
</template>

<script>
import { defineComponent, markRaw } from 'vue';
import HelloWorld from './HelloWorld.vue';

export default defineComponent({
  data() {
    return {
      dynamicComponent: markRaw(HelloWorld),
      dynamicText: 'Hello people!',
    };
  },
});
</script>

In the given example, the dynamicComponent data property is a function that provides the imported HelloWorld component, and the dynamicText data property is a string with the content "Hello people!". This content will be passed as the text prop to the HelloWorld component when it gets displayed.

You can access a functional DEMO via this link.

In your scenario, you could potentially exhibit the CanvasComp component in the same manner as illustrated with my HelloWorld component. Instead of the text prop, you would employ the jsoData prop.

Answer 2

If you're unsure if this is the solution you're looking for, there is a method to dynamically display a component within a template:

Let's consider a basic component components/HelloWorld.vue which takes a text prop and shows it in an <h1> element:

<template>
  <h1>{{ text }}</h1>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      required: true,
    },
  },
};
</script>

Now, I also have another component components/Wrapper.vue that utilizes the <component> element to dynamically show a component based on the value of the dynamicComponent data property.

<template>
  <component :is="dynamicComponent" :text="dynamicText" />
</template>

<script>
import { defineComponent, markRaw } from 'vue';
import HelloWorld from './HelloWorld.vue';

export default defineComponent({
  data() {
    return {
      dynamicComponent: markRaw(HelloWorld),
      dynamicText: 'Hello people!',
    };
  },
});
</script>

In the given example, the dynamicComponent data property is a function that provides the imported HelloWorld component, and the dynamicText data property is a string with the content "Hello people!". This content will be passed as the text prop to the HelloWorld component when it gets displayed.

You can access a functional DEMO via this link.

In your scenario, you could potentially exhibit the CanvasComp component in the same manner as illustrated with my HelloWorld component. Instead of the text prop, you would employ the jsoData prop.

How can I dynamically render a component using VueJS?

Answer №1

Similar questions

What causes the appearance of the "?" symbol at the beginning of the URL and triggers a reboot of the app when moving through the absolute path?

Select one of 2 parameters and begin typing

Error in NextJS: Attempting to access a length property of null

Using placeholders with inputs in an Angular2 table generated by ngFor

The error "500 window is not defined in Nuxt3 when using the composition API"

Discover the most helpful keyboard shortcuts for Next.js 13!

issue with vue3 render function not recognizing global mixin

Combining data types to create a unified set of keys found within a complex nested structure

Issue encountered while deploying Next.js application on vercel using the replaceAll function

If you're trying to work with this file type, you might require a suitable loader. Make sure you

Error message: "IAngularStatic type does not have property IScope" caused by Typescript Directives

Error with declaring TypeScript class due to private variable

Guide on Applying a Dynamic Color in VueJs 3 Composition API/Vuetify Using CSS

Is there a way to merge two typed Joi schemas together?

A function in Typescript is created to handle diverse input types in a generic manner

Dealing with nullable properties in Typescript

Learning how to seamlessly integrate plugins such as routers, cookies, and more into your Vue3 project

What steps should I take in order to correctly implement the onChange event and retrieve the event.target.value in my

Enhancing Code Completion Feature for Multiline Strings in Visual Studio Code

The Angular filter feature operates on individual columns instead of filtering all columns simultaneously