Cara Setup Laravel Dengan Vite

Q: "Apakah Laravel 9 ke atas otomatis memakai Vite?"

"Ya. sejak Laravel 9.19 Vite menjadi bundler default dan sejak Laravel 10 ke atas file vite.config.js selalu ada di project baru. Kalau project kalian masih pakai Laravel Mix dari versi lama, perlu migrasi manual atau cukup pakai Vite di project baru."

Q: "Kenapa muncul error Vite manifest not found?"

"Itu pertanda server tidak menemukan file build hasil npm run build di folder public/build. Solusinya jalankan npm install lalu npm run build di server, atau pastikan public/build ikut terupload saat deploy. Tanpa build production, directive @vite tidak punya file untuk dirender."

Q: "Bagaimana cara menambah file CSS atau JS baru ke Vite?"

"Tambahkan path file ke array input di vite.config.js lalu daftarkan lagi di directive @vite di Blade. Contoh: input: [resources/css/app.css, resources/js/app.js, resources/css/admin.css] lalu di Blade @vite([...resources yang sama])."

Q: "Apa bedanya npm run dev dan npm run build?"

"npm run dev menjalankan dev server Vite dengan hot module replacement, perubahan kode langsung tampil tanpa refresh browser. npm run build mengompilasi semua asset jadi file statis ber-hash di folder public/build untuk dipakai di production."

Q: "Bisa pakai React atau Vue di Laravel dengan Vite?"

"Bisa. React butuh plugin @vitejs/plugin-react dan file .jsx, Vue butuh plugin @vitejs/plugin-vue dan file .vue. Keduanya tinggal ditambahkan di vite.config.js dan diinstall lewat npm, tidak perlu konfigurasi lain."

Q: "Apakah bisa tetap pakai Laravel Mix di project lama?"

"Bisa, Laravel Mix tidak dihapus dari project yang sudah menggunakannya, hanya saja tidak lagi dipasang di project baru dan pengembangannya berhenti. Kalau project lama masih stabil, biarkan Mix, tapi project baru sebaiknya langsung Vite."

Sigit Nurhanafi | 11 September 2026 | Laravel

perbedaan kecepatannya langsung terasa begitu saya beralih dari Laravel Mix ke Vite, build yang tadinya puluhan detik jadi hitungan detik, dan HMR (hot module replacement) membuat ngoding frontend jauh lebih nyaman karena perubahan langsung tampil tanpa refresh browser manual. setup awalnya tidak rumit, dan di artikel ini saya pandu langkah demi langkahnya dari nol sampai build production.

kita akan bahas konfigurasi default yang sudah disediakan Laravel, cara memahami vite.config.js, integrasi React dan Vue, sampai masalah yang paling sering bikin artikel ini dicari orang: error Vite manifest not found.

Apa Itu Vite dan Kenapa Laravel Pindah

Vite adalah build tool frontend buatan Evan You, orang yang sama di belakang Vue.js. bedanya dengan webpack atau Laravel Mix, Vite memakai ES module native browser untuk development, jadi tidak perlu membundle ulang seluruh project setiap kali ada perubahan. hasilnya dev server yang sangat cepat, plus HMR yang hanya mengirim bagian file yang berubah.

sejak Laravel 9.19, Vite menggantikan Laravel Mix sebagai bundler default lewat paket laravel-vite-plugin. project Laravel baru versi 10 ke atas sudah memuat vite.config.js bawaan, jadi kalian tinggal npm install dan langsung bisa pakai.

Persiapan: Node.js dan Install Dependencies

syarat mutlaknya cuma satu: Node.js terpasang di komputer kalian. kalau belum, saya sudah tulis panduannya di cara install nodejs di windows, ikuti dulu sampai perintah node -v mengeluarkan nomor versi.

setelah itu, masuk ke folder project Laravel kalian. kalau belum punya project, buat dulu:

composer create-project laravel/laravel belajar-vite
cd belajar-vite

lalu install semua dependency frontend:

npm install

perintah ini membaca package.json yang sudah disediakan Laravel, berisi Vite, laravel-vite-plugin, dan aksios bootstrap. selesai install, kita sudah siap ke bagian inti.

Memahami vite.config.js

buka file vite.config.js di root project, isi default-nya seperti ini:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

