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

Using Regex to replace special characters in TypeScript

Retrieve the service variable in the routing file

Unable to execute the Vite project

Excessive repetition in the style of writing for a function

Using Angular and Typescript to implement a switch case based on specific values

How can I pass a DOM element as a prop in Vue 3?

Guide to implementing fullpagejs with Angular 7 selectors

Angular's HttpClient.get method seems to have trouble retrieving real-time data from a Firebase database

Troubleshooting: Resolving the error message 'Unable to assign to Partial<this>' within a subclass method

Troubleshooting Problem with Next.js 13 Integration, Supabase, and Server Actions in layout.tsx

Set every attribute inside a Typescript interface as non-mandatory

Encountered an unexpected error in Vue: "Maximum call stack size exceeded callWithAsyncErrorHandling - Uncaught Range

Error message in TypeScript with Puppeteer library: "Element not found"

Utilizing global enumerations within VueJS

Angular 13 does not currently have support for the experimental syntax 'importMeta' activated

The element class type 'xxx' is lacking several properties compared to the 'ElementClass' type, including context, setState, forceUpdate, props, and others. This issue is flagged with error code TS2605

Best Practices for Converting TypeScript to JavaScript

What is the equivalent of a very deep selector in TailwindCSS?

Running the nestjs build command is impossible without the existence of the node_modules folder

Is it possible to use export default Enum in TypeScript?