What is a Scoped Slot?

A scoped slot is an advanced feature where the child component passes data back UP to the slot. This allows the parent to define the template, but use data from the child component. The syntax looks like ` ` in the child, and ` ` in the parent.

🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.

🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.

Tools

HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB /// HTML MASTER CLASS /// LEARN TAGS ///

Content Distribution (Slots) in Vue.js

Learn about Content Distribution (Slots) in this comprehensive Vue.js tutorial. Learn how to use default slots, fallback content, and named slots to build highly flexible wrapper components.

⚡ Total XP: 0|💻 vuejs XP: 0

Skill Matrix

UNLOCK NODES BY LEARNING NEW TAGS.

Select an unlocked node to view details root

🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.

🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.

Inject HTML and components into your child components.

1What is a Slot?

A slot is an outlet in a component's template. It allows the parent component to pass template content (HTML, other components) directly into the child component's layout. Think of it like passing a function as a callback, but for HTML.

2Fallback Content

You can specify fallback content by placing elements inside the <slot></slot> tags in the child. If the parent provides content, the fallback is replaced. If not, the fallback is rendered.

3Named Slots

Sometimes you need multiple slots in a single component (e.g., a header slot, a body slot, a footer slot). You can name slots using <slot name="header">. The parent targets these using <template #header>.

4Step-by-Step Breakdown

Props are great for passing data (strings, numbers) to a child component. But what if you want to pass actual HTML or other components?

For passing HTML templates, Vue provides the <slot> element. It acts as a placeholder for content provided by the parent.

Which Vue element acts as an outlet or placeholder for template content passed down from a parent component?

→yield
→outlet
→slot

When the parent uses the component, any HTML placed INSIDE the component's tags replaces the <slot> element.

You can provide fallback (default) content inside the <slot> tags. If the parent doesn't provide any content, the fallback is shown.

If a parent component uses <Card></Card> (without putting anything inside the tags), what happens to the fallback content inside <slot>Fallback</slot> in the Card component?

→It causes an error
→It is hidden
→It is displayed

What if you need multiple slots? Like a Header, Body, and Footer in a Modal? You use Named Slots.

To target a named slot from the parent, you use the <template v-slot:name> syntax, which has a shorthand: #name.

What is the shorthand symbol for v-slot: when targeting a named slot?

→@
→#
→:

Slots allow you to create highly flexible "Wrapper" components like Cards, Modals, and Layouts while keeping styling centralized.

Level Up 🚀

Advanced cheat sheets, SEO tricks, and interview prep for this topic.

Browser Support

ChromeSupported

Fully supported.

FirefoxSupported

Fully supported.

SafariSupported

Fully supported.

EdgeSupported

Fully supported.

Accessibility (A11y)

1Slots Preserve the Parent's Semantic Intent

Because slot content is authored by the parent and simply projected into the child's template, a parent can place a proper <h2> or an aria-labelledby-linked heading inside a <Modal> component's header slot, rather than the Modal component forcing a generic, non-descriptive heading level on every usage.

<Modal>
  <template #header><h2 id="del-title">Delete item?</h2></template>
</Modal>

SEO Implications

1
Slot Content Renders as Regular DOM, Not Hidden Markup
Content passed into a slot is not fetched lazily or rendered into a detached fragment — it becomes part of the same render tree as the rest of the component, so text placed inside a <Card> component's default slot is exactly as indexable by a crawler as text written directly in the parent's own template.

Best Practices

Always Provide Sensible Fallback Content for Optional Slots

Wrap default content inside the <slot></slot> tags (<slot>No items yet.</slot>) for slots that are genuinely optional, so a parent that forgets to pass anything gets a meaningful empty state instead of a blank gap in the layout.

Frequent Bugs

THE BUG

Trying to access a child component's local data from a regular (non-scoped) slot.

THE FIX

A default slot only receives whatever HTML the parent wrote — it has no access to the child's internal ref or reactive state. To expose child-owned data to slot content, the child must pass it via a scoped slot: <slot :item="internalItem" />, and the parent reads it with <template #default="{ item }">.

Real-World Examples

A Generic Data Table with a Scoped Slot

A reusable <DataTable :rows="users"> component loops over rows internally but exposes each row back to the parent via a scoped slot, letting every page decide exactly how to render its own columns without the DataTable component knowing anything about user-specific fields.

<!-- DataTable.vue -->
<tr v-for="row in rows"><slot :row="row" /></tr>
<!-- Parent -->
<DataTable :rows="users">
  <template #default="{ row }">
    <td>{{ row.email }}</td>
  </template>
</DataTable>

Interview Prep

?Frequently Asked Questions

Pascual Vila

Frontend Instructor // Code Syllabus

Common Pitfalls & Errors

The Error //

Mutating a Prop Directly

// Wrong
const props = defineProps(['count']);
function increment() { props.count++; }

// Correct
const emit = defineEmits(['update:count']);
function increment() { emit('update:count', props.count + 1); }

The Solution //

A child component should never assign to a prop it received (e.g. props.title = 'New'). Vue logs "Unexpected mutation of prop" because props are a one-way binding. Copy the prop into local state with ref()/computed() first, or emit an event asking the parent to change its own data.

The Error //

Losing Reactivity by Destructuring reactive()

// Wrong
const { name } = reactive({ name: 'Alice' }); // name is now a static string

// Correct
const state = reactive({ name: 'Alice' });
const { name } = toRefs(state); // name is a live ref

The Solution //

Destructuring a reactive() object copies its properties out as disconnected plain values, so future mutations of the original object won't update the destructured variables. Keep referencing the object's properties directly, or convert it with toRefs() before destructuring.