Subscribe on changes!

Typescript Slot-Typings for HyperScript Components

avatar
Apr 17th 2023

What problem does this feature solve?

At the moment slot typings are only available for components that are written in vanilla vue. Components that are written in HyperScript and therefore do not have a template block cannot currently provide typings. Therefore it would be useful to be able to define which (named) slots the component provides, similar to props.

What does the proposed API look like?

The idea here would be that if a type is specified, than it describes the type of the slot property. If no type is specified, it is a slot without slot properties.

import type { PropType } from 'vue';
import { defineComponent } from 'vue';

type SlotType = PropType;
type MyType = {
    attr: string
}

export default defineComponent({
     slots: {
          default: {
                type: Object as SlotType<MyType>,
          },
          named: {
          
          }
     } 
});
avatar
Apr 17th 2023

https://github.com/vuejs/core/pull/7982 defineSlots have been add in vue 3.3.0- appha5