andriajah Thu Oct 2023 10 months ago

Bagaimana cara Install Sweetalert2 di Laravel 10 Vite?

Dalam tutorial ini, kita akan membahas demonstrasi cara menginstal sweetalert2 di laravel. Artikel ini menjelaskan secara rinci tentang cara menambahkan sweetalert2 di laravel. mari kita bahas tentang cara install sweetalert2 di laravel 10. Artikel ini akan memberikan contoh sederhana laravel install sweetalert2 npm.

Jika Anda ingin menginstal sweetalert2 menggunakan vite npm di laravel. Kemudian saya akan membantu Anda menjelaskan langkah demi langkah menginstal sweetalert2 dengan npm vite. jadi, mari ikuti langkah di bawah ini untuk menggunakan sweetalert2 di aplikasi laravel 10.

 

Laravel Vite Tambahkan Sweetalert2 menggunakan NPM

Di sini, kita akan menambahkan Sweetalert2 menggunakan perintah npm. jadi, mari kita jalankan perintah berikut:

npm instal jquery
npm instal sweetalert2

Selanjutnya, kita perlu mengimpor jquery di app.js. jadi, mari tambahkan baris berikut pada file app.js Anda.

resources/js/app.js

import jQuery from 'jquery';
window.$ = jQuery;
  
import swal from 'sweetalert2';
window.Swal = swal;

Selanjutnya, kita perlu menambahkan $ di file konfigurasi vite Anda. jadi, mari kita tambahkan.

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

Selanjutnya, buat file npm js dan css menggunakan perintah berikut:

npm run dev

sekarang kita siap menggunakan jquery menggunakan vite. Anda dapat melihat kode file blade sederhana.

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? - Medikre.com</h1>
              
            <button class="btn btn-success">Click Me</button>
        </main>
    </div>
  
</body>
</html>

 

Jalankan Aplikasi Laravel:

Semua langkah yang diperlukan telah dilakukan, sekarang Anda harus mengetikkan perintah di bawah ini dan tekan enter untuk menjalankan aplikasi Laravel:

php artisan serve

Sekarang, Buka browser web Anda, ketikkan URL yang diberikan dan lihat keluaran aplikasi:

http://localhost:8000/

Saya harap ini dapat membantu Anda...

 

 

 

 

 

 

 

laravel laravel 10

Top Artikel