In Vue 3, what is the correct type for a Vue component property?

Nabab 0
Viewed 33

Some of our components use other components as property.

A trivial example: <my-interface-component :popup="myPopup"/>
Where myPopup will be a component with a open method that allows to open this external popup component with a message.

In Vue 2 we used to set this property like this:

  /**
   * @prop {Vue} popup A root popup component to use
   */
  popup: {
    type: Vue
  },

And we could give either a component definition or an existing component reference.

But in Vue 3 there is no more such Vue object. Should I just use Object or is there a more explicit way?

We use the CDN version of Vue 3 with Vanilla JS.

Many thanks

vue.js javascript
1 Answers

The right type of a component is ComponentOptions|ComponentOptions['setup'] which are simplified for readability as mentioned here:

import {ComponentOptions, PropType } from 'vue'

props:{
  popup: {
    type: Object as PropType<ComponentOptions|ComponentOptions['setup']>
  },

}

However it's recommended to pass components/elements as slots not as props :

Child component :

<template>
  <div>
    <slot name="popup" />
  </div>
</template>

In parent :

<template>
 <div>
    <template #popup>
       <MyPopup />
    </template>
 </div>
</template>
Boussadjra Brahim0
Related