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	✅
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
    ],
  },
}

Contributors

Kevin Deng

Changelog

Last edited about 11 hours ago

View full history

defineSlots ​

Basic Usage ​

Short Syntax ​

Full Syntax (Official Version) ​

Volar Configuration ​