DEV Community

Cover image for How to use SweetAlert2 in Laravel 8
Snehal Rajeev Moon
Snehal Rajeev Moon

Posted on • Edited on

How to use SweetAlert2 in Laravel 8

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
Enter fullscreen mode Exit fullscreen mode
Step 3

Include sweetalert::alert in your layout which you are going to use in your application

@include('sweetalert::alert')
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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'),
Enter fullscreen mode Exit fullscreen mode

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);
        });
    }
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

snehalkadwe sweetalert ex, laravel, laravel8

Happy Reading :)

Top comments (1)

Collapse
 
goden222 profile image
Goden • Edited

am I t create a new controller for the alert?