Home / Articles / How to implement Custom Alerts on your Laravel Livewire Project

How to implement Custom Alerts on your Laravel Livewire Project

This bit will show how to implement custom alerts on your Laravel livewire project.

By: Super Admin

Created at: 1 year ago

A/B testing Accessibility Angular API development

As you build your web application on Laravel, you will need some way to alert your users of the result of their activities or the system responses. A very effective way to do this is to create an alert system component to be included in your application.

First, on a fresh or installed Laravel Livewire Installation, you'll need to install the Jantinnerezo Livewire-alert component (https://github.com/jantinnerezo/livewire-alert).

Open your terminal in your project folder and write:

$ composer require jantinnerezo/livewire-alert

Then, add the SweetAlert 2 (https://sweetalert2.github.io) and Livewire-alert script under the // @livewirescripts in your layout template.

<body>

                            @livewireScripts

                            <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

                            <x-livewire-alert::scripts />

                            </body>

Now we can start to use the component by using the LivewireAlert trait in your livewire controller.

use Jantinnerezo\LivewireAlert\LivewireAlert;

                            class Index extends Component

                            {

                            use LivewireAlert;

                            public function submit()

                            {

                            $this->alert('success', 'Basic Alert');

                            }

                            }

*The default alert behavior is a toast notification.

These are the Alert Icons:

$this->alert('success', 'Success is approaching!');

                            $this->alert('warning', 'The world has warned you.');

                            $this->alert('info', 'The fact is you know your name :D');

                            $this->alert('question', 'How are you today?');

Positioning Alert

$this->alert('info', 'Centering alert', [

                            'position' => 'center'

                            ]);