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!