2 · Membuat proyek

Tujuan: aplikasi Laravel yang berjalan, dengan frontend yang bisa dibangun oleh panel.

Komponen Vue yang dipublikasikan panel mengimpor sembilan belas modul yang tidak ikut dikirim, dan aplikasi Laravel Vue starter kit sudah memiliki semuanya. Itulah keseluruhan "asumsi starter kit" — pasang di atasnya dan frontend langsung jalan; pasang di tempat lain dan sembilan belas berkas itu menjadi pekerjaan Anda.

Lakukan ini

laravel new acme

Pilih starter kit Vue saat ditanya. Lalu:

cd acme
php artisan migrate
npm install
npm run dev

Buka http://localhost:8000 di satu terminal, dan biarkan npm run dev berjalan di terminal lain. Anda semestinya melihat halaman sambutan starter kit dan bisa mendaftarkan akun.

Perintah laravel tidak ada?

composer global require laravel/installer

Lalu pastikan ~/.composer/vendor/bin (atau ~/.config/composer/vendor/bin) ada di PATH Anda.

Apa yang diberikan starter kit

Panel tidak membaca maupun mengubah satu pun berkas ini. Panel hanya mengimpornya, dan itulah seluruh hubungannya.

	Dipakai panel untuk
resources/views/app.blade.php	Root view Inertia. Tanpa ini, setiap URL panel adalah 500
app/Http/Middleware/HandleInertiaRequests.php	Middleware Inertia. Panel menambahkan props-nya sendiri secara terpisah
resources/js/app.ts	Entry Inertia. Panel butuh berkas ini tidak menimpa layout yang sudah dipilih tiap halaman
vite.config.ts	Proses build, sekaligus tempat plugin Wayfinder berjalan
resources/css/app.css	Tema Tailwind 4 yang menjadi acuan utility milik panel
@/components/*, @/composables/useTwoFactorAuth, @/types	Komponen akun dan tipe bersama yang diimpor halaman pengaturan panel
@/routes/*, @/actions/*	Keluaran Wayfinder, dihasilkan dari tabel route Anda sendiri
App\Providers\FortifyServiceProvider	Layar autentikasi aplikasi Anda, yang tetap di tempatnya

Hasilkan modul Wayfinder

Sembilan dari sembilan belas modul itu dihasilkan dari route dan controller Anda sendiri:

php artisan wayfinder:generate

Konfigurasi Vite bawaan starter kit menjalankan plugin ini saat build, jadi npm run build juga menghasilkannya ulang. Menjalankannya sekali sekarang berarti installer di langkah 3 tidak punya apa-apa untuk dikeluhkan soal ini.

Satu suntingan yang paling sering salah

Setiap halaman panel menyatakan layout-nya sendiri:

defineOptions({ layout: PanelLayout });

Kalau resources/js/app.ts menetapkan layout tanpa syarat di dalam resolver Inertia, penetapan itu menimpa pilihan tersebut setelah halaman sudah memilihnya. Buka berkasnya dan lihat resolver-nya:

createInertiaApp({
  resolve: (name) => {
    const page = resolvePageComponent(`./pages/${name}.vue`, import.meta.glob('./pages/**/*.vue'));

    page.default.layout = AppLayout;      // semua layar panel dirender di shell Anda
    page.default.layout ??= AppLayout;    // halaman yang punya layout sendiri tetap memakainya

    return page;
  },
});

??= dan ||= sama-sama benar; = polos tidak.

Kegagalan ini tidak bersuara

Versi yang salah menghasilkan HTTP 200, sidebar aplikasi Anda, tanpa navigasi panel, dan tanpa apa pun di log. panel:install membaca berkas ini dan menyebutkan nomor barisnya — diperiksa justru karena tidak ada hal lain yang akan memberi tahu Anda.

Kalau Anda tidak memakai starter kit

Sisi server sama sekali tidak peduli. Yang harus Anda sediakan adalah sembilan belas modul frontend itu, dengan urutan berikut:

1. php artisan inertia:middleware, dan root view di resources/views/app.blade.php.
2. vite.config.ts dengan plugin Vue dan Tailwind 4.
3. npm install paket-paket yang disebutkan panel:install di langkah 3.
4. Pasang dan jalankan Wayfinder untuk @/routes/* dan @/actions/*.
5. Tulis tujuh komponen, satu composable, dan dua modul tipe — atau salin dari aplikasi starter kit.

Repositori paketnya menyimpan versi minimal dan bertipe benar untuk masing-masing modul di frontend/host/, yang bisa dibaca sebagai spesifikasi apa yang harus diekspor setiap modul. Detailnya di Host modules.

Pastikan berhasil

php artisan route:list --name=dashboard
ls resources/js/routes resources/js/actions

Route-nya harus ada, dan kedua direktori harus berisi. Mendaftarkan akun lewat layar bawaan starter kit lalu mendarat di /dashboard adalah pemeriksaan terkuat pada tahap ini — itu membuktikan Inertia, Vite, dan tumpukan autentikasi bekerja sebelum panel menyentuh apa pun.

Kalau gagal

Gejala	Penyebab	Perbaikan
npm run dev gagal di Tailwind	Node di bawah 20.19	Naikkan versi Node, hapus node_modules, jalankan npm install lagi
resources/js/routes kosong	Wayfinder belum dijalankan	php artisan wayfinder:generate
Halaman kosong dan error console soal app.blade.php	Root view Inertia tidak ada	php artisan inertia:middleware, lalu buat view-nya
/dashboard menghasilkan 500	Migrasi belum dijalankan	php artisan migrate

Berikutnya

Aplikasinya sudah berjalan. Sekarang beri dia panel.

→ 3 · Memasang PandaBear

Baca juga

• Laravel Vue starter kit setup — bahasan yang sama, lengkap
• Frontend requirements — daftar sembilan belas modulnya
• Wayfinder