Laravel 10|9|8 SweetAlert 2 Example Tutorial

SweetAlert2 is a popular JavaScript library for creating beautiful and customizable alert dialogs. In this tutorial, you will learn how to install and use SweetAlert2 with Laravel 10 to display success, failed, warning, and error messages.

This tutorial will guide you step by step on how to use sweet alert with success message, delete message, and warning massage using ajax in laravel apps.

Sweetalert 2 in Laravel 10|9|8

Steps to integrate and use sweetalert 2 in laravel 10 for display success, error, warning, etc message into apps:

Step 1: Install SweetAlert2
Step 2: Create Methods in Controller
Step 3: Add Routes
Step 4: Create a Blade View & Use Sweetalert2 Messages
Step 5: Run Development Server

Step 1: Install SweetAlert2

Firstly, open your terminal or cmd and execute the following command into it to install sweetalert2 into your laravel project:

npm install sweetalert2

Step 2: Create Controller with Methods

Next, create a controller that will handle your application logic. For this example, let’s create a simple controller called MessageController with methods for displaying success, warning, and error messages:

php artisan make:controller MessageController

Once you have created controller by using above command. Next, In your MessageController.php file, define the success, warning, and error methods:

use Illuminate\Http\Request;
use RealRashid\SweetAlert\Facades\Alert;

class MessageController extends Controller
{
    public function success()
    {
        Alert::success('Success Message', 'You have successfully completed an action.');
        return view('messages');
    }

    public function warning()
    {
        Alert::warning('Warning Message', 'This is a warning message.');
        return view('messages');
    }

    public function error()
    {
        Alert::error('Error Message', 'An error occurred.');
        return view('messages');
    }
}

Recommended:- Laravel Custom 404, 500 Error Page Example

Step 3: Add Routes

In your routes/web.php file, define routes that point to your controller methods:

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\MessageController;

Route::get('/success', [MessageController::class, 'success']);
Route::get('/warning', [MessageController::class, 'warning']);
Route::get('/error', [MessageController::class, 'error']);

Step 4: Create a Blade View & Use Sweetalert2 Messages

In Laravel, it’s a good practice to create a Blade layout for displaying SweetAlert2 messages. You can create a new layout file in the resources/views/layouts directory, e.g., app.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel SweetAlert2 Example</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
    @yield('content')

    <script src="{{ asset('js/app.js') }}"></script>
    @yield('scripts')
</body>
</html>

Create a Blade view file named messages.blade.php in the resources/views directory to display the SweetAlert2 messages:

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">SweetAlert2 Messages</div>

                <div class="card-body">
                    <p>Click on the buttons below to display different types of SweetAlert2 messages:</p>
                    <button onclick="window.location='{{ url('/success') }}'" class="btn btn-success">Success Message</button>
                    <button onclick="window.location='{{ url('/warning') }}'" class="btn btn-warning">Warning Message</button>
                    <button onclick="window.location='{{ url('/error') }}'" class="btn btn-danger">Error Message</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Auto-close the alert messages after 3 seconds (3000 milliseconds)
    setTimeout(function() {
        $('.swal2-popup').fadeOut();
    }, 3000);
</script>
@endsection

Recommended:- How to Check User Online or Not in Laravel

Step 5: Run Development Server

You can now run your Laravel application using Artisan’s built-in development server:

php artisan serve

Visit http://localhost:8000 in your web browser and click the buttons to see the SweetAlert2 messages in action.

 http://localhost:8000/users

Conclusion

Congratulations! You have successfully integrated SweetAlert2 with Laravel 10 to display success, warning, and error messages in your web application. You can further customize the appearance and behavior of SweetAlert2 to match your project’s requirements by referring to the SweetAlert2 documentation.