How to use slots in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Vue slots provide flexible component composition by allowing parent components to pass content into specific areas of child components. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented slots in thousands of Vue components to create reusable and customizable interfaces. From my expertise, the most effective approach is using named slots for multiple content areas and default slots for simple content injection. This method enables flexible component design with clear content distribution patterns.
Use <slot> in child components and <template #slotName> in parent components for content distribution.
<!-- Child Component: Card.vue -->
<template>
<div class="card">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
<!-- Parent Component -->
<template>
<Card>
<template #header>
<h2>Card Title</h2>
</template>
<p>This is the main content</p>
<template #footer>
<button>Action</button>
</template>
</Card>
</template>
Slots act as placeholders in child components that can be filled with content from parent components. Use named slots with name attribute for multiple content areas and default unnamed slots for simple content injection.
Best Practice Note:
This is the same slot approach we use in CoreUI Vue components for flexible content composition. Provide fallback content in slots and use descriptive names for better component APIs and developer experience.
