In this episode, we take a close look at how cumbersome our current code is for triggering modals and set out to clean things up by creating a handy helper function. We'll build a custom magic function in Alpine.js that lets us open modals with a super simple API—way less code, and way less to remember each time we need to use it.
You'll see how we pick a name for our function (we go with modal
) and set it up so you can just pass the modal's name as an argument to open it instantly. No more dispatches or awkward global calls—just a clean and intuitive way to work with modals.
We also cover a bit of setup: disabling the default Livewire/Alpine injection, importing everything manually, and making room for our custom magic methods. Once everything is wired up, we test it out in the console and confirm it works exactly as intended. By the end, we've got a much more streamlined way to trigger modals, and you’ll know how to extend this approach even further—like creating a hideModal
function if you want. The old example code is left for reference, but you'll love how much cleaner this method is!