Tail Alert - Livewire Toast Notifications 🚀

Tail Alert is a lightweight Livewire alert package for Laravel, providing stylish toast notifications built with Tailwind CSS. It helps you display modern notifications easily in any Livewire component.

📦 Installation & Links

• GitHub Repo: Tail Alert on GitHub
• Packagist: Tail Alert on Packagist

🚀 Why Use Tail Alert?

• No need for extra JavaScript libraries
• Works seamlessly with Livewire
• Uses Tailwind CSS for modern designs
• Lightweight and fast 🚀

Features

✔ Modern and minimal design with Tailwind
✔ Fully compatible with Livewire
✔ Supports different alert types (success, warning, error, info)

Preview

🛠️ Installation

You can install the package via composer:

composer require ab01faz101/tail-alert

 php artisan vendor:publish --provider="Ab01faz101\TailAlert\TailAlertServiceProvider" --force

Next, add the scripts component to your template after the @livewireStyles.

<link rel="stylesheet" href="{{asset('vendor/tail_alert/style.css')}}">

or Add the following codes to your custom style or app.css.

.tail_alert_item.active{
    animation: tail_alert_item_move .4s;
}

.tail_alert_item.active .tail_alert_time_animation{
    margin: 0!important;
    animation: fullWidthAnimate 5s ease;
}



@keyframes fullWidthAnimate {
    0%{
        width: 0;
    }
    100%{
        width: 100%;
    }
}

@keyframes tail_alert_item_move {
    0%{
        transform: translateX(100%);
    }
    100%{
        transform: translateX(0);
    }
}

Next, add the scripts component to your template after the @livewireScripts.

<script src="{{ asset('vendor/tail_alert/alert.js') }}"></script>

Tailwind Configuration

Before using this package, make sure to add the following path to your tailwind.config.js file:

module.exports = {
  content: [
    // ...
    "./public/vendor/tail_alert/alert.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Add this line of code to your Livewire component.

@include('components.alerts')

Note: This package requires Tailwind CSS to be installed in your project.

🔔 Usage

You can use Tail Alert by using the AlertTrait trait.

use Ab01faz101\TailAlert\Traits\TailAlertTrait;
 
class Index extends Component
{
    use TailAlertTrait;
    
    public function submit()
    {
        $this->alert('success', 'Basic Alert');
    }
}

In your Livewire component, you can trigger an alert like this:

$this->alert('success', 'alert message'  , "description");
$this->alert('info', 'alert message'  , "description");
$this->alert('warning', 'alert message' , "description");
$this->alert('error', 'alert message'  , "description");

public function flashSuccess() {
    session()->flash('alert', [
        'type' => 'success',
        'message' => 'Successful Operation!'
    ]);
}

public function flashError() {
    session()->flash('alert', [
        'type' => 'error',
        'message' => 'An Error Occurred.'
    ]);
}

public function flashWarning() {
    session()->flash('alert', [
        'type' => 'warning',
        'message' => 'Warning.'
    ]);
}

public function flashInfo() {
    session()->flash('alert', [
        'type' => 'info',
        'message' => 'Information.'
    ]);
}

public function redirectAlert() {
    return redirect()->route('test')->with('alert' , [
        'type' => 'success',
        'message' => 'mission successfully!'
    ]);
}

💡 The type can be success, error, warning, or info.

🔍 Keywords

Livewire Toast Notifications, Laravel Alerts, Tailwind CSS Alerts, Livewire Notifications, Laravel Toast

License

This package is released under the MIT License.