Tailwind flash alert messages and validations for your Laravel apps

This composer package offers an easy way to manage and show laravel flash message alert notifications. Works with Tailwindcss (default) and Bootstrap.

It includes default messages for most commonly used actions such as "success", "error" messages, or CRUD operations (stored, updated, deleted).

Installation

Install the package:

composer require josegus/laravel-flash

Theming

The package does not include any css file. Don't forget to include the framework of your choice.

Alert notifications use tailwind by default, but you can use bootstrap if you want. To see how it works, include the FLASH_FRAMEWORK=bootstrap value in your .env file.

If you are using tailwind with purgeCss, you may need to publish the views included in the package, so when Laravel compile the views, purgeCss will remove any unused css class.

You can publish and modify the config and view files (seed docs below).

Usage

Inside any place of your app (typically a controller or middleware) call the "flash" helper included with the package:

public function store()
{
    // Perform store action...

    flash()->success('Your item has been saved successfully!');

    return back();
}

The package includes most of the common messages for different actions inside most laravel applications:

- flash('Nice job')                      : Flash an alert of type "success" with a custom message
- flash()->success('Good job!')          : Flash an alert of type "success" with the given message
- flash()->error('Something went wrong') : Flash an alert of type "danger" with the given message
- flash()->warning('Be careful!')        : Flash an alert of type "warning" with the given message
- flash()->stored()                      : Flash an alert of type "success" with a default message (founded in flash.messages.stored)
- flash()->stored('Custom message')      : Flash an alert of type "success" with a custom message
- flash()->updated()                     : Flash an alert of type "success" with a default message (founded in flash.messages.updated)
- flash()->deleted()                     : Flash an alert of type "success" with a default message (founded in flash.messages.deleted)
- flash()->stored()->dismissible()       : Flash an alert of type "success" with a default message (founded in flash.messages.stored) that can be dismissible
- flash()->stored()->dismissible(false)  : Flash an alert of type "success" with a default message (founded in flash.messages.stored) that should not be dismissible
- flash()->queued()  : Flash an alert of type "queued" with a default message that should not be dismissible (see flash.messages.queued inside config/flash.php)

Once you have flashed a message in session, you will need to display it in your view. Use the component included in the package:

<x-flash::message />

Don't like the new component syntax? It's ok, use the @include directive included with the package:

@include('flash::message')

Configuration

You can export the config file to change default messages, views and enable some extra features. You can dot it executing:

php artisan vendor:publish --tag=laravel-flash:config

Now you should have a flash.php file inside the config folder.

After upgrading laravel-flash to a major version, don't forget to include --force at the end of the above command, to force to re-publish the config file.

Customizing views

Views are really easy to use and modify. You can export the included views to adapt to your needs. You may do su executing:

php artisan vendor:publish --tag=laravel-flash:views

Now you should have views inside resources/views/vendor/flash folder. If you are upgrading the package, don't forget to include --force at the end of the above command, to force to re-publish the vies.

Using default validations view

By default, the package display the validation errors inside the flash::message view. Validation errors are displayed inside a "alert-danger" as an unordered list by default.

You can disable this behaviour by changing flash.validations.enabled to false in config/flash.php file.

If you wish, you can modify this view to adapt to your needs, executing:

php artisan vendor:publish --tag=laravel-flash:views

Example

The package doesn't includes Bootstrap or any other styling or frontend assets frameworks, so you need to import the necessary stylesheets.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>

<div class="container">
    <!-- Use as blade component -->
    <x-flash::message />

    <!-- Use as blade directive -->
    @include('flash::message')

    <p>Welcome to my website...</p>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

</body>
</html>

Tailwind style

Bootstrap styles

Success

Error

Dismissible

Static

Validations

Tips

All alerts dismissible by default

By default, all alerts are dismissible. You can disable this by changing flash.dismissible to false. If you set flash.dismissible false, you still can make dismissible a certain alert by chaining:

   flash()->dismissible();

Or make a certain alert static by calling:

   flash()->dismissible(false);

Why another flash package?

There are great packages to create flash messages:

• flash by Jeffrey Way
• laravel-flash by Spatie
• laravel-flash by Coderello

The main difference with each one is the ability to set a default message for most common actions (a success action, a model stored, a model updated, a model deleted..).

I decided to create this package to suit my own needs, as most of the time I end up working with many controllers with the basic CRUD operations (Cread, Read, Update, Delete) and writing a message for each operation does not seem to me to be the best way to handle the same message for each operation.

Testing

composer test