In this episode, we're diving into building a toast notification plugin for our app. We start by discussing the limitations of simply checking for a toast message in template props, and why it's better to integrate this functionality as a plugin—one that leverages Inertia's lifecycle hooks. This makes our toast system more flexible and easily swappable, even allowing us to change out our implementation for a third-party plugin later on if we want.
We go step-by-step through making a new plugin, registering it, and hooking into Inertia's router events (like when a page finishes loading) to know exactly when to trigger a toast. With our plugin infrastructure in place, we create a new composable (useToast
) that acts as a little state manager for toast messages—handling when the toast is active, what message it should display, and any options we want to pass (like the timeout duration).
You'll see how to trigger toasts anywhere in your app, and how our component can now reactively show or hide itself based on that shared state. We also add a feature to auto-hide toast messages after a set time, pass custom options, and allow users to dismiss the toast manually by clicking on it.
By the end, we have a basic, reusable, and easily extendable toast plugin hooked up and ready for styling. In the next episode, we'll focus on making it look great and adding smooth transitions. So now our toast messages are in a much better place—flexible, programmatic, and ready to be customized!