Hello, developers! In this article, we'll see how to install sweetalert2 in laravel 10 vite. Here, we'll install sweetalert2 in laravel 10. We'll go through the steps to add SweetAlert2 to your Laravel 10 project. This guide provides a simple example of installing SweetAlert2 using npm.
If you want to install SweetAlert2 with Vite and npm in Laravel, I'll explain the process step by step. Just follow the steps below to use SweetAlert2 in your Laravel 10 application.
I'll cover two different ways to install SweetAlert2 in your Laravel project. Let's go through each example one by one.
Laravel 10 Vite Install Sweetalert2
We can directly use the SweetAlert2 CDN and add a script tag in the head section of our Blade file, as shown below. This way, you don't need to download anything.
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/[email protected]/dist/sweetalert2.min.css'>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<main class="container">
<h1> how to install sweetalert2 in laravel - Vidvatek</h1>
<button class="btn btn-success">Click Me!</button>
</main>
</div>
</body>
<script>
$('button').click(function(){
Swal.fire({
title: 'Are you sure?',
text: "Are you sure, want to delete this record?",
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>
Here, we'll add SweetAlert2 using an npm command. So, let's run the following command.
npm install jquery
npm install sweetalert2
Next, we'll import jquery in app.js. So, add following code in app.js file.
resources/js/app.js
import jQuery from 'jquery';
window.$ = jQuery;
import swal from 'sweetalert2';
window.Swal = swal;
Next, we'll 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 the following command.
npm run dev
Now, we are ready to use jQuery with Vite. You can see the simple Blade file code below.
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 Install Sweetalert2 in Laravel 10 Vite - Vidvatek</h1>
<button class="btn btn-success">Click Me</button>
</main>
</div>
</body>
</html>
Run the laravel 10 application using the following command.
php artisan serve
You might also like:
- Read Also: Laravel 10 Custom Forgot Password
- Read Also: Laravel 10 User Roles and Permissions Tutorial
- Read Also: Laravel 10 Setup Cron Job Task Scheduler
- Read Also: How to Create CRUD with Image Upload in Laravel 10