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):

Get hands-on with 1400+ tech skills courses.