Quick and Easy Livewire Modals
Playing
01. Quick and Easy Livewire Modals

Episodes

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

Transcript

00:00
So I'm going to show you the quickest way to get modals set up in your Livewire applications and we're going to be using the wire elements modal package.
00:09
Now you can go on the github repository, you can browse the documentation here for yourself but I'm just going to take 5 to 10 minutes to go through, run through and set this up so you've got a really good idea of how to work with this. Okay let's get started.
00:24
So I have a fresh Laravel project. I am using Laravel Breeze which is a little bit outdated now but it doesn't matter what you're using. As long as you are using Livewire and you have Tailwind installed which you can customize,
00:37
we'll talk about that at the end of the video, then you're good to go. So I have a Livewire application up and running. Let's get started. So we're going to go down to the installation section.
00:47
We're just going to go ahead and focus on this and then we'll take it from there on our own and we're going to install this package and then we're going to go ahead and add in the directive, the Livewire directive here to load in everything that this package needs. Now we need to do this on some global base template.
01:06
So in this case with Laravel Breeze that is app.blade.php. So I'm just going to pull this down here just before the closing body tag. That's going to be where all of our modals get rendered out and then triggered and shown when we decide to trigger them.
01:22
So now that we've got this up and running, we want to come over to any of our pages and we want to trigger a modal here somewhere. But the question is, how do we create a modal? Well that is just as easy as creating out a normal Livewire component.
01:37
We don't really need to do much else. So let's go ahead and do what we're probably already used to and create out a Livewire component. So we use Livewire and make.
01:45
Now with modals, I like to put these all in one directory. So I'm just going to put these in a modals directory and I'm just going to create some modal. We're just going to use this as an example.
01:55
Now let's go over to the some modal template and let's say this is a modal just so we can actually see this appear. And now let's come over to the some modal component. Now I kind of lied.
02:07
We don't just want to create a component. We want to create a component that extends the base modal component from this package. Now that's going to contain a bunch of useful methods and it's going to allow this component to act like a modal.
02:21
We'll see what that entails in a little bit, but let's get this modal triggered. Now there's a couple of ways to do this. You can do this from outside of a Livewire component
02:32
with Alpine or just pure JavaScript or you can do this within a Livewire component. Let's start with doing this within a Livewire component and I'll show you how to do this outside.
02:43
So we're going to go ahead and just create out a really basic Livewire component here. I'm just going to call this some component. Again, we'll just keep this really, really rough and let's just dump this component on the page here
02:54
at least so we have a component to work with. So we'll leave the actual content of this component alone and we'll go ahead and open up the blade template for this and let's create our button that when we click using wire click
03:07
we go ahead and trigger this. So I'm going to say trigger or load or launch modal. Okay, so what do we want to do here? Well, we need to dispatch a specific event that is open modal
03:21
and then what we do and this is the event from that package is we pass through the location of the component that we want to open. So let's go ahead and say component and we're going to say modals dot
03:33
because we put that in a directory and we're going to say some modal. That's all we need to do to launch this modal. So we can just use this code
03:41
as long as we're within a Livewire component anywhere. Let's head over to the browser and let's close this off because we're sort of doing this on our own and let's go and launch this modal and there we go.
03:52
This is a modal. It has been launched pretty straightforward stuff. I'm just going to go ahead and run npm run dev here just to make sure we load in all of these styles here
04:00
and there we go so that's a little bit better. So in terms of styling the modal you can do this directly within the some modal component or any of your modals.
04:10
It's probably best to create a wrapper for this but what I tend to just do is just use the default styles and just add a padding to this. So that's going to go ahead and add in a padding to that modal.
04:20
It is a really good idea to create an overall wrapper so like a blade component or something like that for all of the styles of your component but I'm just going to keep this as it is for now.
04:30
Okay so before we look at what else we can do with this let's go over to our dashboard and look at how we can open this modal but just using pure JavaScript or using Alpine.
04:40
So if I were to create a button here and I were to initialize this as an Alpine component and we said launch modal from outside livewire let's go ahead and attach a click event handler to this
04:58
and let's see how we can do this. So anywhere outside of a livewire component dashboard is just a plain blade file at the moment we can say livewire.
05:08
That's a global livewire object and we pretty much just do the same thing so we can just say dispatch. So the only difference here
05:14
is that we have to reference livewire specifically so we want to dispatch the open modal event and again for the options that we pass through here we're just going to pass through the component
05:23
which is a modals directory and it's called sunmodal so you'll see that this will work in pretty much the same way it will open up the modal
05:32
so we've got two ways of doing that. Okay so what else is super important when we're dealing with modals? Well probably passing data through to modals
05:44
sometimes you're going to need to have some sort of context awareness within your modal of what's happening so let's just imagine
05:51
since we're not building out a full application here that this dashboard was a user's profile page and we had access to the user on this page when we launch any kind of modal
06:02
like to edit the user, delete the user we might need to take some information about the user now let's keep our example simple for now we're going to ignore the launching from outside of livewire
06:13
this will work in exactly the same way so any of the options that we see as we go will apply here as well but we're going to go over to our sum component
06:21
and we're going to pass some data through to here so as well as passing in the component to pass through data let's just take a look at a basic example
06:28
we're just going to use the arguments option and this is just an object of data so let's just keep this simple for now pass a string primitive through to this called name
06:40
what we can now do is inside of sum modal so the actual component itself we can let this component know that we want to grab in a name in here
06:50
a string name then over in sum modal we can go ahead and just dump this out so let's just make this into a better example
06:58
and just say hey comma and then let's say name so that value that comes through so we basically pass this from the trigger
07:06
from here into sum modal here and then obviously we know this is a live wide component
07:13
so that value the variable will be or that property will be accessible within the template so not clicking on this one but clicking on this one
07:21
we're actually passing the argument through and I click it you can see sure enough now we see hey Alex
07:27
now that's really useful but it's not often that you're going to be dealing just with primitive values you'll probably just want to pass a user through to here
07:36
so how do we do that? well let's just pull this into a sort of fuller example so we've got our dashboard over here this view
07:44
I'm just going to do this by passing a user through to the view which isn't recommended but we'll go ahead and say user find one here and we now should have access to that user on here
07:53
so let's just make sure we pull in the user in reality though you're going to be passing that user through from your controller to your view
08:02
okay so if we head over to the dashboard here what we can now do is let's just change this over to user and name and there we go
08:11
sure enough this is kind of now like a profile page so if we want to launch this modal but we want the actual user instance inside of our modal what would we do?
08:22
let's think about this because there's actually a really easy way that this modal package allows you to grab out a value from the database what we might normally do
08:31
what we might think about doing is over wherever we are triggering this we might say something like user id and we might go ahead and pass in the user id from that user
08:44
and again because we're working within some component now we're going to have to pass that user through to here you kind of get the idea if you've worked with Livewire for any length of time
08:53
you'll know exactly what's going on here but we would pass the user id through into here and then over on the dashboard we would need to pass that Livewire component
09:02
the user directly in here so that should be okay okay great so now we're passing that user id through to here
09:10
what we might think about doing is over in the modal going ahead and accepting in that user id then going ahead and doing something like
09:18
well on mount let's look that user up all of that kind of stuff now we don't need to do that what we can actually do is type in a model
09:26
so I'm going to say public user user or you can give this property any name you want and then what you can do from the component that you trigger this
09:38
you can just say user user id what the component is then going to do behind the scenes the modal is going to go ahead and actually look that user up in the database
09:48
via the id that you provide so whatever you've typed in this in here this could be an article it could be a post
09:54
it could be a comment whatever it will go ahead and look this up for you okay so let's just make sure that's imported
10:00
and let's go over to the sum modal here and let's say hey user name and we should get exactly the same thing so basically now we are conveniently
10:10
passing an entire model or accepting in an id and then looking up an entire model directly within this component
10:18
so that is really really useful and the majority of the time probably 90-95% of the time you're only going to be passing in ids
10:26
for things that you then need to look up in the database so this is pretty much all you need to know okay so let's go ahead and look at closing modals super important
10:34
you've seen already that we can click outside of a modal so if i click it click here and click outside of this modal that does close it
10:42
but we can manually close it as well so how do we do this let's say close modal and of course we're just going to be using text here
10:49
but you could style this as an icon an image whatever you wanted to do we're going to say wire click we can use wire click
10:56
because we are always going to be inside of a modal a Livewire component when we're in a modal and we're just going to say dispatch and you guessed it
11:05
close modal there we go so let's try this out let's go ahead and open that modal
11:10
we get a little bit of refreshing here that's fine let's click close modal and there we go
11:14
the modal gets closed now you can also programmatically close the modal directly from the Livewire component itself so let's say you had some sort of action
11:26
like save user so let's say action and close modal you might have a reference to some action in here this might just be like saving the user out
11:38
or doing something but then obviously once you've done something you're going to want to close the modal off so over in our modal now
11:46
we have this action so let's create out this some action we can do something in here but then because we're pretty much extending this modal component
11:56
this contains methods like close modal so there's a bunch of stuff that you can do in here of course you can read the documentation or just look through the base component here
12:05
but we can just say this and close modal and that will shut the modal off once we have triggered that action directly from if we just open it back up again
12:14
our some modal just here so let's try this out let's hit launch modal let's pretend we are performing some sort of action
12:21
and then programmatically closing that modal directly from the method inside our live wire component great lastly let's just look at
12:30
if you're not using Tailwind how to customize the styles of this so we're going to go ahead and open up our terminal here and we're going to go ahead and paste in this
12:39
vendor publish command which just publishes the tag for wire elements modal views and that's going to go ahead and if we just wait for that to finish
12:47
publish these inside of resources and views so let's go ahead and take a look on what this is published and how we might customize it so we have our vendor folder here
12:58
wire elements modal if we open up the modal here you can see that this contains a bunch of alpine stuff but here are all the classes
13:08
so you can go ahead and just change these around you can change the transition classes to suit whatever framework you are using in terms of css
13:17
or if you're not using one so there are a bunch more things that you can do with this package all of it is listed in the github repository in terms of the documentation
13:26
so go ahead and check this out whatever you need to do but this is by far the fastest and easiest way to get modals set up in livewire

