Typing Imported Components in Vue 3

Question

I can't find suitable type for my components that I imported in my file.

Here's example code:

Components used

// Component1.ts
export default defineComponent({
  name: 'Component1',
  // other component properties...
})

// Component2.ts
export default defineComponent({
  name: 'Component2',
  // other component properties...
})

MyComponents.ts file

// ExternalComponents.ts
import Component1 from './Component1';
import Component2 from './Component2';

type componentArrayType = {
  name: String;
  component?: ReturnType<typeof defineAsyncComponent>; // This is what I'm currently using
}

export const components = [
  {
    name: Comp1,
    Component1
  },
  {
    name: Comp2,
    Component2
  }
];

I tried to use the same type for used in vue 2 but vuex isn't compatible with vue 3 anymore.

import { AsyncComponentPromise } from 'vue/types/options'

type componentArrayType = {
  name: String;
  component?: AsyncComponentPromise;
}

Answer 1

Vue exports Component type, represents a Vue component.

import type { Component } from 'vue'