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.

    LaravelVite

    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.

    Artikel Terkait

    Baca artikel lain yang mungkin menarik untuk Anda. Atau, Anda bisa mencari artikel lainnya di halaman artikel.

    1. Tutorial Laravel Pruning: Menjaga Database Anda Tetap Ringan dan Efisien
    2. Pahami Berbagai Jenis Relasi dalam Laravel
    3. Codeigniter atau Laravel
    4. Laravel Prompt
    5. Laravel Folio
    6. Optimalkan Development Mac OS dengan Laravel Herd
    7. Merubah Collection Menjadi Pagination di Laravel
    8. Cara Mengintegrasikan OpenAI ke dalam Laravel
    9. Jadikan Sesuatu Lebih Sederhana
    10. Laravel Observer
    11. Aplikasi WiFi Monitoring Hotspot
    12. Panduan Lengkap: Bagaimana Cara Impersonate User di Laravel
    13. Laravel Breeze Semakin Diperbarui
    14. PHP dan Laravel Fixer Dengan Duster
    15. Apa Yang Baru Di Laravel 10 Dan Ekosistem nya
    16. Apa Yang Baru Di Laravel 10
    17. Laravel Visitor
    18. Apa Saja Yang Akan Hadir Di Laravel 10
    19. Vite 4 Telah Dirilis: Fitur Baru dan Cara Upgrade
    20. Laravel Task Scheduling: Panduan Lengkap