In this episode, we dive into the core of how Inertia's router works and take things up a notch by enhancing our global flash messages. Instead of relying on individual page watchers to show notifications, we build out a global plugin that hooks directly into Inertia's router events.
Here's what happens step-by-step: we create a new notifications.js
plugin and set it up as a global plugin in our Vue app. After making sure it's registered and working, we explore Inertia's router events like start
and finish
, but focus mostly on using finish
since that's super handy for knowing when we've arrived at a new page. By listening to this event, we can reliably trigger any global actions—like showing a notification whenever the page changes.
We use the usePage
composable to grab any messages shared to the frontend, check if there's something to show, and use the Vue Toastification
plugin to actually pop up our notifications. The best part is: once this is set up, it works everywhere in the app—no more repetitive watchers in every page component!
By the end, we've created a flexible way to handle notifications that can be extended for other global tasks too. It's a pretty slick approach that keeps your code clean and DRY.