Building Modals in Livewire
This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
09. Creating a helper function to launch modals

Episodes

0%
Your progress
  • Total: 1h 1m
  • Played: 0m
  • Remaining: 1h 1m
Join or sign in to track your progress

Transcript

00:00
Let's be honest, the way that we are currently triggering these modals is a little bit too much code. If we want to go ahead and quickly just write this out, it's a little bit too much to think about. So what we're going to do in this episode is create out a magic function within
00:15
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
00:37
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
00:57
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
01:18
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
01:42
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
02:02
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.
02:25
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
02:46
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,
03:08
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
03:34
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.

Episode summary

In this episode, we take a close look at how cumbersome our current code is for triggering modals and set out to clean things up by creating a handy helper function. We'll build a custom magic function in Alpine.js that lets us open modals with a super simple API—way less code, and way less to remember each time we need to use it.

You'll see how we pick a name for our function (we go with modal) and set it up so you can just pass the modal's name as an argument to open it instantly. No more dispatches or awkward global calls—just a clean and intuitive way to work with modals.

We also cover a bit of setup: disabling the default Livewire/Alpine injection, importing everything manually, and making room for our custom magic methods. Once everything is wired up, we test it out in the console and confirm it works exactly as intended. By the end, we've got a much more streamlined way to trigger modals, and you’ll know how to extend this approach even further—like creating a hideModal function if you want. The old example code is left for reference, but you'll love how much cleaner this method is!

Episode discussion

No comments, yet. Be the first!