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!

Answer 1

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>