Jump Start with Vue 3/

...

/

Named and Scoped Slots

Named and Scoped Slots

Learn about named and scoped slots.

We'll cover the following...

Named slots

Our component slots can actually be named, meaning we can have multiple slots rendered in different locations in the template. This allows us to design very flexible components that are highly configurable.

As an example, let’s say we want to create a reusable Bootstrap for our application, with slots to provide header, footer, and body content.

Here’s the HeaderFooterCard.vue component (template only):

Press + to interact
<template>
<div class="card text-center">
  <div class="card-header">
    <slot name="header"></slot>
  </div>
  <div class="card-body">
    <slot name="body"></slot>
  </div>
  <div class="card-footer text-muted">
    <slot name="footer"></slot>
  </div>
</div>
</template>
...