Hack Frontend Community

What are Slots in Vue?

Slots are a mechanism for passing content from parent component to child placeholder inside template. With them you create flexible and reusable components, allowing parent to insert arbitrary content into predefined areas of child component.

Slot Types

  1. Default slot — basic slot without name.
  2. Named slots — named slots where each slot place has its own name.
  3. Scoped slots — slots that pass data from child component back to parent through slot props object.

Default Slot

<!-- ChildComponent.vue -->
<template>
  <div class="wrapper">
    <slot />
  </div>
</template>

<!-- Parent.vue -->
<ChildComponent>
  <p>Hello from parent!</p>
</ChildComponent>

Named Slots

<!-- Layout.vue -->
<template>
  <header><slot name="header" /></header>
  <main><slot /></main>
  <footer><slot name="footer" /></footer>
</template>

<!-- Usage -->
<Layout>
  <template #header>
    <h1>Page Header</h1>
  </template>

  <p>Main page content</p>

  <template #footer>
    <p>© 2025</p>
  </template>
</Layout>

Scoped Slots

<!-- List.vue -->
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot :item="item" />
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    items: Array
  }
};
</script>

<!-- Parent.vue -->
<List :items="users">
  <template #default="{ item }">
    <strong>{{ item.name }}</strong> — {{ item.age }} years old
  </template>
</List>

Don't modify slot props:

slot props object is available only for reading in parent template.

More information in official Vue documentation: Vue Documentation: Slots