Building Modals in Livewire
Playing
02. Basic modal functionality

Episodes

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

Transcript

00:00
Okay, so we're going to jump straight in here and get this working end to end. So we're going to build out a basic modal container. We're going to create a Livewire component, which represents the modal that we want to open. And then we're going to trigger that from our dashboard.
00:16
So the first thing that I've done is just gone ahead and created out a completely fresh Laravel project with Laravel Breeze. And I've chosen the Livewire and Alpine option when I've installed this. So we have Livewire installed.
00:30
And of course, Alpine is installed as well. And the only thing I've done is migrated the database and gone ahead and registered and logged into the dashboard. It doesn't matter what project you're working in.
00:39
As long as you have Livewire installed, we are good to go. Okay, so the first thing that we're going to do is create out a component that we're going to use for the modal. So let's go ahead and start off with Livewire make.
00:55
And we're just going to call this first modal. We're just going to keep this really, really simple for now. But of course, you'll come up with a better name when you're actually building this. Okay, so let's go over to the first modal component here, .blade.php.
01:09
And we're just going to write modal content in here. So keep it super simple for now. Now, where do we want to put this modal? Where do we want to actually render this Livewire component out to?
01:21
Well, it's actually going to be global. So if we head over to our layout file for app.blade.php, we're actually going to register all of these down here at the bottom of the page within the body. So don't worry too much now about the speed of this.
01:36
We're going to come up with a solution later to make this a little bit faster. But we'll go ahead and say Livewire and first modal. And we're done. So as you'd imagine, if we give that a refresh, you can see that the modal is just sitting
01:50
down here at the bottom of the page. Obviously, that is no good. Now, to get around this, we want a common wrapper for all of our modals. So we're going to do that with a blade component, which we can then just wrap within that Livewire
02:03
component. And then all of our modals will look the same. And all we need to do is just wrap them. So to do this, let's head over and create out a blade component.
02:12
So we're going to go ahead and say php artisan make component. And we're not going to call that app layout. But let's just steal that autocomplete. And let's go ahead and just call this modal.
02:23
So we're going to pass in the view flag here because this needs to be anonymous. We don't need a class associated with this. Or it just needs to be a template. So we're just going to use view.
02:32
And yeah, it looks like this already exists. So a bit of background here inside of Breeze, we actually already have a modal component inside of here. So I'm not going to delete that because that's going to get rid of some of the functionality
02:46
within Breeze itself. Let's go ahead and just rename this to modal wrapper just to keep things really simple. OK, so now that's created, we're going to head over to the first modal template here within our Livewire component.
03:01
And we can just go ahead and say modal. I think it will be one word. But let's just double check if we head over and give that a refresh. No, it's probably two.
03:11
Let's try that. Perfect. OK, so our modal is now wrapped within that. Now, nothing's being displayed on the page because over in our modal wrapper, what we
03:21
now need to do is introduce a slot. So I'm going to go ahead and copy over some code here. This is available on the GitHub repository. So you can go ahead and grab this as exactly as you see it here and just go ahead and paste
03:33
it in. Basically, we just have the background here, which is the background of the modal. And then we have the main content modal just here. And of course, this is relative because in here we're setting the overall thing as a
03:46
fixed position so it can sit in the middle. And then our modal content goes inside of here. So that's basically our modal wrapper. Now, what we can do is into here add in the slot.
03:57
So that slot is now going to take this content and put it inside. So we'll go over this in a second. But you can see now it's being rendered out on the page really nicely. So just a really quick recap here.
04:09
Over in our layouts, we just dump the modal Livewire component on the page. Then what we do is we wrap the template here in this wrapper that we've just created. And that wrapper is responsible for showing any of the content that you need inside of that specific Livewire modal in the same overall design.
04:28
Great. OK. So now this is working. Let's close off our templates because we don't really need them anymore.
04:34
And we're going to head over to the first modal actual Livewire component. Now, we're going to keep this really, really simple for now. And then later on, we're going to change this so we can use this functionality in any of the modals that we create.
04:48
So we're not going to do too much copying and pasting when we want to create new modals. That's going to be really silly in case we need to change anything. So I'm going to go ahead and create out a public visible property in here, which by default is going to be false.
05:02
What this will be responsible for is showing the modal container. Now, what we need to do is inside of the first modal, we don't really have access to the container itself. So first modal in here just has the modal wrapper.
05:19
So what we want to do is pass down as an attribute that visible Boolean into our modal wrapper because our modal wrapper is responsible for showing and hiding the actual modal itself. To do this, we can actually use wire model. So I'm going to go ahead and pass in visible directly into here.
05:40
That gives us access inside of our modal wrapper as to whether this first modal is visible or not. Now, we're going to leave it as false for now. We're going to head into our modal wrapper.
05:52
And we're going to go ahead and set this up with Alpine to show this if it is actually visible. So we'll go ahead and pull down our class here so we can add some additional things on the outside of here.
06:04
And we're going to go ahead and introduce this and make this an Alpine component. So into here, what we can do is we can grab whether or not it's visible. Now, let's just play around with this for now. I'm going to just go ahead and hard code this in as false.
06:18
And then I'm going to use X show to show this component, this now Alpine component, if this is visible. So as you'd imagine, if we just go over here, it's not visible. If I were to change this value to true, of course, what's going to happen is it will
06:35
show. So we now have a kind of way that we can actually toggle the visibility of this modal. And then once we do do this, we can add some transitions and stuff like that a little bit later on.
06:45
Now, this value needs to come from here. So how do we do this? Well, we can go ahead and use Entangle. And well, there's a couple of ways that we can do this.
06:55
But Entangle is going to work really well. And the reason for this is when we use Entangle, this creates a binding between the value that we have in the Livewire component and our template. So if we change this within Alpine, so if we disable the modal and we don't want it
07:10
visible, this will update in our Livewire component as well. We are going to be changing this around later because we're going to come up with a couple of issues. But we will see this working.
07:19
So to access that modal that we're using here, we go ahead and use the attributes and wire. And you guessed it, visible. So that will give in that true or false value from that Livewire component. So basically, it's coming all the way from here down into here now.
07:38
So if we head over, you can see at the moment it does show that it is visible. Let's just go ahead and check why that is. Because this needs to be modal, not visible. So that's the modal that we're actually passing down into here.
07:51
So it needs to be called modal. So if we give that a refresh, it's still showing. And that needs to be modal. So we got there eventually.
07:58
Modal. Perfect. OK, so we do see a little bit of a flicker when we give the page a refresh. But that's not a problem.
08:04
We can sort that out later. What we now want to do is show how we can show this directly from here. So I can set this to true. Remember, that filters all the way down to that component.
08:15
When I refresh, we see the modal appear. Great. OK, so now, really, if we control this visible property, it just means that we will show and hide the modal.
08:27
So I'm going to set this back to false by default. Now, how are we going to achieve toggling this globally? That's really what we want to achieve here. We want to be able to open this modal from any page on our site.
08:40
And from any live wire component. So what we want to do is attach an event handler to this. So we can trigger this from anywhere. And we'll be triggering that from Alpine.
08:49
So what would we normally do in this situation? Well, we'd probably go ahead and create out a show method inside of here. Which, of course, just goes ahead and sets visible to true. And then we would do the same here to hide this.
09:04
To set this back to false. So let's go ahead and do that. But we want to be able to listen to an event from anywhere. Like Alpine or even a live wire component.
09:16
So in here, what we're going to do is bring in the on attribute from live wire. And then we can just give a name. So we want to go ahead and listen to show, which is broadcast from anywhere. And then we want to do the same for hide as well.
09:30
So we'll do that. And just make sure you pull in on from the attributes collection in live wire. Okay, we're pretty much good to go. If we head over to our browser, we don't see this at the moment.
09:42
We are now going to go ahead and trigger this from Alpine by sending a show event through to this component. So if we head over to dashboard.blade.php, this is where we want to trigger this from. I'm just going to go ahead and create out a button to trigger this.
09:58
But it could be triggered from absolutely anything. Okay, so this is where we are going to make each of these buttons an Alpine component. Which dispatches a browser event. Picks this up within that specific live wire component.
10:11
And we can call that specific show or hide method. So technically, we could hide a modal from a button on our dashboard as well if we wanted to. Because we can trigger any event here.
10:22
So let's go ahead and just initialize this component with data. And then we're going to go ahead and say X on click. So this is going to be the open first modal button. Okay, so what happens when we click this?
10:37
What we can actually do here is globally access live wire. So we can go ahead and access live wire to dispatch. Now, we don't want to go ahead and just use dispatch here. Because that's going to dispatch this to every single live wire component.
10:53
Or at least every single live wire component with that on handler for show and hide will be listening to this event. So we want to dispatch this to a very specific component. Now, the API for this at the moment is not too open.
11:09
So we actually need to pass null here as the first argument. That's going to be the component name. But we can just name this. So we can say modals.
11:18
In fact, where do we put that? We didn't put that in a separate directory, did we? Let's go ahead and just spend a little bit of time organizing this. So under our views where we've got live wire.
11:30
Let's go ahead and just put this first modal into a modals directory. I think that kind of makes sense. We don't really want to have this just floating around. So if we go over to our first modal.
11:44
Let's go up here or down here and just say modals first modal. Okay, great. So that's now categorized other modals. Let's also go ahead and move the component here to modals.
11:56
So we can target that. And we'll move that over in here. And let's go ahead and update our namespace here to modals. Great.
12:04
Okay, so we've got a little bit more organization now. And that's going to allow us to trigger this using modals dot. So we're going to go ahead and trigger this with modals and first modal. And then the third argument to this is just going to be the name of the event that we're
12:22
listening to. The event that we're listening to to go ahead and show this. So we're just going to call show. So let's have a really quick recap before we show this in the browser.
12:30
So this is just going ahead and dispatching directly to this first modal component, the show event. We know that over in first modal, we are listening to a show event, which could either be global or targeted specifically to this component.
12:46
And then we're going to go ahead and run this show method, which is going to set visible to true. When visible is set to true, because over in our modal wrapper, we are entangling this and listening from where we have this in our template.
13:00
This should show this. And yeah, we get unable to find component. That's probably just the app there. So that needs to be modals dot first modal.
13:09
And just before we forget, if we come over to our modal here, we're going to want to update the render method to hit that new component. Okay, let's go over and give that a refresh. It's working.
13:21
When we click on this, sure enough, our modal is shown. Okay, so if that will make sense, brilliant. We can move on to the next episode. But I'm going to go ahead and just do a really quick recap, because the way that this works,
13:32
particularly if you're new to Livewire, can be a little bit confusing. Okay, so we know that we started out with just putting this component globally on the page. That means that it can be shown from any single page that we create, because our app blade
13:48
is every single page. Now, the next thing that we did is went and created out our modal component, which is our first modal, could be anything, contact modal, whatever. That goes ahead and renders out our first modal here.
14:03
So let's open that back up. This is wrapped within a modal wrapper, which is sending down the visible property that we have within that component so it can be used inside of that wrapper. Remember, the wrapper is going to be reused for every single modal we create.
14:19
And if we just open that up pretty quickly, we know that we get the value from here. And then we only show this modal wrapper if that's true. So obviously, by default, that is false. Now, the triggering works, because over in our first modal, we're listing for a show
14:37
event from anywhere. And we're just showing the modal, setting visible to true, which then filters back down into the modal wrapper and shows the wrapper, therefore showing the content within the wrapper. Now, the reason that this works within here is because Alpine and Livewire are entangled,
14:55
basically, not to be confused with the entangle functionality that we've used within the wrapper. But we can just use Livewire to globally dispatch the event show to the first modal. Now, a bit of background. This will work if you just say that you want to dispatch this to everywhere.
15:15
So we could do that. And if we click on that, it still works. But we don't want to do that, because every single modal that we have is going to have a show method, and it's going to have a visible property.
15:25
So by doing this globally, it's just going to open every single modal that you have. So that's why we are targeting that specific modal that we want to open when we click on this button. OK, there we go.
15:38
We've got basic modal functionality when we go ahead and click here, which isn't working. So let's go ahead and just set that to dispatch to. And there we go. OK, so we can move on now and look at some enhancements to this to make it even better.

