How to use SweetAlert2 in Laravel 8

#laravel #javascript #beginners #programming

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('HTML example'," You can use bold text, <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');