mari bedah bagian pentingnya:

laravel-vite-plugin adalah jembatan antara Vite dan Laravel, mengurus lokasi build, penamaan file ber-hash, dan integrasi dengan Blade
input mendaftarkan asset yang akan dibundle, semua file CSS dan JS kalian harus terdaftar di sini, bisa ditambah berapa pun
refresh: true mengaktifkan auto-reload Blade saat file PHP diubah, jadi tidak cuma asset frontend yang di-reload

lokasi file default mengikuti struktur Laravel: CSS di resources/css/app.css, JavaScript di resources/js/app.js. keduanya sudah dibuat otomatis saat project baru.

Menambah file baru

kalau nanti butuh asset tambahan, misal CSS khusus halaman admin, tinggal tambah di array input:

laravel({
    input: [
        'resources/css/app.css',
        'resources/js/app.js',
        'resources/css/admin.css',
    ],
    refresh: true,
})

jangan lupa file admin.css-nya dibuat dulu di folder resources/css, dan nanti didaftarkan juga di Blade.

Memanggil Asset di Blade dengan @vite

cara memanggil asset di template Blade memakai directive @vite, bukan tag <link> atau <script> biasa:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Belajar Vite</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <h1>Halo Vite</h1>
</body>
</html>

list file di @vite harus sama dengan yang terdaftar di vite.config.js. saat npm run dev aktif, directive ini me-render tag script module ke dev server Vite, saat production, dia me-render link ke file build ber-hash.

Menjalankan Dev Server dan HMR

sekarang jalankan perintah development:

npm run dev

akan muncul output seperti ini:

  VITE v5.x.x  ready in 400 ms

  ➜  Local:   http://localhost:5173/
  ➜  network: use --host to expose

tidak perlu buka alamat itu, cukup buka project Laravel kalian seperti biasa di http://localhost:8000 via php artisan serve. Laravel otomatis menyuntikkan script dari dev server Vite ke halaman.

coba ubah isi resources/css/app.css, misal tambah body { background: #f0f0f0; }, simpan, maka perubahan langsung tampil tanpa refresh. ini HMR bekerja. ubah file Blade juga ikut ter-reload otomatis berkat refresh: true.

Integrasi React

buat yang ingin pakai React di frontend Laravel, tambahan konfigurasinya cuma sedikit. pertama install plugin React:

npm install --save-dev @vitejs/plugin-react

lalu ubah vite.config.js jadi seperti ini:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.jsx'],
            refresh: true,
        }),
        react(),
    ],
});

dua hal yang berubah: plugin react() ditambahkan, dan input JS diganti dari app.js menjadi app.jsx karena file React memakai ekstensi JSX. jangan lupa rename file resources/js/app.js jadi resources/js/app.jsx lalu isi dengan komponen React:

import React from 'react';
import { createRoot } from 'react-dom/client';

function App() {
    return <h1>Halo dari React</h1>;
}

createRoot(document.getElementById('app')).render(<App />);

di Blade, sisipkan elemen penampung dan directive @viteReactRefresh:

<body>
    <div id="app"></div>
    @viteReactRefresh
    @vite(['resources/css/app.css', 'resources/js/app.jsx'])
</body>

@viteReactRefresh diperlukan supaya state komponen React tidak hilang saat HMR. restart npm run dev karena kita menambah plugin baru, lalu halaman menampilkan teks dari komponen React.

Integrasi Vue

untuk Vue, pola-nya sama persis, hanya ganti plugin. install plugin Vue:

npm install --save-dev @vitejs/plugin-vue

ubah vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue(),
    ],
});

buat file resources/js/app.js berisi mounting Vue, dan komponen di resources/js/App.vue. di Blade tinggal panggil @vite seperti biasa tanpa directive tambahan.

kalau kalian rencana memakai Inertia untuk SPA penuh, konsep @inertia di Blade akan muncul, tapi itu pembahasan tersendiri, fokus kita di artikel ini adalah setup Vite dasar yang menjadi fondasinya.

Build untuk Production

untuk production, jalankan:

npm run build

hasilnya masuk ke folder public/build berupa file CSS dan JS yang sudah di-minify dan diberi hash nama:

