Oke, sekarang kita masuk ke bagian yang sering dianggap sepele, tapi sebenarnya krusial: memahami struktur folder resources/js. Kalau di Laravel bagian backend punya app/, maka di sisi frontend (Inertia + Vue), “markas besarnya” ada di sini.

Mengenal Folder resources/js

Folder resources/js adalah tempat semua kode JavaScript dan komponen Vue kita tinggal. Di sinilah kita menyusun tampilan aplikasi, mulai dari halaman utama sampai komponen kecil yang reusable.

Kalau kamu install Breeze dengan stack Inertia + Vue, biasanya strukturnya akan terlihat seperti ini:

resources/
└── js/
    ├── Components/
    ├── Pages/
    ├── Layouts/
    ├── app.js
    ├── bootstrap.js

Sekilas terlihat sederhana, tapi masing-masing punya peran penting. Yuk kita kupas dengan cara yang lebih santai.

Pages: Halaman Utama Aplikasi

Anggap saja folder Pages ini seperti daftar “screen” dalam aplikasi kamu.

Semua yang sifatnya halaman penuh—seperti Dashboard, Login, atau halaman data—ditaruh di sini. Inertia nanti akan memanggil file di folder ini berdasarkan route dari Laravel.

Contohnya:

Pages/
├── Dashboard.vue
├── Login.vue
├── Register.vue
└── Welcome.vue

Di controller Laravel, kita cukup panggil:

return Inertia::render('Dashboard');

Jadi nggak ada lagi istilah return view Blade—sekarang kita langsung render komponen Vue sebagai halaman.

Components: Potongan Kecil yang Bisa Dipakai Ulang

Kalau Pages itu halaman penuh, maka Components adalah bagian kecilnya.

Misalnya:

• Tombol
• Modal
• Alert
• Form input custom

Daripada nulis ulang berkali-kali, kita cukup buat sekali di folder ini, lalu panggil di mana saja.

Contoh penggunaan:

<template>
  <DeleteButton label="Hapus" />
</template>

<script setup>
import DeleteButton from '@/Components/DeleteButton.vue'
</script>

Pendekatan ini bikin kode lebih bersih dan mudah dirawat.

Layouts: Kerangka Tampilan

Folder Layouts ini ibarat “template besar” dari aplikasi kita.

Biasanya berisi:

• Navbar / Header
• Sidebar
• Footer

Yang sifatnya konsisten di banyak halaman.

Contoh sederhana:

Layouts/
└── AppLayout.vue

Lalu di halaman:

<script setup>
import AppLayout from '@/Layouts/AppLayout.vue'
</script>

<template>
  <AppLayout>
    <h1>Halaman Profile</h1>
  </AppLayout>
</template>

Dengan cara ini, semua halaman punya tampilan yang seragam tanpa harus copy-paste.

app.js: Otak dari Frontend

File app.js adalah entry point dari semua proses frontend.

Di sinilah:

• Inertia diinisialisasi
• Vue di-setup
• Halaman dipanggil secara dinamis

Biasanya file ini jarang diubah, kecuali kamu ingin menambahkan plugin global atau konfigurasi khusus.

bootstrap.js: Setup Awal

Kalau app.js adalah otaknya, maka bootstrap.js ini seperti “persiapan sebelum mulai”.

Biasanya berisi:

• Setup Axios
• Konfigurasi CSRF token
• Default header untuk request

File ini memastikan semua komunikasi antara frontend dan backend berjalan lancar.

Gambaran Sederhana

Supaya lebih kebayang, coba lihat analogi ini:

• Layouts → kerangka rumah
• Pages → ruangan (kamar, ruang tamu, dll)
• Components → perabot (kursi, meja, dll)

Semuanya saling terhubung untuk membentuk aplikasi yang utuh.

Kesimpulan

Dengan memahami struktur ini dari awal, kamu akan lebih mudah mengembangkan aplikasi ke depannya. Kode jadi lebih terorganisir, reusable, dan scalable.

Intinya, bukan cuma soal “bisa jalan”, tapi juga bagaimana membuat project tetap rapi saat makin besar