How to Install Sweetalert2 in Laravel 10 Vite?

Hello dev, Today we are going to learn How to Install Sweetalert2 in Laravel 10 Vite? As Laravel continues to evolve and gain popularity in the web development community, its newest version, Laravel 10, has introduced several exciting features, including Vite as the default frontend build tool.

Vite is a lightning-fast, modern, and easy-to-use build tool that enhances the development experience.

In this tutorial, we will explore how to integrate Sweetalert2, a popular library for beautiful and responsive alert dialogs, into Laravel 10 with Vite. Let’s get started!

Also Read: Installing Socialite Package in Laravel 10

Prerequisites

Before we dive into the installation process, make sure you have the following prerequisites set up:

1. A basic understanding of Laravel and Vite.
2. Node.js and NPM installed on your system.
3. Laravel 10 project with Vite set as the default frontend build tool.

If you don’t have Vite set up in your Laravel project, you can install it using the following command:

composer require laravel/vite

Step 1: Install Sweetalert2

To get started, we need to install the Sweetalert2 library. Open your terminal and navigate to your Laravel project’s root directory. Run the following command to install Sweetalert2 via NPM:

npm install sweetalert2

This command will download and add Sweetalert2 to your project’s node_modules folder.

Also Read: Building a Laravel 10 CRUD Application: A Comprehensive Tutorial

Step 2: Configuration

Now that Sweetalert2 is installed, we need to configure Vite to bundle and make it accessible in our Laravel application.

Open the resources/js/app.js file, and import Sweetalert2 at the top:

import Swal from 'sweetalert2';

Step 3: Create Sweetalert2 Alert

We can now create a simple Sweetalert2 alert to test whether it’s working correctly. For demonstration purposes, let’s create an alert when a button is clicked. Open the resources/js/app.js file and add the following code:

document.getElementById('show-alert').addEventListener('click', () => {
    Swal.fire({
        title: 'Hello, Laravel 10!',
        text: 'Sweetalert2 is now integrated into your Laravel 10 Vite project!',
        icon: 'success',
    });
});

Make sure you have an HTML button with the ID show-alert on your view (e.g., resources/views/welcome.blade.php):

<button id="show-alert">Show Sweetalert2 Alert</button>

Also Read: How to Get Client IP Address in Laravel 10

Step 4: Build and Test

Before testing the Sweetalert2 integration, make sure you have Vite running in your Laravel application. If not, start the Vite development server by running:

npm run dev

Now, open your Laravel application in the browser and navigate to the page containing the button with the ID show-alert. Click the button, and you should see a beautiful Sweetalert2 success dialog box with the message we defined earlier.

Also Read: Bulk Insertion in Laravel 10 using eloquent ORM

Conclusion

In this tutorial, we have successfully integrated Sweetalert2 into a Laravel 10 project using Vite as the frontend build tool. Sweetalert2 enhances the user experience by providing attractive and responsive alert dialogs, adding a touch of elegance to your web application.

Remember, Sweetalert2 offers various customization options, so feel free to explore the official documentation to customize the alerts to suit your project’s needs. Happy coding!