Laravel 12 - Create Modern Alerts with SweetAlert2.
Laravel 12 - Create Modern Alerts with SweetAlert2.
In this tutorial, we will learn how to integrate SweetAlert2 with Laravel 12 to create stylish and interactive alert modals, enhancing user notifications with success, error, info, warning, and custom alerts.
If you're a video person, feel free to skip the post and check out the video instead!
Quick Overview
This guide walks you through integrating SweetAlert2 with Laravel 12 to enhance user notifications. First, you create a fresh Laravel project using either the Laravel installer or Composer, and configure basic options such as the database and testing framework. Next, you navigate to your project directory to prepare for development. Then, a new route, /sweet, is added in routes/web.php to link to a Blade view called sweet.blade.php. In this view, Tailwind CSS is used for styling, while jQuery and SweetAlert2 are included via CDN to handle dynamic alerts. Interactive buttons are provided in the view, each triggering a modern modal using Swal.fire(). Finally, by running the Laravel development server, you can open your browser and access the route to test the alerts, seeing SweetAlert2 in action and replacing standard browser notifications with visually appealing and interactive modals.
Step # 1 : Start a New Laravel 12 Project.
To kick things off, you’ll need a fresh Laravel 12 setup. You can spin up a brand-new project or continue working inside an existing one. If you already have the Laravel Installer globally available on your system, you can generate a new project named sweetAlert2 using the following command.
laravel new sweetAlert2
If the Laravel Installer isn’t installed no worries, you can create the project through Composer instead.
composer create-project laravel/laravel --prefer-dist sweetAlert2
When using Composer, Laravel skips the interactive setup and simply scaffolds a clean application. Any configuration can be adjusted later. However, if you choose the Laravel Installer, you’ll go through a quick setup wizard. Use the following choices when prompted.
- Starter Kit: Choose None to begin with a minimal, framework-only installation.
- Testing Framework: Select Pest to take advantage of a clean and intuitive testing setup.
- Database: Pick MySQL as the primary database engine for your application.
- Run Migration: Enter yes to execute the initial migrations right away.
- Frontend Dependencies: Choose Yes so Laravel can automatically install all necessary frontend packages.
After completing the prompts, Laravel will prepare a new directory named sweetAlert2, install the necessary files and dependencies, and run default migrations to set up your database structure. At this point, your Laravel 12 application is fully initialized and ready for you to build new features or customize it however you like.
Step # 2 : Navigate to Your Project.
Open your preferred terminal application (for example, Git Bash) and move into the root directory of your Laravel project.
cd c:xampp/htdocs/sweetAlert2
This switches your working directory to the Laravel project so you can run commands such as starting the development server, installing dependencies, or updating project files.
Step # 3 : Set Up a Route.
Next, create a simple route inside the routes/web.php file by adding the following snippet.
Route::get('/sweet', function () {
return view('sweet');
});
This route connects the /sweet URL to a Blade view named sweet. When someone accesses this URL in their browser, Laravel will return the sweet.blade.php file located inside resources/views.
Step # 4 : Create the SweetAlert View.
Create a new Blade file named sweet.blade.php inside the resources/views/ folder. This view will contain the structure, styling, and scripts needed to show SweetAlert2 pop-ups.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Shotcut SweetAlert2 Demo</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
success: '#10B981',
error: '#EF4444',
info: '#3B82F6',
warning: '#F59E0B',
question: '#8B5CF6',
custom: '#14B8A6'
},
},
},
};
</script>
</head>
<body class="bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 text-white min-h-screen flex items-center justify-center">
<div class="max-w-4xl w-full p-10 bg-gray-800 rounded-3xl shadow-2xl text-center">
<h1 class="text-5xl font-bold mb-6 text-white">
Code Shotcut : SweetAlert2 Demo
</h1>
<p class="text-lg mb-6 text-gray-300">Interactive and visually stunning alerts in Laravel using SweetAlert2. Try each button below to see different alert types in action.</p>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<button class="flex items-center justify-center gap-2 px-6 py-4 bg-success hover:bg-green-700 font-semibold rounded-xl shadow-lg transform transition hover:scale-105" id="success-alert">
Success Alert
</button>
<button class="flex items-center justify-center gap-2 px-6 py-4 bg-error hover:bg-red-700 font-semibold rounded-xl shadow-lg transform transition hover:scale-105" id="error-alert">
Error Alert
</button>
<button class="flex items-center justify-center gap-2 px-6 py-4 bg-info hover:bg-blue-700 font-semibold rounded-xl shadow-lg transform transition hover:scale-105" id="info-alert">
Info Alert
</button>
<button class="flex items-center justify-center gap-2 px-6 py-4 bg-warning hover:bg-yellow-600 font-semibold rounded-xl shadow-lg transform transition hover:scale-105" id="warning-alert">
Warning Alert
</button>
<button class="flex items-center justify-center gap-2 px-6 py-4 bg-question hover:bg-purple-700 font-semibold rounded-xl shadow-lg transform transition hover:scale-105" id="question-alert">
Question Alert
</button>
<button class="flex items-center justify-center gap-2 px-6 py-4 bg-custom hover:bg-pink-600 font-semibold rounded-xl shadow-lg transform transition hover:scale-105" id="custom-alert">
Custom HTML Alert
</button>
</div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- SweetAlert2 via CDN -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- SweetAlert2 Script -->
<script>
$('#success-alert').on('click', function() {
Swal.fire({
title: 'Success!',
text: 'This task has been completed successfully.',
icon: 'success',
confirmButtonText: 'Great'
});
});
$('#error-alert').on('click', function() {
Swal.fire({
title: 'Error!',
text: 'Something went wrong. Please try again.',
icon: 'error',
confirmButtonText: 'Try Again'
});
});
$('#info-alert').on('click', function() {
Swal.fire({
title: 'Info',
text: 'This is some important information for you.',
icon: 'info',
confirmButtonText: 'Got it'
});
});
$('#warning-alert').on('click', function() {
Swal.fire({
title: 'Warning!',
text: 'Be careful! Something may need your attention.',
icon: 'warning',
confirmButtonText: 'Understood'
});
});
$('#question-alert').on('click', function() {
Swal.fire({
title: 'Question?',
text: 'Do you want to proceed with this action?',
icon: 'question',
showCancelButton: true,
confirmButtonText: 'Yes',
cancelButtonText: 'No'
});
});
$('#custom-alert').on('click', function() {
Swal.fire({
title: '<strong>Custom HTML Alert</strong>',
icon: 'info',
html: 'You can use <b>bold</b>, <i>italic</i>, and <u>underlined</u> text in this alert!',
confirmButtonText: 'Cool'
});
});
</script>
</body>
</html>
This Blade file acts as the front-end for showcasing SweetAlert2 inside your Laravel 12 project. It loads Tailwind CSS from a CDN for styling and includes jQuery along with the SweetAlert2 library to enable alert pop-ups. The page features interactive buttons that trigger various types of alerts. When each button is clicked, a corresponding Swal.fire() call displays a modern, customizable modal instead of a default browser alert, giving users a smoother and more polished interaction experience.
Step # 5 : Test the Setup.
Start your Laravel development server by running the following command.
php artisan serve
After the server is running, open your browser and visit: 127.0.0.1:8000/sweet. This will load the sweet.blade.php view, clicking any of the buttons will display styled alert modals with appropriate icons and messages, showcasing how SweetAlert2 replaces standar browser alerts with visually polished, interactive pop-ups.
Explore each button to experience different alert types and interactions in real time.
Conclusion
By following this guide, you’ve integrated SweetAlert2 into your Laravel 12 project, upgrading your application’s alert system with clean, modern, and interactive modals. With Tailwind CSS handling styling and jQuery triggering the alert actions, the alerts now appear in visually polished pop-ups instead of default browser alerts, creating a more professional and user-friendly experience. SweetAlert2’s wide range of customization options, such as adjustable titles, messages, icons, and animations, allows you to adapt alerts to any situation, whether you're confirming actions, displaying notifications, or handling errors. This setup not only enhances usability but also lays the foundation for future improvements, including themed alerts, input-based modals, and multi-step flows.
For more customization ideas, you can always explore the official SweetAlert2 documentation.
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments