Jun 15, 2024 | Laravel 11 Laravel
Hello Dev,
In this tutorial, we'll delve into the process of installing SweetAlert2 in Laravel. We'll cover detailed steps on integrating SweetAlert2 into your Laravel 10 application. We'll explore how to install SweetAlert2 via npm in Laravel using Vite. Follow along as we walk through each method step by step.
I'll provide you with three approaches to install SweetAlert2 in your Laravel application. Let's examine each example one by one.
Laravel Add Sweetalert2 using CDNusing a CDN for SweetAlert2 is a convenient way to integrate it into your Laravel application without downloading anything. Here's a simple example of a Blade file demonstrating how to include SweetAlert2 using a script tag in the head section:
resources/views/welcome.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href='https://cdn.jsdelivr.net/npm/sweetalert2@10.10.1/dist/sweetalert2.min.css'>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.6/dist/sweetalert2.all.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<main class="container">
<h1>How to Add Sweetalert2 in Laravel Vite? -- ItErrorSolution.com</h1>
<button class="btn btn-success">Click Me!</button>
</main>
</div>
</body>
<script>
$('button').click(function(){
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.isConfirmed) {
Swal.fire(
'Deleted!',
'Your file has been deleted.',
'success'
)
}
});
});
</script>
</html>
Read Also: How To Store Backup on Dropbox using Spatie Laravel 11?
Laravel Vite Add Sweetalert2 using NPM
if you prefer to add SweetAlert2 using npm in your Laravel application, you can follow these steps:
npm install jquery npm install sweetalert2
If you're using jQuery in your Laravel application and you want to import it into your app.js file, you can follow these steps:
resources/js/app.jsimport jQuery from 'jquery'; window.$ = jQuery; import swal from 'sweetalert2'; window.Swal = swal;
Next, we need to add $ in your vite config file. so, let's add it.
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/sass/app.scss',
'resources/js/app.js',
],
refresh: true,
}),
],
resolve: {
alias: {
'$': 'jQuery'
},
},
});
Next, build npm js and css files using following command:
npm run dev
now, we are ready to use jquery using vite. you can see the simple blade file code.
resources/views/welcome.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
<!-- Scripts -->
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
<script type="module">
$('button').click(function(){
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.isConfirmed) {
Swal.fire(
'Deleted!',
'Your file has been deleted.',
'success'
)
}
});
});
</script>
</head>
<body>
<div id="app">
<main class="container">
<h1>How to Add Sweetalert2 in Laravel Vite? -- ItErrorSolution.com</h1>
<button class="btn btn-success">Click Me</button>
</main>
</div>
</body>
</html>
Step: Run the Application
Now, to run the Laravel application, please type the following command and press enter:
php artisan serve
Now, open your web browser and enter the provided URL to view the output of the application.
View Your Applicationhttp://localhost:8000/Output:
If you have any questions or need further assistance, feel free to ask!
"Hey there! I'm a full-stack developer and proud owner of ItErrorSolution.com, based right here in India. I love nothing more than sharing handy tips and tricks with my fellow developers through easy-to-follow tutorials. When it comes to coding, I'm all about PHP, Laravel, Angular, Vue, Node, JavaScript, jQuery, CodeIgniter, and Bootstrap – been hooked on them forever! I'm all about putting in the work and staying committed. Ready to join me on this journey to coding?"