How do I get flash messaging working with Laravel Breeze, inertia and vue3?

Question

I've followed several examples on this, including the laracasts video on flash messaging, but for whatever reason, I can never get the data passed to load into the props. Here's what I have:

In HandleInertiaRequests.php:
'flash' => function () use ($request) {
        return [
            'success' => $request->session()->get('success'),
            'error' => $request->session()->get('error'),
        ];


From a controller:
...
$page->save();
return redirect('/admin/pages')->with('success', 'Page created successfully');

And when I save a page, I check the vue dev tools and find this:

I also find it interesting that when the page is given a full page reload on a route that has with(...) data, that data populates a prop with the name passed to with, but even that doesn't allow the middleware to fill the flash props, and it (strangely) creates a new prop at 'page.props.success', with 'page.props.flash.success' still remaining null.

Weirdly, I've got the components working using "page.props.flash...", but my vue devtools are showing those values as null. I'm confused by this. A friend of mine spun it up and his devtools showed the props populated. — KinsDotNet

endritv endritv · Accepted Answer · 2022-07-01T14:22:44

Are you making sure to pass the flash method to the return statement?

In the HandleInertiaRequests.php middleware you should add the flash function to the array_merge function like this:

return array_merge(parent::share($request), [
'flash' => function () use ($request) {
            return [
                'success' => $request->session()->get('success'),
                'error' => $request->session()->get('error'),
            ];
        },
]

or save the flash in a variable like $data and pass it to the array_merge method.

How do I get flash messaging working with Laravel Breeze, inertia and vue3?

1 Answers