Vue.js 2.6: Scoped Slots and New Features

Vue 2.6 introduced a cleaner slot syntax and the v-slot directive. Here’s what changed.

New v-slot Syntax

<!-- Old slot-scope syntax -->
<template slot="header" slot-scope="{ title }">
  {{ title }}
</template>

<!-- New v-slot syntax -->
<template v-slot:header="{ title }">
  {{ title }}
</template>

<!-- Shorthand -->
<template #header="{ title }">
  {{ title }}
</template>

Dynamic Slot Names

<template v-slot:[dynamicSlotName]>
  Dynamic content
</template>

Other Changes

• Improved error messages
• Async error handling
• Better TypeScript support

References

• Vue 2.6 Release