public/build/
├── assets/
│   ├── app-4ed993c7.js
│   └── app-d1d2f3e4.css
└── manifest.json

file manifest.json berisi pemetaan nama asli ke nama ber-hash, dan inilah yang dibaca Laravel saat me-render @vite. hash di nama file berfungsi untuk cache busting, browser otomatis mengunduh versi baru setiap kali build karena namanya berbeda.

alur deploy yang benar:

jalankan composer install --no-dev dan npm install di server
jalankan npm run build di server supaya public/build terbentuk sesuai environment server
jangan deploy folder node_modules atau hasil build dari komputer local, karena bisa beda environment

kalau kalian memakai Vercel atau platform sejenis, cukup set build command-nya npm run build dan output ke folder project, Vercel mendeteksi Laravel otomatis.

Masalah yang Sering Muncul

Vite manifest not found → file public/build/manifest.json tidak ada. jalankan npm install lalu npm run build. kalau deploy manual, pastikan folder public/build ikut terupload
port 5173 bentrok → tambah konfigurasi di vite.config.js: server: { port: 5174 } lalu restart dev server
perubahan tidak tampil setelah update plugin → restart npm run dev, karena penambahan plugin baru tidak di-reload otomatis
error ERR_OSSL_EVP_UNSUPPORTED → ini klasik di Windows saat versi Node lawas bertemu OpenSSL 3. solusi termudah: upgrade Node ke versi LTS terbaru, bukan menonaktifkan setting keamanannya
npm install gagal permission → di Windows jalankan terminal sebagai administrator, atau cek apakah folder node_modules lama masih ada dan hapus dulu sebelum install ulang

Kesimpulan

setup Laravel dengan Vite sebenarnya sudah disiapkan otomatis oleh project baru: tinggal npm install, jalankan npm run dev, dan panggil asset lewat directive @vite di Blade. konfigurasi tambahan hanya muncul saat kalian mengintegrasikan React atau Vue, itupun sebatas install plugin dan menyesuaikan ekstensi file input.

kunci yang perlu diingat: npm run dev untuk development dengan HMR, npm run build untuk production yang menghasilkan public/build/manifest.json, dan jangan lupa build di server saat deploy. begitu paham alur ini, semua pengembangan frontend Laravel berikutnya jauh lebih lancar.

Baca Juga Mengenai :

Pertanyaan yang Sering Diajukan

Apakah Laravel 9 ke atas otomatis memakai Vite?

Ya. sejak Laravel 9.19 Vite menjadi bundler default dan sejak Laravel 10 ke atas file vite.config.js selalu ada di project baru. Kalau project kalian masih pakai Laravel Mix dari versi lama, perlu migrasi manual atau cukup pakai Vite di project baru.

Kenapa muncul error Vite manifest not found?

Itu pertanda server tidak menemukan file build hasil npm run build di folder public/build. Solusinya jalankan npm install lalu npm run build di server, atau pastikan public/build ikut terupload saat deploy. Tanpa build production, directive @vite tidak punya file untuk dirender.

Bagaimana cara menambah file CSS atau JS baru ke Vite?

Tambahkan path file ke array input di vite.config.js lalu daftarkan lagi di directive @vite di Blade. Contoh: input: [resources/css/app.css, resources/js/app.js, resources/css/admin.css] lalu di Blade @vite([...resources yang sama]).

Apa bedanya npm run dev dan npm run build?

npm run dev menjalankan dev server Vite dengan hot module replacement, perubahan kode langsung tampil tanpa refresh browser. npm run build mengompilasi semua asset jadi file statis ber-hash di folder public/build untuk dipakai di production.

Bisa pakai React atau Vue di Laravel dengan Vite?

Bisa. React butuh plugin @vitejs/plugin-react dan file .jsx, Vue butuh plugin @vitejs/plugin-vue dan file .vue. Keduanya tinggal ditambahkan di vite.config.js dan diinstall lewat npm, tidak perlu konfigurasi lain.

Apakah bisa tetap pakai Laravel Mix di project lama?

Bisa, Laravel Mix tidak dihapus dari project yang sudah menggunakannya, hanya saja tidak lagi dipasang di project baru dan pengembangannya berhenti. Kalau project lama masih stabil, biarkan Mix, tapi project baru sebaiknya langsung Vite.