Laravel 11 Vite Install Sweetalert2 Example

Websolutionstuff | Jul-15-2024 | Categories : Laravel

Hello, laravel web developers! In this article, we'll see how to install sweetalert2 in laravel 11 vite. Sweetalert2 is a beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes.

In laravel 11, you can install sweetalert2 using a CDN file and NPM package.

Laravel 11 Vite Install Sweetalert2

laravel 11 vite install sweetalert2

Install Sweetalert2 using CDN

In this example, we'll use SweetAlert2 CDN. We need to script tag in the head section in the HTML.

<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">

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 - Websolutionstuff</h1>
  
            <button class="btn btn-success">Click Me!</button>
        </main>
    </div>
  
</body>
  
<script>
  $('button').click(function(){
      Swal.fire({
        title: 'Are you sure?',
        text: "Do you 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!',
            'Record has been deleted.',
            'success'
          )
        }
      });
  });
</script>
  
</html>

Laravel Vite Add Sweetalert2 using NPM

In this example, we'll install Sweetalert2 using an npm command.

npm install jquery
npm install sweetalert2

Then, we'll add jQuery to app.js. So, add the following lines to your 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.

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'
        },
    },
});

Then, run the npm command to create JS and CSS files.

npm run dev

Next, we'll use jQuery with Vite in the blade file.

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: "Do you 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!',
                    'Record has been deleted.',
                    'success'
                  )
                }
              });
        });
  
    </script>
  
</head>
<body>
    <div id="app">
  
        <main class="container">
            <h1> Laravel 11 Vite Install Sweetalert2 Example - Websolutionstuff</h1>
              
            <button class="btn btn-success">Click Me</button>
        </main>
    </div>
  
</body>
</html>

Then, run the laravel application using the following command.