Integrasi Laravel dengan Vite.js: Panduan Lengkap

    Baru-baru ini Laravel baru saja melakukan pembaruan, yang salah satunya tidak memakai Laravel Mix lagi sebagai compiler assets nya. Melainkan menggunakan Vite.js.

    Irsyad A. Panjaitan

    3 min read·02 Jul 2022

    Integrasi Laravel dengan Vite.js: Panduan Lengkap

    Baru-baru ini Laravel baru saja melakukan pembaruan, yang salah satunya tidak memakai Laravel Mix lagi sebagai compiler assets nya. Melainkan menggunakan Vite.js.

    Jadi sekarang, yang biasanya ada file webpack.mix.js di direktori utama, sekarang berubah menjadi vite.config.js yang kurang lebih isinya seperti:

    import { defineConfig } from 'vite';
    import laravel from 'laravel-vite-plugin';
    
    export default defineConfig({
        plugins: [
            laravel([
                'resources/css/app.css',
                'resources/js/app.js',
            ]),
        ],
    });
    

    Install Tailwind CSS

    Dalam artikel ini, kita akan mencoba untuk menggunakan Tailwind CSS sebagai front end kita.

    Yang paling pertama, coba lakukan instalasi laravel dan kemudian instal dependencies yang ada by default dengan melakukan perintah berikut.

    laravel new project
    cd project
    npm install
    

    Jika sudah, sekarang instal tailwind css dengan menjalankan perintah berikut.

    npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init -p
    

    Setelah itu, Anda bisa app.css yang ada dalam direktori resources/css dan masukkan tailwind directive nya seperti berikut:

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    

    Kemudian, Anda bisa buka resources/views/welcome.blade.php dan replace dengan ini.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body>
        <div class="min-h-screen bg-blue-500 font-sans antialiased">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </div>
    </body>
    </html>
    

    Jika sudah, sekarang Anda bisa jalan development server laravel dengan menjalankan perintah berikut.

    php artisan serve
    

    Setelah itu, Anda bisa buka 1 jendela terminal lagi untuk menjalankan compiler nya seperti:

    npm run dev
    ...
    	vite v2.9.13 dev server running at:
    
      > Local: http://localhost:3000/
      > Network: use `--host` to expose
    
      ready in 107ms.
    
    
      Laravel v9.19.0
    
      > APP_URL: http://project.test
    

    Dan sekarang harusnya Anda bisa melihat projectnya dengan mengunjungi http://127.0.0.1:8000/ di browser.


    Laravel Breeze

    Jika Anda sering menggunakan laravel breeze di dalam setiap pembuatan project yang Anda punya, harusnya ini akan sangat mudah sekali.

    laravel new breeze-test
    composer require laravel/breeze
    php artisan breeze:install react
    npm install
    npm run dev
    

    Dan sekarang, Anda bisa langsung jalankan artisan serve dan kemudian kunjungi http://localhost:8000/ di browser.

    Oia, untuk vite.config.js kurang lebih sekarang seperti:

    import { defineConfig } from 'vite';
    import laravel from 'laravel-vite-plugin';
    import react from '@vitejs/plugin-react';
    
    export default defineConfig({
        plugins: [
            laravel({
                input: 'resources/js/app.jsx',
            }),
            react(),
        ],
    });
    

    Breeze SSR

    Jika Anda peduli dengan SEO, Anda bisa menggunakan fitur ssr yang diberikan oleh Inertia.js. Dengan breeze itu sangat mudah, hanya tinggal menambahkan flag --ssr sewaktu instalasi breeze seperti perintah berikut:

    php artisan breeze:install react --ssr
    

    Dan Anda sudah di beri setup by default dari breeze tersebut tanpa harus setup secara manual. Dan harusnya, untuk file vite.config.js akan sudah berubah menjadi seperti

    import { defineConfig } from 'vite';
    import laravel from 'laravel-vite-plugin';
    import react from '@vitejs/plugin-react';
    
    export default defineConfig({
        plugins: [
            laravel({
                input: 'resources/js/app.jsx',
                ssr: 'resources/js/ssr.jsx',
            }),
            react(),
        ],
    });
    

    Oia, Anda mungkin bertanya, "Bagaimana jika saya sudah menggunakan laravel mix di dalam project saya yang sudah-sudah, apakah bisa di perbarui dengan menggunakan Vite?". Sudah pasti bisa, namun jika Anda malas, Anda bisa menggunakan jasa dari Laravel shift ya untuk melakukan hal itu.

    Jika Anda ingin mempelajari bagaimana cara menggunakan Inertia tanpa breeze dari awal, Anda bisa lihat disini.

    Semoga artikel ini bermanfaat ya.

    Karteil
    Destinasi Utama Belajar Online dengan Format Tulisan yang Elegan
    Kunjungi Sekarang

    Irsyad A. Panjaitan

    Let's start living like no one can help us in any event, so that when we are helped in certain times, it becomes a plus in itself.

    Follow me on
    Support me
    SaweriaGithub

    Newsletter

    Bergabunglah dengan 23.000+ lainnya dan jangan pernah ketinggalan screencast, tips, tutorial, dan lainnya.