In this episode, we're taking another look at how to handle flash messages (like success and error notifications) in an Inertia.js and Laravel app, but this time we're making it more maintainable using shared data instead of manually triggering toasts in onSuccess
handlers.
We start by removing the manual toast logic from onSuccess
and set up our app so messages are passed via session data. This way, after a redirect, the message gets picked up on the frontend as part of the Inertia shared props. You’ll see how we grab the session message in the controller, share it via Inertia, and then display it in our Vue component.
Next, we demonstrate how to use Vue's reactivity (watch
) along with the usePage
helper to detect when a message comes through and display it using our toast library, instead of just rendering the message inside the template. This lets us keep our UI responses dynamic and flexible.
We also improve our flash message approach by making the flash data more flexible: instead of just a string, we start passing through objects with both a body
(the message itself) and a type
(success, error, etc.). This way, our notifications can be styled or handled differently depending on their type.
By the end of the episode, you’ll have a much cleaner, reusable way to handle flash messages in your Inertia app – and as a teaser, in the next episode we’ll go even further by building a global plugin so any page can show these messages without repeating the same code everywhere!