How to Use Slot in Vue: Simple Guide with Examples

In Vue, you use <slot> inside a component to create a placeholder for content passed from the parent. This lets you build reusable components that can display different content depending on where they are used.

Syntax

The <slot> tag is placed inside a child component's template to mark where the parent can insert content. You can also name slots with name attribute to allow multiple insertion points.

Basic syntax:

• <slot>: Default slot for unnamed content.
• <slot name="header">: Named slot for specific content.

vue

<template>
  <div>
    <header>
      <slot name="header">Default Header</slot>
    </header>
    <main>
      <slot>Default Content</slot>
    </main>
  </div>
</template>

Example

This example shows a BaseLayout component using slots. The parent passes custom header and main content. If no content is passed, default text appears.

vue

<!-- BaseLayout.vue -->
<template>
  <div class="layout">
    <header>
      <slot name="header">Default Header</slot>
    </header>
    <section>
      <slot>Default main content</slot>
    </section>
  </div>
</template>

<script setup>
// No script needed for slots
</script>

<style scoped>
.layout {
  border: 1px solid #ccc;
  padding: 1rem;
  max-width: 400px;
}
header {
  font-weight: bold;
  margin-bottom: 0.5rem;
}
</style>


<!-- App.vue -->
<template>
  <BaseLayout>
    <template #header>
      <h1>My Custom Header</h1>
    </template>
    <p>This is the main content passed from the parent.</p>
  </BaseLayout>
</template>

<script setup>
import BaseLayout from './BaseLayout.vue'
</script>

Output

A box with a bold header 'My Custom Header' and below it the text 'This is the main content passed from the parent.'

Common Pitfalls

Common mistakes when using slots include:

• Not wrapping slot content in <template> when using named slots, causing errors.
• Forgetting to provide fallback content inside <slot>, which leads to empty areas if no content is passed.
• Trying to bind props directly to <slot> without using v-slot syntax.

vue

<!-- Wrong usage: named slot content without template -->
<BaseLayout>
  <h1 slot="header">Wrong Header</h1> <!-- This is legacy and won't work in Vue 3 -->
</BaseLayout>

<!-- Correct usage: wrap named slot content in template -->
<BaseLayout>
  <template #header>
    <h1>Correct Header</h1>
  </template>
</BaseLayout>

Quick Reference

Tips for using slots in Vue:

• Use <slot> for default content placeholders.
• Use name attribute and #name syntax for multiple slots.
• Always wrap named slot content in <template> with #name.
• Provide fallback content inside slots for better UX.

Key Takeaways

Use <slot> in child components to accept content from parents.

Named slots let you define multiple insertion points with name and #name syntax.

Wrap named slot content in <template> with #name when passing from parent.

Always provide default fallback content inside slots to avoid empty areas.

Slots make components flexible and reusable by separating structure from content.