Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I have a component
<div x-data="{ show: true}" x-show="show; setTimeout(() => {show = false}, 5000)">
@if (session()->has('success'))
<div class="z-50 fixed mb-24 mr-24 right-0 bottom-0 rounded-lg border border-green-400 bg-green-100 p-4">
<div
x-transition:enter="transform ease-out duration-300 transition"
x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
x-transition:enter-end="translate-y-0 opacity-100 sm:translate-x-0"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
</div>
<div class="ml-3">
<h3 class="text-sm leading-5 font-medium text-green-800">
Success
</h3>
<div class="mt-2 text-sm leading-5 text-green-700">
<p>
{{session()->get('success')}}
</p>
</div>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button type="button" @click=" show = false " class="cursor-pointer inline-flex rounded-md p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:bg-green-100 transition ease-in-out duration-150">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
{{session()->forget('success')}}
@endif
@if (session()->has('message'))
<div class="z-50 fixed mb-32 mr-32 right-0 bottom-0 rounded-lg border border-yellow-400 bg-yellow-100 p-4">
<div
x-transition:enter="transform ease-out duration-300 transition"
x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
x-transition:enter-end="translate-y-0 opacity-100 sm:translate-x-0"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
</div>
<div class="ml-3">
<h3 class="text-sm leading-5 font-medium text-green-800">
Message
</h3>
<div class="mt-2 text-sm leading-5 text-green-700">
<p>
{{session()->get('message')}}
</p>
</div>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button type="button" @click=" show = false " class="cursor-pointer inline-flex rounded-md p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:bg-green-100 transition ease-in-out duration-150">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
{{session()->forget('message')}}
@endif
@if (count($errors) > 0)
<div class="z-50 fixed right-10 bottom-10 rounded-lg border border-red-400 bg-red-50 p-4">
<div
x-transition:enter="transform ease-out duration-300 transition"
x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
x-transition:enter-end="translate-y-0 opacity-100 sm:translate-x-0"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
</svg>
</div>
<div class="ml-3">
<h3 class="text-sm leading-5 font-medium text-red-800">
There {{(count($errors) > 1)?'are':'is'}} {{count($errors)}} {{(count($errors) > 1)?'errors':'error'}} with your submission
</h3>
<div class="mt-2 text-sm leading-5 text-red-700">
<ul class="list-disc pl-5">
@foreach ($errors->all() as $error)
<li class="mb-2">{{ $error }}</li>
@endforeach
</ul>
</div>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button type="button" @click=" show = false " class="cursor-pointer inline-flex rounded-md p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:bg-red-100 transition ease-in-out duration-150">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
@endif
</div>
It is in a livewire component.
When I flash a session message from the Livewire components class/controller
public function withdraw($fee_id, $fee_case_number)
{
if (! Gate::allows('can_apply_fees')) {
session()->flash('message', 'You do not have permission to withdraw a Fee entry!');
}
else
{..........
This works on the first time the gate triggers the session flash. On subsequent triggers of the session flash no message is displayed.
The works fine in a standard blade view where the page is refreshed.
Do I need to do anything in addition to just flashing the session when using the component in Livewire?
Got it sort of working by adding @flash.window="show = true".
<div x-data="{ show: true }" x-show="show; setTimeout(() => {show = false}, 6000)" @flash.window="show = true">
I now flash the session and dispatch a browser event to show the alert.
session()->flash('message', 'You do not have permission to withdraw a Refund entry!');
$this->dispatchBrowserEvent('flash');
Doesn't seem consistent this way. Sometimes the flash only appears for about a second.
Please or to participate in this conversation.