Let's get going. So here I have my little team dashboard example again. And yes, I have a button to add a member, but of course, at the moment, it doesn't do anything when we click it. Well, maybe it should display a modal, but at the moment, we have no idea how to make that work. All right. Let's give it a shot. Why don't we start by adding a new view component for a modal? And we'll start by keeping this as basic as we can.

Why don't we start by adding a new view component for a modal? And we'll start by keeping this as basic as we can. We'll have a header section, a main content section, and then a footer section. And for now, I'll just use placeholders. Main text, and then header text. We can now return to, how about, TeamView, and we will import it. Import Modal, like so. And yeah, now down here at the bottom, let's include it, and then have a look in the browser. So we switch back, scroll down, and sure enough, we have our modal, but of course, it's not positioned properly.

And you can play around with that to get exactly what you want. You want it 20%, 40, it doesn't really matter. Maybe 40%. Okay. So let's grab all of that. And of course, I'm using Tailwind here, so I could add the classes directly to our modal. So just to show you there's many ways to do things, we could also add a style tag here where I say modal, what would we call this, mask. That's very common. And I'll paste in that CSS, and then we'll add our class to the top.

the center of the page. Okay. Next, why don't we set a width on the container? So for example, I could do width of 800 pixels. And yeah, that would work, but of course then for mobile layouts, it wouldn't be ideal. So why don't we instead say a width of, I don't know, 75% of the viewport width or how about 80? And you'll see now it's going to take up 80% of the width of the window. But then if you want, you could set a maximum width to say, all right, I want it to be 80% of the width or a maximum of 500 pixels.

But then if you want, you could set a maximum width to say, all right, I want it to be 80% of the width or a maximum of 500 pixels. And that's what we get here. All right. Pretty good. Next, of course, I want to conditionally display this model. I don't want to see it by default. Okay. Well, maybe we need to set a prop. So I'll do this.

Well, maybe we need to set a prop. So I'll do this. I'm going to place my scripts at the top of the page. I will use script setup, and then let's create a prop using defineProps of, how about show? And that'll be a Boolean. This is a very common way to tackle this particular problem. Okay. Now on the root element, I can say only display this div if show is truthy. Okay. So now if I switch back, we don't see it at all.

Okay. So now if I switch back, we don't see it at all. Perfect. But if we go to team view, we could force it to display by saying either show is true and you'll see it pop up here. There we go. Or because it's a type of Boolean, I could just say modalShow. And now we still see it. Okay. So yeah, now you can probably see where we're going here.

Okay. So yeah, now you can probably see where we're going here. All we need at this point is a source of truth that we can toggle. If it's false, we don't see the modal. If it's true, we do see the modal. Okay. Let's do that now. At the top, let's create a variable like showModal. And again, that will default to false. Okay.

So why don't we do this now? Bring it back to false. And let's see, the button is right up here in the header. Now there's actually a couple of different ways that we could handle this and maybe I'll show you both. But at least to start, maybe we need to listen for when this button is clicked and emit an event. So we could say when you click on me, emit, and then we'll call it something like add. Okay. Again, this would be one way to tackle it.

So we could do that now. We could say the default in the footer is a button called close. And yeah, as you can imagine, when you click on it, we should close the modal. When you click on this, let's emit an event. Anything you want. How about close? And now I can listen for that event from the parent. And again, this is a very common way to deal with this. Don't forget, parents communicate with the children through props. Children communicate back to the parents via emits.

Don't forget, parents communicate with the children through props. Children communicate back to the parents via emits. So in this case, we're communicating by emitting an event called close. The parent will listen for that event. On close, set showModal to false. And yeah, this is very much a data-driven approach for dealing with simple modal components like this. Cross your fingers. Give it a refresh. Click the button.

We'll go into the modal. And yeah, for the header, well, why don't we do this? Let's set up a slot with the name of header. And I'll say default header. And then I'm going to do the same thing for all of these. slot name is default. So in that case, I'll just leave it blank. default body. And then finally down here in the footer, I will wrap this within a slot of footer. So yeah, we have our default close button, a default body, and a default header.

And then finally down here in the footer, I will wrap this within a slot of footer. So yeah, we have our default close button, a default body, and a default header. But now because they're wrapped in slots, if we need to, we can override them. So have a look here. Default, default, default. But if we want to tweak it, we just come down here to where we, quote unquote, call our modal. And now I can say, and this is all a recap at this point, if I want to override the header, we can use hash header. And I can say override the header.

There we go. Next, hmm, maybe this should be wrapped within a div. Switch back, and now, yeah, there's our div. So what I could do maybe is set a display of flex, and that would allow me to, on the input, say stretch to fill all of the available space. And you know what? Why don't we add a little spacing between the children? Okay, give it a try, and that's good enough. So you get the idea. Now we have a way to dynamically display a modal to accept information from the user,