laravel 9 flash message timeout and hide message example

In this section we will create a hide and timeout flash message in laravel 9 with alpinejs and tailwind css. We will also see laravel flash message with cross icon after click message will hide, session flash message will disappear after few second example with laravel & alpine js and Tailwind CSS.


Tool Use

Laravel 9

AlpineJS

Tailwind CSS


Laravel with Alpine Js Flash Message Timeout

First you need to create store, update or delete route & controller and add flash message.

CategoryController.php

public function destroy(Category $category)
{
    $category->delete();

    return redirect()->route('categories.index')->with('status', 'Category Delete Successfully');
}


Use AlpineJs to set timeout function and style for Tailwind CSS. for this example we will settimeout 3 second flash message will show only 3 second then disappear.

index.blade.php

<div x-data="{ showMessage: true }" x-show="showMessage" x-init="setTimeout(() => showMessage = false, 3000)">
    @if (session()->has('status'))
    <div class="p-3 text-green-700 bg-green-300 rounded">
        {{ session()->get('status') }}
    </div>
    @endif
</div>


After delete category show flash message for 3 second and disappear.

laravel 9 flash message timeout example

laravel 9 flash message timeout example

laravel 9 flash message disappear

laravel 9 flash message disappear


Laravel with Alpine Js Flash Message Hide

You can create click method in alpine js to hide flash message. You can check also tailwind toast and message.

Tailwind CSS Toast And Notification Example


index.blade.php

<div x-data="{ showMessage: true }" x-show="showMessage" class="flex justify-center">
    @if (session()->has('status'))
    <div class="flex items-center justify-between max-w-xl p-4 bg-white border rounded-md shadow-sm">
        <div class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-green-500" 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>
            <p class="ml-3 text-sm font-bold text-green-600">{{ session()->get('status') }}</p>
        </div>
        <span @click="showMessage = false" class="inline-flex items-center cursor-pointer">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-600" fill="none" viewBox="0 0 24 24"
                stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </span>
    </div>
    @endif
</div>
laravel 9 hide flash message after click

laravel 9 hide flash message after click


Read Also

Laravel 9 Add Simple Sidebar with Tailwind CSS Example

How to Use Carousel Slider in Laravel 9 Example

Laravel 9 Posts with Tags Many to Many Relationships Example

Laravel 9 Insert Category in Posts CRUD Example

How to Use Ckeditor 5 in Laravel 9 Vite with Tailwind CSS

Laravel 9 Simple Image Upload in Ckeditor 5 Example

Install & Setup Markdown Editor in Laravel 9

Nuxt 3 Data Fetching Using Laravel 9 Api Example

Laravel 9 Image Upload with Preview using Tailwind CSS & Alpine JS

Laravel 9 with Tailwind CSS Form Validation Example

Laravel 9 Backend Api Connect with Vue 3 Using Axios Example

Laravel 9 Rest Api with Vue 3 Composition Api CRUD Example

Laravel 9 Authentication with Next js Example

Laravel 9 Sanctum Authentication with Nuxt JS Example

Laravel 9 Simple Search with Pagination Example

Laravel 9 Install Setup TALL(Tailwind, Alpinejs, Livewire) Admin Panel

How to Fix and Clean Code Style in laravel 9

Laravel 9 Image File Upload Example

3 Way to Create Slug in Laravel 9 without Package

How to Add Dark Mode in Laravel 9 with Tailwind CSS