defineSlots
Stability:
stable
Declaring type of SFC slots in <script setup>
using the defineSlots
.
For Vue >= 3.3, this feature will be turned off by default.
Features | Supported |
---|---|
Vue 3 | ✅ |
Nuxt 3 | ✅ |
Volar Plugin | ✅ |
Vue 2 | ❌ |
Basic Usage
Short Syntax
vue
<script setup lang="ts">
defineSlots<{
// slot name
title: {
// scoped slot
foo: 'bar' | boolean
}
}>()
</script>
Full Syntax (Official Version)
vue
<script setup lang="ts">
defineSlots<{
title: (scope: { text: string }) => any
}>()
</script>
Volar Configuration
jsonc
{
"vueCompilerOptions": {
"plugins": ["unplugin-vue-macros/volar"],
},
}