3.1 Using Slots to Facilitate Customization

In the previous lesson, we successfully wrapped Bootstrap's modal component as a Vue component. And it works but it leaves a lot to be desired [LAUGH] because the content is static. It's hard coded in the modal. And there might be some cases where we would want a modal with static content, but none really come to mind. I mean, the whole idea behind having a component like this would be to be able to supply whatever content that we wanted. So in this lesson, we are going to do that. And it's actually quite simple to do. All we have to do is use Vue's wonderful feature called Slots. And adding a slot to a component is very simple. We just have an element called slot. Now you can think of a slot as a placeholder. So that's what we want to do, then, is take the content that we want to supply to our modal and take it out so that all we have is our slot. And then inside of whatever is consuming our modal component, which is our app component, we will put our content in between the opening and closing modal tags. So let's get rid of this white space so that it's nice and pretty. And whenever we show our modal, we will see the same exact result. And to prove that, let's change the title so that instead of Modal title, This is the title. So whenever we say this, we should see that updated in the browser and, voila, there we go. Now this is great. This is a huge step forward. However, if I'm using this modal component, I don't want to have to use all of this, what is essentially boilerplate. I mean, if we have a header then it's probably gonna have a title, it's probably going to have the button for closing the modal. So really, what I would want to do, then, is just supply the title. And yeah, we can do that with a prop very easily. However, that kind of steps away from this idea of supplying content to our modal component. So what we can do, then, is use another slot. And we can give it a name, it's called a named slot, so that we could specify a slot for the title. In fact, it would look like this. We would have slot, it would have a name attribute, and we would just call it title. So let's take this whole element and its children for the header and let's put that inside of our modal component. Now what this is going to do, then, is give us a placeholder that we can use the title, it's right there. So that's inside of our content. We can say div, and then we use the slot attribute. We set it to whatever name that we want, and then This is the title. So that we will essentially get the same results, if we show the modal, we see that happening. However, let's inspect this. And we are going to see that we have our h5 element, but we also have this div element because we specified a div element here. So behind the scenes, Vue saw that this div element is the content for our title slot. So it took this whole element and its content and it put it right where we had that named slot. So if you want that behavior, then that's great. However, in our case, we don't really want to show any extra HTML unless if it is actually inside of our title. So what we are going to do, then, is replace the div element with the template element. And if we save this, over on the right-hand side, we're going to see that the content automatically updated. We have the h5 element and just the content. We don't have that div element anymore. So if you don't want any HTML output from using a named slot, you can use this template element. Let's do the same thing for the footer. So let's just take that element out, and then we will have the footer. We'll have a slot with the name of footer. And then we will supply the buttons there. So it's essentially going to be the same thing. We will use the template element. Let's give it the slot attribute for footer, and then we will have our buttons. So once again, let's show our modal, we have the same results. Now as far as the body is concerned, the body is kind of the default content of our modal. I mean, it makes sense to specify the title, it makes sense to specify the footer. But as far as the body, that doesn't make a whole lot of sense. We should just be automatic, whatever content that we have that's not being used by a named slot should be the body. So what we can do, then, is take out the Bootstrap markup for the body. And we are just going to put our default slot there, because that's what we have. We have named slots and then we have our default slot. So now, if we just get rid of everything except our named slots, and we have our content, we can see that our content is right there, although the whole styling changed, didn't it? Let's make sure that everything was okay. I don't see why, okay, there we go. It was just a little glitch. So we can add another p element that has more content. And we will see that that will display right inside of our modal. And the great thing about this, it doesn't matter what order we specify this content. We can have the title at the bottom, we can have the footer at the top. We can have, well, let's move the default content up at the top. Now we have completely reorganized how we supplied the content. But that's okay because the structure of our component is controlled within the component itself. So if we show the modal, everything looks like it did before and that's exactly what we wanted. So that's a great step forward. However, there are times when we would have a modal that doesn't have a footer. And in those cases, if we don't supply a footer, well, we still have the markup of the footer because that is inside of our component. And that is definitely something that we want to address. And we will do that in the next lesson.