How to use SweetAlert2 in Laravel 8
Tags: laravel, javascript, beginners, programming
Published: 2021-07-30 07:38:11

In this blog we will see how to use SweetAlret2 in Laravel 8. 
In our application when users add/store or want to delete data then we send an acknowledge back to user that its response has taken with the help of laravel's flash message. Instead of using simple flash message we are going to use a beautiful, responsive and customizable pop-up message.

The package we are going to use is sweet-alert which is customized by realrashid.

This package is phenomenal. I use this package almost in all projects. It will give you different types of alert like (alert, success, info, warning, error, question, image, html, toast), and it is very easy and simple to use.

#### Steps to follow
* Installation 
* Package registration in service provider in config file and add Alert Facade to app aliases
* Include in our layout
* Usage

##### Step 1 
Run this command - ```composer require realrashid/sweet-alert to install package via composer```

##### Step 2
After installing package register it into service provider in your config/app.php file 
```
RealRashid\SweetAlert\SweetAlertServiceProvider::class,

'providers' => [
    /*
    * Package Service Providers...
    */
    RealRashid\SweetAlert\SweetAlertServiceProvider::class,
], also add Alert facade to aliases array in app configuration file
```
##### Step 3
Include `sweetalert::alert` in your layout which you are going to use in your application
```
@include('sweetalert::alert')
```
and run the command - `php artisan sweetalert:publish` to publish the package (this will also load and include sweetalert2 javascript library into your project)


##### Step 4
```
Now you can use it in your controller by adding 
use RealRashid\SweetAlert\Facades\Alert Facade 
or
use Alert
```

Example for Alert, Success, Info ...
* `Alert::success('Success', 'Your post is saved');`
* `Alert::image('Image Title!','Image Description','Image URL','Image Width','Image Height');`

* `Alert::html('Html Title', 'Html Code', 'Type');`
* `Alert::error('Error Title', 'Error Message');`
* `Alert::warning('Error Title', 'Error Message');`
* `Alert::info('Error Title', 'Error Message');`
* `Alert::question('Question Title', 'Question Message');`

or you can use it with `alert helper function`

* `alert('Success', 'Post added successfully')`
* `alert()->success('title', 'msg');`
* `alert()->html('<i>HTML</i> <u>example</u>'," You can use <b>bold text</b>, <a href='//github.com'>links</a> and other HTML tags ",'success');`

or you can use it as `toast`
(Note: when using toast it is necessary to add redirect() in your code)

ex - toast('Your Post as been submitted!','success');
Note: we can change the toast position in config/sweetalert.php
```
'toast_position' => env('SWEET_ALERT_TOAST_POSITION', 'center'),
```
or we can use position() helper method.
Position provided ('top', 'top-start', 'top-end', 'center', 'center-start', 'center-end', 'bottom', 'bottom-start', or 'bottom-end').

As discussed above we can now use sweetalert2 in our application for better understanding I will show you some real example.

To use it throughout our project we will create a global middleware and put it into constructor in Controller.php which extends BaseController

```
public function __construct()
    {
        $this->middleware(function($request, $next) {
            if (session('success')) {
                Alert::success(session('success'));
            } 
            if (session('error')) {
                Alert::error(session('error'));
            }
            return $next($request);
        });
    }
```
Now use it your controller like below, I will use PostController for your understanding

```
$post = Post::create($request->all());
        PostCreated::dispatch($post);
        return redirect()->back()->with('success', 'Post created successfully');
```
![snehalkadwe sweetalert ex, laravel, laravel8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ygy8c17k6jwya3tc6q25.png)

Happy Reading :)