SlotContent
Learn how to type slot content in your Vue application.
This type resolves the content type for a versioned Slot ID.
Signature
This type has the following signature:
type SlotContent<I extends VersionedSlotId>Usage
Pass a versioned slot ID like 'home-hero@1' to get the corresponding content type:
1234567891011
<script setup lang="ts">import type {SlotContent} from '@croct/plug-vue'
type HeroContent = SlotContent<'home-hero@1'>
const props = defineProps<HeroContent>()</script>
<template> <h1>{{ props.title }}</h1></template>When using CLI-generated types, the type parameter is constrained to known slot IDs, providing autocompletion and type safety.
Type narrowing
When a slot's content is a union of multiple components, SlotContent resolves to a discriminated union. Each variant includes a _type property set to the component ID, which you can use to narrow the type:
123456789101112131415
<script setup lang="ts">import type {SlotContent} from '@croct/plug-vue'
type HeroContent = SlotContent<'home-hero@1'>// Resolves to:// | {_type: 'text-hero', title: string, subtitle: string}// | {_type: 'image-hero', title: string, image: string}
const props = defineProps<HeroContent>()</script>
<template> <h1 v-if="props._type === 'text-hero'">{{ props.subtitle }}</h1> <img v-else :src="props.image" :alt="props.title" /></template>If the slot maps to a single component, the resolved type is a plain object without the _type property.