Learn Livewire
This episode is for members only

Sign up to access "Learn Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
25. Listening for Livewire events in Alpine

Episodes

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

Transcript

00:00
A really useful thing that we can do within Alpine is listen for Livewire events. Now you might be thinking, why would I need to do that? Well, in this example, we're going to build out a little confirmation pop-out, dialogue, toast, whatever you want to call it, when we create a book.
00:17
And once we're done with this, you can implement it for absolutely anything. We're going to be building this up ourselves manually, but you could pull in a third-party library and just integrate this directly into it. So basically, when we create a book here, we want to have a little pop-up come up here
00:33
and then disappear after a couple of seconds. So let's look at how we would do this. Now, what we wouldn't do is create out a new Livewire component to handle this. We could do that, and we could listen for an event, like a alert event globally,
00:48
but it's a lot more efficient to do this with JavaScript. We don't really need a Livewire component for this. So let's go and open up our main app layout file, and we're going to put a very small blade component in here.
00:59
Now, I say blade component and not Livewire component, because if we don't need a Livewire component, but we want to extract something out to something that we can reuse on other templates, for example, a blade component is the way to go.
01:13
So let's go ahead and use artisan here to make a component, and we're going to go ahead and call this alert. We're going to use the view flag in here, because we don't want to create a class associated with this.
01:26
Then inside of here, we can just say x alert, and we're done. Now, we're going to have that alert.blade.php file over in resources, views, and components, and this will be our alert that will show that text. So let's give this a refresh, and we see it just down at the bottom of the page here.
01:44
Okay, so let's just style this up really quickly. We'll just keep this super rough so we don't spend too much time styling it. I'm going to set a blue background here with white text. We want this absolutely positioned at the top right,
01:58
and we'll go ahead and set some padding on this, and a margin on this as well to keep it away from the edges, and we'll make this rounded large. So if we head over, it looks like that.
02:08
Not great, but it's a good start. Okay, so what we're going to do is we are going to make this an Alpine component like so, and into here, we're going to store the body of the alert. Now, just before we go any further, let's take a look at how we're going to trigger this
02:25
so then we know how to pick this up directly within this Alpine component. So if we go over to, say, the create book form, just after we've dispatched book created, we could even listen for this event, but we kind of want a global alert event, which just gives us some text that we can use.
02:42
So I'm going to go ahead and dispatch an alert event, and in here, I'm going to put the text that I want to show eventually in that alert just over here. So let's just say book created just for now. Okay, so we can listen to this event directly within JavaScript,
03:02
and we can do that using Alpine. So we're going to say X on, much like we would do inside of our Livewire components with the on attribute. We're going to give the name of the event,
03:15
but then what we're going to do is use window to listen to this globally on the window object so we can pick it up. So what we can do here is write a block of JavaScript that does something with that data.
03:26
How do we get that data? Well, let's console log out on this magic event property, and let's see what we get. So I'm going to go ahead and open up my console here.
03:36
I'm going to go ahead and add a book, hit submit, and there we go. We get a custom event through here, and if we just have a look here,
03:43
we've got this detail which contains the text that we just dispatched from our Livewire component. So now that we know that we have event detail in there, we can use this to put this into this body just here.
03:57
So I'm going to go ahead and assign the body of this Alpine component to event detail. Now, we can do some other things with this a little bit later, and I'll show you how to do that. But for now, inside of our main body here,
04:11
we can use X text to output that body. So this is always shown at the moment, but let's leave it like that for now, and I'm going to go ahead and create a book,
04:20
and there we go. We get book created. So we can improve this by hiding with X show if we don't have a body. So only show if we have a body filled in there.
04:30
And that pretty much gives us, if we just go ahead and type in a book here, a flash kind of alert toast type thing at the top of our page. So very, very easy to do by hooking into live wire specific events.
04:44
And you can do that from anywhere. You could trigger that alert or dispatch that alert event from any of your components, and that would show that text in that alert. So let's just improve this really quickly with a set timeout.
04:57
This is going to be really rough, so I'd recommend using a third party plugin for this. After two seconds, we're going to go ahead and set the body back to null. And if we just check this out, create a book,
05:09
we see that a couple of seconds pass and it disappears. So that works really nicely. So with this event detail, we could have more complex structures in here. So for example, we could actually pass an array down into here if we wanted to.
05:23
So we could pass an array with the body itself and say book was created. And while we're here, what we could also do is give the name of the book, because we know that we're in the context of this book that has just been created. So we could do something like the following book title,
05:42
and we could maybe wrap that in double quotes just to show it. And now we've got an array in here. This detail will be an object with the properties like we would see in the array. So in here, we would say dot body rather than just dot detail.
05:58
So let's check this out. I'm going to go ahead and create another book by Mabel. Okay, that didn't work. So let's just go and console log our event detail out in here.
06:11
Just see what we have. And let's create something else. And yeah, we do get body. Okay, so this is coming through as an array now.
06:20
So let's go over here. And let's go and just access the first item on there before we grab the body. Okay, let's try this one more time. And another book by Alex, submit.
06:34
And there we go. Book, another book was created. And of course, that goes. So again, this is a really simple, rough example.
06:40
But you kind of get the idea. You can pick up these events that you dispatch from Livewire on the client side, whether you're building your own solution like this badly, or going ahead and using a third-party library, which would be a really good idea.

Episode summary

In this episode, we dive into how you can listen for Livewire events directly in Alpine.js. If you've ever wanted a little confirmation popup (like a flash alert or toast) to show whenever something happens—say, after creating a book in your app—this is the video for you.

We walk through setting up a basic Blade component for our alert (no need for a full Livewire component here!), then show how to wire it up using Alpine. You'll see how to dispatch custom events from your Livewire components and pick them up in Alpine, displaying the event text in your little popup.

It doesn't end there: we style the popup quickly, make it disappear after a few seconds, and show you how to pass more detailed data (like the book name) from your Livewire event into Alpine so your alerts can be dynamic. Along the way, you'll see some pitfalls (and how to debug them), plus talk about how easy it would be to swap this out for a more polished third-party toast library.

By the end, you'll know how to bridge Livewire and Alpine for global client-side notifications, and you'll be ready to use this pattern for anything else you might need a quick client-side response for!

Episode discussion

No comments, yet. Be the first!