Oke teman-teman, setelah kita berhasil menginstal Laravel dengan Inertia dan Vue, sekarang kita masuk ke bagian penting yang nggak boleh dilewatkan: struktur file JavaScript kita yang ada di folder resources/js.

Apa Itu resources/js ?

Folder resources/js ini bisa dibilang adalah pusat dari semua file JavaScript yang kita pakai, terutama yang berkaitan dengan tampilan menggunakan Vue. Jadi, kalau ada pertanyaan “Komponen dan halaman Vue kita disimpan di mana, sih?” — jawabannya ya di sini.

Kalau kita sudah pasang Breeze dengan stack Inertia + Vue, biasanya isi foldernya bakal kelihatan seperti ini:

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

Yuk, kita bahas satu per satu fungsinya.

1. Pages

Folder Pages ini tempat kita menyimpan semua halaman utama dari aplikasi. Misalnya kita punya halaman seperti Dashboard, Profile, atau Data Siswa, maka masing-masing bisa dibuat dalam file Vue dan diletakkan di folder ini.

Setiap file di sini akan dianggap sebagai "halaman" dalam konsep Single Page Application (SPA), dan akan dirender oleh Inertia berdasarkan route yang kita definisikan di Laravel. Contoh struktur di dalamnya bisa seperti ini:

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

Cara menampilkannya di controller cukup seperti ini:

return Inertia::render('Dashboard');
return Inertia::render('Login');
return Inertia::render('Register');
return Inertia::render('Welcome');

2. Components

Nah, kalau folder Components ini fungsinya untuk menyimpan komponen Vue yang bisa dipakai berulang-ulang di berbagai halaman. Misalnya komponen tombol, modal, alert, dan lain-lain.

Jadi, kalau kita sering butuh tombol delete atau edit di banyak tempat, daripada bikin ulang terus, lebih baik kita bikin satu kali di sini:

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

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

Dengan begitu, kita tinggal pakai saja kapan pun dibutuhkan, tanpa harus tulis ulang stylenya.

3. Layouts

Layout itu ibarat kerangka atau template utama tampilan aplikasi kita. Biasanya berisi bagian-bagian tetap seperti Header, Sidebar, dan Footer yang pengin kita tampilkan di banyak halaman.

Daripada menulis ulang header dan sidebar di setiap file, kita cukup buat satu layout dan pakai ulang.

Contoh struktur layout:

Layouts/
└── AppLayout.vue

Misalnya kita punya halaman Profile.vue, kita bisa "bungkus" isi halaman itu pakai AppLayout supaya tampilannya konsisten:

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

<template>
  <AppLayout>
    <h1>Update Profile</h1>
  </AppLayout>
</template>

4. app.js

File ini adalah titik masuk utama untuk frontend kita. Di sini, kita mengatur bagaimana Inertia mencari dan merender halaman Vue berdasarkan nama yang dikirim dari Laravel.

Biasanya kita nggak perlu sering-sering ubah file ini, kecuali kalau butuh menambahkan plugin global atau mengatur sesuatu yang sifatnya umum untuk semua halaman.

5. bootstrap.js

Terakhir, file bootstrap.js ini berfungsi untuk pengaturan awal JavaScript secara global. Isinya bisa berupa:

• Setup Axios untuk komunikasi API
• Header default untuk AJAX
• (Opsional) Konfigurasi Echo, CSRF token, atau plugin tambahan

Dengan memahami struktur ini, kita bisa membangun aplikasi yang lebih rapi, terorganisir, dan mudah dikembangkan ke depannya. Bayangkan saja kayak bangun rumah: Layouts itu kerangkanya, Pages itu ruang-ruangnya, dan Components itu perabotan yang bisa kita pakai di mana-mana. Jadi yuk, mulai rapiin struktur kita dari awal supaya kerjaan ke depan lebih enak.