jeroenvanrensen's avatar

Livewire and Alpine.js - Show a flash and hide it after three seconds

I created a flash message that shows three seconds, like this:

@if(session()->has('success')
    <div x-data="{ show: true }" x-init="setTimeout(() => { show = false })" x-show="show">
        {{ session()->get('success') }}
    </div>
@endif

I use it in Livewire like this:

session()->flash('success', 'Success message');

But the second time it does not show, I guess because the show property is already set to false.

So, is there a better approach to this problem?

0 likes
2 replies
wbarnard81's avatar

I know I am late to the party, but you didn't specify a time for the setTimeout function?

1 like

Please or to participate in this conversation.