Skip to content

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.

FeaturesSupported
Vue 3
Nuxt 3
Vue 2
Volar Plugin

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
// tsconfig.json
{
  "vueCompilerOptions": {
    "target": 3, // or 2.7 for Vue 2
    "plugins": [
      "@vue-macros/volar/define-slots",
      // ...more feature
    ],
  },
}