Level 29
This can be caused if you stay on the same template/render. You can also try to call the flash message via Session Facade.
use Illuminate\Support\Facades\Session;
Session::flash('message', 'User Has Been Updated');
Jan 30, 2024
7
Level 1
Laravel Vue Inertia JS Flash Messages shows only once when in the same page
I want to display flash message everytime when request sent. But it show only once when same flash message and page redirect
Layout:
<div v-if="$page.props.flash.message">
<Notification :message="$page.props.flash.message" />
</div>
Controller:
return back()->with('message', 'User Has Been Updated');
Notification Components:
<script setup>
import { ref, onMounted } from 'vue'
defineProps({
message: String
});
const showNotification = ref(false);
onMounted(() => {
showNotification.value = true;
setTimeout(() => showNotification.value = false, 2000);
});
</script>
<template>
<div v-if="message && showNotification" class="flex items-center relative w-full p-4 mb-4 text-base leading-5 text-white bg-green-500 rounded-lg opacity-100 font-regular" role="alert">
<svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
</svg>
<span class="sr-only">Info</span>
<div>
<span class="font-medium capitalize">{{ message }}</span>
</div>
</div>
</template>
HandleInertiaRequests:
'flash' => [
'message' => fn () => $request->session()->get('message')
],
Level 1
@gych I tried it. But it only show once when on the same page.
Level 29
Can you try it like this?
use Illuminate\Support\Facades\Session;
Session::flash('message', 'User Has Been Updated');
return redirect('/admin/users'); // Add correct route path here for your page
Level 1
@gych I tried nothing changed. Is there other way to clear or unmount the flash message inside the Notification components after setTimeout?
Level 29
@acemgln0191 Update your code in script setup like this, to reset the shared flash message prop. I've tested it and this should work.
<script setup>
/* Add usePage, your import might be different than mine so double check this */
import { usePage } from "@inertiajs/vue3";
import { ref, onMounted } from 'vue'
defineProps({
message: String
});
const showNotification = ref(false);
const hideFlash = () => {
showNotification.value = false;
usePage().props.flash.message = "";
};
onMounted(() => {
showNotification.value = true;
setTimeout(() => hideFlash(), 2000);
});
</script>
1 like
Level 1
@gych It works! Thank you :)
1 like
Level 1
Hi, can you post the complete solution ? I am tryiong to implement flash notifications on laravel 12 + vue3 and inertia and it is not working to me ! thanks in advance
Please or to participate in this conversation.