Skip to content

All topics  /  Laravel

Laravel 11 Vite Install Sweetalert2 Example

Laravel ·

Teams applying “Laravel 11 Vite Install Sweetalert2 Example” in a production project can use the corresponding workflow to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the official Laravel website and test it against the project’s actual database and runtime.

Hi, Dev

In this tutorial, I'll guide you through the process of installing SweetAlert2 using Vite in a Laravel 11 application.

If you want to add SweetAlert2 to your Laravel project using Vite and npm, I can help you. I'll walk you through each step to install SweetAlert2 in your Laravel 11 application.

Here are three methods to install SweetAlert2 in your Laravel project. Let's examine each one in detail.

Example 1: Laravel Add Sweetalert2 using CDN


We can use CDN to get SweetAlert2. Just add this script tag in the head section of your HTML file. This way, you don't need to download anything. Here is an example of 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">

  
    <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> Laravel 11 Vite Install Sweetalert2 Example - NiceSnippets.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>

Example 2: Laravel Vite Add Sweetalert2 using NPM

Here, we will add Sweetalert2 using an npm command. So, let's run this command:

npm install jquery
npm install sweetalert2

Next, we need to add jQuery to our app.js. So, let's put the following lines in your app.js file.

resources/js/app.js 

import 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, create the npm JS and CSS files with this 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> Laravel 11 Vite Install Sweetalert2 Example - NiceSnippets.com</h1>

              
            <button class="btn btn-success">Click Me</button>
        </main>
    </div>

  
</body>
</html>

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/

Output:

More on this topic