Now that we have created our first Modal, I want to extract it into a separate component so that we can reuse it on other pages. Let's see how we can do that. In the users directory, I'm gonna create a new file called ModalView, and let's start with the script setup block and a template block. And then we're going to import it in our index page. So import Modal from ModalView.

And then we're going to import it in our index page. So import Modal from ModalView. And let's see, below our layout, going to use this new Modal component and I'm gonna paste the header and the form into it. So let's see. Here's our header, h1, and the whole form section. Gonna cut it and paste into the Modal. Let's hit save. So which formats and the stuff that we got left over the whole teleport section, that's

So which formats and the stuff that we got left over the whole teleport section, that's what I'm gonna copy into the new model components. So in the template block, let's do it here, let's reformat it and then you'll see we are stuck with this editingUser state. So instead of editingUser, I'm just gonna replace this with show and make it a property. So in the script setup block define props, let's add show as a boolean, and by default it's false.

So in the script setup block define props, let's add show as a boolean, and by default it's false. Then the last thing we need to do is add a slot. So where once the header and the form was we are, now we the slot. So that means everything. Whoops. That means everything in here, the header and the form will eventually end up right here, just at the place where we want it. Then we need to use that prop.

just at the place where we want it. Then we need to use that prop. So in here I'll say show equals editingUser not equal to false. Let's go to the browser and see if this works. Gonna click editModal. Yeah, that seems to work. Cancel works. Updating also works. Let's see. Validation still works. Yeah, everything seems fine. So now we can continue building in our separate modal.

Yeah, everything seems fine. So now we can continue building in our separate modal component.