FQSoft - Install jQuery di Laravel dengan Vite

Sejak laravel versi 8, Vite sudah disematkan pada laravel untuk mengoptimasi dan meminimalisasi assets. Vite befungsi untuk men-compile CSS dan JS misal Tailwind CSS dan jQuery

Pada tutorial ini kita akan mencoba install jQuery menggunakan npm dan mengcompile menggunakan vite ke folder public

Install jQuery

npm install jquery

buka file resoureces/js/app.js dan tambahkan kode dibawah ini :

import './bootstrap';

import jQuery from 'jquery';
window.$ = jQuery;

Kemudian sematkan asset jQuery di template blade

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laracoding.com - Including jQuery with Vite</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <p class="zoomable">
        Click me to zoom
    </p>
    <script type="module">
        $(document).ready(function(){
            $(".zoomable").click(function(){
                $(this).animate({
                    fontSize: "40px"
                }, 1000);
            });
        });
    </script>
</body>
</html>

Penjelasan Kode :

@vite(['resources/css/app.css', 'resources/js/app.js']) untuk mengenerate url assets yang terletak di folder public
<script type="module"> dan pastikan kode jquery masuk dalam tag script dengan type module karena jika tidak maka variabel jquery tidak dikenali

Menjalankan Vite

npm run dev

Karena asset diproses oleh vite maka saat develop laravel, kita harus menjalankan 2 perintah. yang pertama adalah perintah diatas dan yang kedua adalah perintah untuk menjalankan server php

php artisan serve

Compile Asset Vite

Saat hendak upload ke hosting maka asset harus di-compile terlebih dahulu

npm run build

Terima Kasih dan Semoga Bermanfaat......

Sumber : https://laracoding.com/how-to-install-and-use-jquery-with-laravel-vite/

Blog FQSoft

Install jQuery di Laravel dengan Vite

Install jQuery

Menjalankan Vite

Compile Asset Vite

Fahim