Sign up to access "Building Modals in Livewire" right now.

Alpine that does exactly this, but with a much cleaner API. Okay, so how are we going to do this? How do we want this to look? Well, let's just go ahead and duplicate one of these buttons down here. We're going to do exactly the same thing, and we're going to open up the first modal. But we're going to go and get rid of all of this, and this is how it's going to look. So we're going

to choose a name for this. We can call this whatever we want. I'm just going to call this modal. And then inside of here, I want to give the name of the modal. So in this case, it would be the first modal. So that is what we're going to end up with. When we click this, call this magic function, pass through just the modal that we want to open, not null, not the name of the thing that

we want to dispatch. We're not calling a dispatch to. We're not calling a global live wire object. That's pretty much it. So that's what we are going to end up with. Obviously, at the moment, this doesn't work. Let's take a look at how we implement this. Now, we need to attach this to Alpine somewhere, and usually we would do that within our app file where we were importing

Alpine. But with the way that we have this set up and the fact that Alpine bundles with LiveWire, we don't have an Alpine instance that we can add plugins to or add these magic methods to. So we're going to head over to the LiveWire docs and look at how we can manually bundle LiveWire and Alpine. So if we scroll down here, the first thing that we want to do is disable

the injection of LiveWire and Alpine scripts with this directive. So we're going to go over to app.blade.php, and we're just going to put that down here at the bottom of the body. Now, if we head over to our app, that just gets rid of LiveWire, gets rid of Alpine, nothing works. We just see the modals because obviously the visibility of these can't be

controlled. What we then do is go ahead and manually import LiveWire and Alpine, and we can put that directly in app.js at the top here. And then we want to go ahead and just start LiveWire. Now, in between doing that, what we can do is register Alpine plugins. We can build up these magic functions, whatever we need to do. That's exactly what we're going to do now.

OK, so we're going to go ahead and reference Alpine, and we're going to use the magic function here to give the name of a function that we want to register. And of course, we know that's going to be modal. Then we have a closure just inside of here, which returns a function which is executed when we use this. So I'm going to go ahead and just return. We can do this all in line, but I'll

just do these as in a function for now. And we're going to take in the name. And for now, let's just console log the name out here just to see if this works. OK, great. So now that we've got this, we know that we can call modal. We can pass a name in, and we get it console logged out exactly like we're doing over on our dashboard. So let's keep an eye on the console, click on this,

and there we go, modals.firstModal. So all that's left to do here now is take the code that we used here and just copy and paste that over to what we're doing inside of here, of course, replacing out the name that we have here. That's it. So let's go over to our app, and let's see if this works. Great. It triggers the modal, and of course, everything is working

nicely. All right. So I'm going to leave the two examples that we have just up here, just so we have a reference to what we previously did. But this is a much cleaner way to trigger modals. You can even go ahead and create another magic function if you wanted to, to hide modals, so you could trigger this from anywhere to hide something. It's entirely up to you.