Episode summary

In this episode, we dive right in and set up some basic modal functionality using Laravel, Livewire, and Alpine.js. If you're following along, make sure you have a fresh Laravel project set up with Breeze (choosing the Livewire and Alpine option), but really, as long as Livewire is installed, you're good to go.

We start by creating a new Livewire component that represents our first modal. This component is added globally to our layout, which means the modal functionality will be available across the whole app.

Next, we build a reusable Blade component as a wrapper for our modals. This helps standardize the look and feel of every modal we create, so you don't have to repeat yourself. We use a slot to inject the actual modal content and style the wrapper so the modal sits nicely in the center of the page.

To toggle the modal's visibility, we set up a visible property on our Livewire component and pass that into the modal wrapper. We hook Alpine.js up to this with @entangle, so changing the value from anywhere (either in Alpine or Livewire) will show or hide the modal. We also set up some show and hide methods on the component to control the modal easily.

Crucially, we wire everything up so you can show or hide the modal from anywhere in your app. We do this by setting up Livewire $on event listeners for show and hide. Then, we use Alpine to dispatch these events to the modal component. We also organize our modal components neatly into subdirectories to keep things tidy and make targeting individual modals via events easy.

The end result is a super flexible modal system that can be triggered globally, works across your app, and is easy to extend later. Now that the basics are covered, we’ll polish things up and add enhancements in the next episode!

Episode discussion

No comments, yet. Be the first!