# SlotContent

Learn how to type slot content in your Vue application.

This type resolves the content type for a versioned [Slot](/explanation/slot) ID.

## Signature

This type has the following signature:

```ts
type SlotContent<I extends VersionedSlotId>
```

## Usage

Pass a versioned slot ID like `'home-hero@1'` to get the corresponding content type:

```vue
<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](/reference/cli/type-generation), the type parameter is constrained to known slot IDs, providing autocompletion and type safety.

## Type narrowing

When a slot's content is a [union](/reference/content/schema/types/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:

```vue
<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.