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.

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,

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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

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

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

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

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

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.

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

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.

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.

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.

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.

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

from here into sum modal here and then obviously we know this is a live wide component

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

we're actually passing the argument through and I click it you can see sure enough now we see hey Alex

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

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

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

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

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

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?

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

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

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

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

the user directly in here so that should be okay okay great so now we're passing that user id through to here

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

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

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

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

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

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

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

passing an entire model or accepting in an id and then looking up an entire model directly within this component

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

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

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

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

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

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

close modal there we go so let's try this out let's go ahead and open that modal

we get a little bit of refreshing here that's fine let's click close modal and there we go

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

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

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

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

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

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

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

and then programmatically closing that modal directly from the method inside our live wire component great lastly let's just look at

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

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

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

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

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

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

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