Named Slots and Default Slot
Multiple , , shorthand #name syntax.
Named Slots and Default Slot is a free Vue Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Slots Are
Slots let a parent pass markup into a child component. The child decides where that content appears using the <slot> element. This is Vue content distribution.
The Default Slot
A <slot> with no name is the default slot. Whatever the parent puts between the component tags lands there.
<!-- Card.vue -->
<div class="card">
<slot></slot>
</div>Using the Default Slot
The parent simply nests content inside the component tags.
<Card>
<p>This goes into the default slot</p>
</Card>Why Named Slots
Many components have multiple insertion points - a header, body, and footer. Named slots give each region an identifier so the parent can target them individually.
Declaring Named Slots
Add a name attribute to each slot. A component can mix named slots and one default (unnamed) slot.
<!-- Card.vue -->
<div class="card">
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</div>Filling Named Slots with v-slot
In the parent, wrap content in a <template> with the v-slot:name directive to target a named slot.
<Card>
<template v-slot:header>
<h2>Title</h2>
</template>
<template v-slot:footer>
<button>OK</button>
</template>
</Card>The # Shorthand
v-slot: has a shorthand: #. So v-slot:header becomes #header. This is the idiomatic, concise form.
<Card>
<template #header>
<h2>Title</h2>
</template>
</Card>Default Content Between Tags
Content placed directly between the component tags (not inside a named template) goes to the default slot. You can target it explicitly with #default too.
<Card>
<p>Implicit default slot content</p>
<template #footer>Footer</template>
</Card>Mixing Implicit and Explicit
You can write the default content loosely and named slots via templates in the same usage. Vue routes each piece to the right place by name.
<Card>
<template #header><h2>Header</h2></template>
Body text right here
<template #footer>Footer</template>
</Card>Rendering Order
The order of slots in the parent does not matter - the child template controls the final layout. Slot content always appears where the child placed the matching <slot>.
A Practical Layout Component
Named slots make reusable layout shells. One <BaseLayout> can host any page by accepting header, sidebar, and main content slots.
<!-- BaseLayout.vue -->
<header><slot name="header" /></header>
<aside><slot name="sidebar" /></aside>
<main><slot /></main>Quick Check
What is the shorthand for v-slot:header?
Recap
You learned slots distribute parent markup into a child. A nameless <slot> is the default slot; adding name creates named slots. Parents fill them with <template v-slot:name> or the #name shorthand, and the child template decides final placement.
Frequently asked questions
Is the “Named Slots and Default Slot” lesson free?
Yes — the full text of “Named Slots and Default Slot” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.
What will I learn in “Named Slots and Default Slot”?
Multiple , , shorthand #name syntax. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Vue Academy?
No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Named Slots and Default Slot” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Vue Academy lesson?
Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Named Slots and Default Slot
- Scoped Slots: Passing Data to Parent
- Dynamic Slot Names
- Slot Fallback Content and Checking Slots