Named Slots and Default Slot
Multiple , , shorthand #name syntax.
Named Slots and Default Slot is a free Vue Academy lesson on CoddyKit. This is lesson 1 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, and your progress syncs across the web and the CoddyKit app. The Vue Academy course includes 4 lessons in total.
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.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 42
- Lessons
- 156
Frequently Asked Questions
Is the “Named Slots and Default Slot” lesson free?
Yes — any 3 lessons of the Vue Academy learning path, including “Named Slots and Default Slot”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Vue Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.
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