Flash message problem on redirected page

Hello folks,

I'm using vue 3 with options API & inertia & laravel 10. You can see how I flash the messages from session below:

// App\Http\Middleware\HandleInertiaRequests

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

my AuthenticatedLayout.vue file:

export default {
    /* some hidden unnecessary props */
    watch: {
        '$page.props.flash': {
            handler (flash) {
                if (flash.success) {
                    this.toast.success(flash.success);
                }
                if (flash.error) {
                    this.toast.error(flash.error);
                }
                if (flash.warning) {
                    this.toast.warning(flash.warning);
                }
            },
            deep: true
        },
        '$page.props.errors': {
            handler (errors) {
                if (errors) {
                    for (let key in errors) {
                        this.toast.error(errors[key]);
                    }
                }
            },
            deep: true
        },
    },
}

The problem is that when I redirect the user back with session, flash messages are shown. but if I redirect the user to a route, flash messages does not work.

I hope the problem is clear. Thanks

LaryAI

2 years ago

Best Answer

Level 58

It sounds like you're experiencing an issue where flash messages are not persisting across redirects when you're using Inertia.js with Laravel. This is a common issue that can occur if the session flash data is not being properly set or if the Inertia response is not correctly passing the flash data to the Vue component.

Here's a solution that should help ensure that your flash messages are available after a redirect:

First, make sure you're correctly flashing messages to the session in your Laravel controllers. For example:

public function store(Request $request)
{
    // ... perform action ...

    // Flash a success message to the session
    $request->session()->flash('success', 'Your action was successful!');

    // Redirect with Inertia
    return redirect()->route('your.route.name');
}

Next, in your HandleInertiaRequests middleware, you're already correctly sharing the flash data with Inertia. However, make sure that the session flash data is not being cleared before Inertia has a chance to read it. This can sometimes happen if you're using any kind of session middleware that clears flash data prematurely.

Finally, in your Vue component, you're watching for changes to the flash messages. This should work as long as the flash data is being passed correctly. However, you might want to ensure that the watcher is being triggered after a redirect. You can add a immediate: true property to the watcher to make sure it runs immediately after the component is created:

export default {
    /* some hidden unnecessary props */
    watch: {
        '$page.props.flash': {
            handler(flash) {
                if (flash.success) {
                    this.toast.success(flash.success);
                }
                if (flash.error) {
                    this.toast.error(flash.error);
                }
                if (flash.warning) {
                    this.toast.warning(flash.warning);
                }
            },
            deep: true,
            immediate: true // Add this line
        },
        '$page.props.errors': {
            handler(errors) {
                if (errors) {
                    for (let key in errors) {
                        this.toast.error(errors[key]);
                    }
                }
            },
            deep: true,
            immediate: true // Add this line
        },
    },
}

By adding immediate: true, you're telling Vue to execute the watcher immediately with the current value upon the watcher's creation, which is useful when you want to perform the check as soon as the component loads, including after a redirect.

If you've followed these steps and are still experiencing issues, you may want to check the network requests in your browser's developer tools to ensure that the flash data is being included in the Inertia response after a redirect. If it's not, there may be an issue with how the session flash data is being set or persisted in Laravel.