typescriptvue.jsvuejs3

How to get a component type so I can use it in a typescript interface - Vue 3

I'm just trying to setup an array of components so I can do some dynamic component switching later. But I'm stuck at getting Typescript to work with it and no matter what way I ask the question online all the previous answers are all about completely different things.

I've provided a screenshot of what I want to do. I want to be able to write a typescript interface and give it some type which corresponds to any vue component I pass. It just needs to make sure that it's a vue component being passed, I don't care what component it is. I basically need a vue component type definition. How do I do that?

example of what I want

Solution

  • Component is indeed the correct type, as you've attempted, but you need to import it before use:

    <script setup lang="ts">
import type { Component } from 'vue'
⋮
interface Props {
  header?: Component
  body?: Component
  footer?: Component
}

const fragments: Props = {
  header: FragProfile,
  body: FragSubject,
  footer: TypeSection
}
</script>

    demo