A House is not a Home: Vue Slots Explained
Tags: javascript, vue, beginners
Published: 2019-07-03 17:15:32

---
title:  A House is not a Home: Vue Slots Explained
published: true
description: I attempt to explain Vue slots using houses!
tags: javascript, vue, beginners
cover_image: https://thepracticaldev.s3.amazonaws.com/i/hogebvut6be1a5hfte94.jpg
---

*Cover from <a href="https://www.freepik.com/free-photos-vectors/design">Design vector created by freepik - www.freepik.com</a>*

Vue slots are a way of telling Vue where to place any content we write within a component's body. Today, we will be building houses to learn about Vue slots!

Before we begin, let's imagine Vue components as houses. For us to be able to enter a house, we would need to use a door; In our component, our `<slot>` tags would serve as a door for our other components to enter. Let's make our first house!

{% gist https://gist.github.com/mccabiles/3b50f9c68b767994ddb1c064a888adef file=HouseComponent.vue %} 

We use the `slot` element to tell our component where to display content. If we were to include our `HouseComponent` into a village component like so:

{% gist https://gist.github.com/mccabiles/3b50f9c68b767994ddb1c064a888adef file=VillageComponent.vue %}

We see that our component placed all its child elements into the living room. Vue does this through the **default slot**.

## Adding Rooms with Named Slots

Having a house with just a living room isn't a comfortable place to live in; let's introduce more rooms into our house component using **named slots**!

We can add the `name` attribute to our `slots` to, you guessed it, name them. This gives us the freedom to position parts of the content within our template.
Let's refactor our `HouseComponent` by adding more rooms and placing other elements within those rooms:

{% gist https://gist.github.com/mccabiles/3b50f9c68b767994ddb1c064a888adef file=HouseRoomsComponent.vue %}

Let us notice two things about our new `House`:

First, we added a **named slot** called `dining-room` at line 8. To put content into this slot, we use the `v-slot` syntax in line 22. From here, we can see that `chubbs` and `food` are both placed between the two `chairs` in the `dining-room`: exactly where we placed our `slot`.

Second, everything else between the `<house-component>` tags that are not part of the named slots were rendered at the **default slot**, ie. within the `living-room`.

When this is rendered onto our page, it will look like this:

{% gist https://gist.github.com/mccabiles/3b50f9c68b767994ddb1c064a888adef file=OccupiedHouse.html %}

As we can see, we can use named slots to define layout for our markup. This makes components easy to compose and reuse. However, let's take it a notch higher, and introduce the concept of **scoped slots** to further improve our humble home.

## Adding Furniture with Scoped Slots

Rooms in a house are not only defined by their position within the building, but also the activities that can be done within them! In the same way, Vue slots are not only a means of composing your components visually, but may also be used to expose interactions and data. This is done through **scoped slots**.

Components can bind data or methods to slots, like how they would with props. This allows the parent to interact with the component through the scoped slot. Let's add interactions to our `HouseComponent` to really call it a "home".

{% gist https://gist.github.com/mccabiles/3b50f9c68b767994ddb1c064a888adef file=HomeComponent.vue %}

There are a few things we should dissect before moving on.
First, notice that we added `v-bind` directives to our named slots. These will allow the parent component to access anything bound to the slot as **slot props**. We added the `<script>` portion of the component to define our methods and data. Let's now add furnishings to our new home!

{% gist https://gist.github.com/mccabiles/3b50f9c68b767994ddb1c064a888adef file=OccupiedHome.vue %}

As we can see, we still use the `v-slot` syntax; however we appended a value to it. Each of our `v-slots` have access to different slot props, each containing the methods we bound to them in our `HomeComponent`. This means we can have different houses with different layouts, elements, contents, even components! Yet they all still have access to the functions of our `HomeComponent`; in our case, switching the channel, watching TV, and eating together.

{% gist https://gist.github.com/mccabiles/3b50f9c68b767994ddb1c064a888adef file=FancyHome.vue %}

## Way Back Home

To conclude, we learned about Vue slots: how we can use named slots to lay out and compose our components (define our rooms), and how we can use scoped slots to expose functionality (add furniture). 

I hope you found this article informative and easy to understand. Please do let me know if I have any errors in grammar or lapses in information that the reader would find helpful.

Thank you for reading, and good luck in building those houses!