Vue v-slot Directive

🎯 Vue v-slot Directive

In Vue.js, Vue v-slot Directive is the directive used to define and consume slots—including named slots and scoped (slot props) slots—in a clear, modern syntax (Vue 3 standard).

 What is Vue v-slot Directive?

v-slot lets a parent component provide content to a child component’s slot, and optionally receive data from the child.

Think of it as:

“Put this content here, and optionally give me some data to render it.”

 Default Slot (Basic)

Child (Card.vue)


Parent


Shorthand (most common)


✔ v-slot without a name targets the default slot

 Named Slots

Child


Parent


 

Shorthand (#)

<template #header>...</template>
<template #footer>...</template>

✔ Use #name for concise syntax

Scoped Slots (Slot Props)

Scoped slots allow the child to pass data to the parent’s slot.

Child


 

Parent


 

✔ The parent controls how to render, the child provides what data

 Named + Scoped Slots

<!-- Child -->
<slot name="item" :item="item"></slot><!– Parent –>
<template #item=”{ item }”>
{{ item.title }}
</template>

 Destructuring & Defaults

<template #item="{ item, index = 0 }">
{{ index }} — {{ item.name }}
</template>

v-slot vs Old slot / slot-scope

  • v-slot replaces slot and slot-scope

  • Cleaner, explicit, and recommended for Vue 3

v-slot vs Props (Important ⚠️)

Feature v-slot Props
Pass HTML/layout ✔ Yes ❌ No
Pass data ✔ (slot props) ✔
Flexibility High Medium
Use case Layout & rendering Configuration

✔ Props for data/config
✔ Slots for layout/content

 Common Use Cases

  • Cards & modals

  • Tables (custom row rendering)

  • Lists with custom items

  • Layout components

  • UI libraries

 Common Mistakes ❌

❌ Using v-slot on non-<template> (except default slot on component)
❌ Overcomplicating slot APIs
❌ Confusing slot data direction (child → parent)

 Best Practices ✅

✔ Use shorthand #
✔ Keep slot APIs small and documented
✔ Prefer slots for layout, props for data
✔ Avoid too many named slots

 Summary Table

Task Syntax
Default slot <Component>...</Component>
Named slot <template #name>...</template>
Scoped slot <template #default="{ data }">
Named scoped <template #item="{ item }">
Fallback <slot>Default</slot>

🏁 Conclusion

v-slot is the modern, powerful way to build flexible and reusable Vue components.
Master it to design clean APIs and scalable layouts.

You may also like...