If I open up the modal and we inspect the HTML, yeah, notice it shows up right here within the main tag. So it's very much nested within our document. And ideally, I want it to show up right around here, right before the closing body tag. Let's open up my team view. And yeah, right down here where we reference the modal, view provides a component called teleport. So I'm going to wrap it in that, like so. And yeah, just think of this as our way of saying, well, anything within here, I want to teleport to somewhere.

It's no longer deeply nested within that app div, and this is what we want, especially for CSS styling purposes. You might be okay in some browsers, but you'll run into these odd situations where if your modal is deeply nested, and maybe a parent also has a position of fixed, maybe in a mobile browser, things just won't work the way you expect. So again, as a general good practice, try to place your modals at the bottom of the page, and teleport can be really useful for this. And even further, you get a little more flexibility. Here's what I mean. Let's go into, let's see, team-header.

Here's what I mean. Let's go into, let's see, team header. And yeah, so we have this button to show the modal. But right now, it is entirely separate from the declaration of the modal. Some people like to combine the two. Let's see what that might look like. Why don't we say, we could create a modals directory, but I'm going to put it directly within teams. I'm going to add a new one here, and I'll call it addMemberModal. All right, and if I switch back to team view, I'm now going to take all of this here, and

I'm going to add a new one here, and I'll call it addMemberModal. All right, and if I switch back to teamView, I'm now going to take all of this here, and this will now live within that new component. So I will paste it in like so. Next, let's put the <script> tag at the top, switch over to script setup, and then of course import Modal from components/Modal.vue. Finally, we just need our ref right here, and I'll paste that in. And yeah, I think that should do the trick. But now, here's the cool thing. If I switch back to teamHeader, what if this button here also lived within that modal?

So I can get rid of that. We clean this up. We go into team header, and now wherever the button should display, I could reference the tag member modal. And that automatically is imported here at the top. Cool. So now if I switch over to this new component, let's have a look here. We no longer emit an event. Now it looks like we need to access information about the number of spots remaining.

We no longer emit an event. Now it looks like we need to access information about the number of spots remaining. You know what? You could pass that in as a prop, or you could reference the teamStore that we created. Either one would be fine in my mind. Let's use the teamStore since we're still learning how to work with that. Use teamStore, and then let team equals useTeamStore. And that should do it. So now the only remaining step is to handle this button. When you click on me, showModal becomes true.

yet exist in the DOM, because we haven't yet mounted the footer. Now, generally, this approach is somewhat frowned upon, but yeah, if you do need to teleport to other view components, you can do so. You just need some way to wait for the component you're teleporting to, to have mounted. Try to say that a few times fast, but yeah, it is something you could do. You could simply add a mounted hook and then dispatch a global event. In this example, I'll just show you a simple setTimeout to simulate that, but yeah, there are ways to do it if you need to. So yeah, let's go to our modal and let's add a new property like loaded, and that will default to false, and then I will use a setTimeout to simulate some kind of event being fired,

So yeah, let's go to our modal and let's add a new property like loaded, and that will default to false, and then I will use setTimeout to simulate some kind of event being fired, something being loaded. Maybe after two seconds, we'll say loaded.value is true. Okay, so now think about it. Let's teleport, let's create this only if loaded is truthy. But think about it, when this loads, loaded is false, which means we don't even render this teleport component. But after two seconds, it changes to true, and we do, and at that point, we teleport to this selector right here, which has mounted at this point, at least we're assuming at.