Episode summary

In this episode, we jump right into the simplest and quickest way to add modals to your Livewire applications by using the wire-elements/modal package. I'll walk you through the whole process from scratch—no prior setup needed beyond having Livewire and Tailwind CSS.

First up, we go over installation and setup, including where to place the modal directive in your layout. Then, we create a basic Livewire modal component, but there's a tiny twist: these modals should extend a base class provided by the package (not just be a normal Livewire component).

We then see how to launch modals both from inside other Livewire components (with wire:click and event dispatching) and even from outside the world of Livewire, whether with Alpine.js or straight JavaScript. Super handy if you've got a dashboard or just a plain Blade file!

The next part focuses on passing data to your modals. Need to send a primitive value like a name? No problem. More interestingly, we look at passing Eloquent models (like User). This package makes it easy to just pass an ID and have your modal resolve it to a model automatically—big timesaver.

After that, closing a modal gets covered—both by clicking outside the modal and with your own close button, or even programmatically from inside your component's methods (like after a save action).

Finally, if Tailwind isn’t your thing or you want to tweak the design, we quickly see how to publish and customize the modal’s view files as much as you want.

By the end, you’ll see just how quick and flexible modals can be in Livewire using this package, and you’ll be ready to start using (and customizing) them in your own projects!

Episode discussion

No comments, yet. Be the first!