For this demonstration, I have utilized Vue Playground.
Consider a scenario where we incorporate a third-party component from a library known as the Card.vue:
<template>
<slot name="slot1"></slot>
<slot name="slot2" title="I am slot 2">
</slot>
</template>
This component is then integrated into our application, featuring both a named slot and a scoped slot.
<script setup>
import Card from './Card.vue';
</script>
<template>
<Card>
<template #slot1>
<h1>
I am slot 1
</h1>
</template>
<template #slot2="slotProps">
<h1>
{{slotProps.title}}
</h1>
</template>
</Card>
</template>
However, transitioning from a React background where slots are absent and instead there are children prop and Component props, it becomes challenging to comprehend how type information can be provided to a consumer.
How can I determine, in my App.vue file, which slot names are accessible and what scoped slot properties exist?