Using a component as an object property in Vue 3

Question

I was wondering if there was a way to use a Component as a property in Vue 3.

Take for example the below TS interface:

import type { Component } from 'vue'

interface Route {
    url: string
    icon: Component
    name: string
}

Can I use an object based on said interface in a template to render a Component like this?

<div v-for="route in routes">
{{ route.icon }} // not working.
</div>

Any help would be much appreciated. Thanks!

@AlexandreHeinen it's an array of objects I defined based on the interface routes = [ {name: "Index", url: "/", icon: SomeVueComponent},] — oluwakayode
– oluwakayode, Commented Feb 6, 2023 at 12:15

Kapcash · Accepted Answer · 2023-02-06 16:07:29Z

2

You want to use dynamic components.

It's a special component that take a registered component's name or an entire imported component object as a prop:

<template>
  <component :is="route.icon" />
</template>

<script setup>
import Header from './Header.vue'

const globalComponentName = 'MyPopup'

const route = reactive({
  icon: 'MyPopup',
  // or
  icon: Header
})
</script>

answered Feb 6, 2023 at 16:07

Kapcash

6,9802 gold badges22 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using a component as an object property in Vue 3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related