Laravel Inertia JS Flash message only displays once

Question

Because InertiaJS does not refresh the same route component, things like flash messages will only be displayed once no matter how many times you pass the message from the backend. I've tried everything but nothing works, all I need is to be able to trigger the same flash message again after failing to do the same thing.

Controller: This should be triggered as part of my validation via some if statements, so basically I'm saying that if the requested quantity exceeds the stock quantity, this flash message will be returned.

                    return back()->with([
                        'error' => 'This item has only ' . $item->qty . ' items in stock'
                    ]);

Flash component:

<script setup>
import { ref, onMounted } from "vue";
defineProps({
    message: Object,
});

const showNotif = ref(false);

let msgs = ref([]);

onMounted(() => {
    showNotif.value = true;
    setTimeout(() => {
        showNotif.value = false;
    }, 6000);
});
</script>

<template>
    <div>
        <Transition
            mode="out-in"
            name="flash"
            tag="div"
            enter-active-class="animate__animated animate__fadeInUp"
            leave-active-class="animate__animated animate__fadeOutDown"
            appear
        >
            <p
                v-if="message.error && showNotif"
                class="cursor-pointer fixed bottom-3 right-3 bg-red-600 px-5 py-1 font-semibold text-white rounded-xl"
            >
                {{ message.error }}
            </p>
        </Transition>
        <Transition
            mode="out-in"
            name="flash"
            tag="div"
            enter-active-class="animate__animated animate__fadeInUp"
            leave-active-class="animate__animated animate__fadeOutDown"
            appear
        >
            <p
                v-if="message.success && showNotif"
                class="cursor-pointer fixed bottom-3 right-3 bg-green-600 px-5 py-1 font-semibold text-white rounded-xl"
            >
                {{ message.success }}
            </p>
        </Transition>
    </div>
</template>

This works fine, the flash appears, takes a few seconds and then disappears. But no matter how many times I click the same button to get this flash message, it never happens and my brain is about to explode!

Answer 1

From the documentation here you have to look for app /Http/Middleware/HandleInertiaRequests.php and make sure you have something like this.

class HandleInertiaRequests extends Middleware
{
    public function share(Request $request)
    {
        return array_merge(parent::share($request), [
            'flash' => [
                'error' => fn () => $request->session()->get('error')
            ],
        ]);
    }
}

Basically, you are creating a shared data property called flash which is an associative array (object) with a message key.

Please note that if you use with(['error => 'message here']) you will only be able to get the data on the frontend. If you want success, you must also add it yourself.

Example of data you will get