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 (`#`)

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

Destructuring & Defaults

`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)	Yes
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.

Vue v-slot Directive