Komponen Laravel Inertia, Vue 3, dan Tailwind CSS

Setelah berhasil melakukan proses login atau register, teman-teman akan diarahkan ke halaman utama yang disebut dashboard.

Tampilan yang terlihat pada gambar di atas merupakan tampilan default dari dashboard kita saat ini — masih polos, belum memiliki struktur layout yang ideal. Oleh karena itu, sebelum kita masuk ke proses slicing atau pengubahan tampilan visual dashboard secara utuh, ada beberapa komponen penting yang harus kita siapkan terlebih dahulu.

Komponen-komponen ini akan menjadi bagian utama layout dashboard, yaitu:

• Sidebar (menu navigasi di sisi kiri)
• Navbar (bagian atas)
• Footer (bagian bawah)

Komponen ini nantinya akan digunakan di hampir semua halaman setelah pengguna berhasil login, sehingga sangat penting untuk membuatnya reusable dan rapi sejak awal.

Struktur Folder dan File Komponen

Langkah pertama yang perlu teman-teman lakukan adalah membuat tiga file komponen Vue di dalam direktori berikut:

resources/js/components

Silakan buat 3 file baru dengan nama sebagai berikut:

Sidebar.vue
Navbar.vue
Footer.vue

Sehingga, jika kita lihat dalam bentuk struktur foldernya, akan tampak seperti ini:

resources
└── js
    └── components
        ├── Sidebar.vue
        ├── Navbar.vue
        └── Footer.vue

Pada sesi selanjutnya, kita akan mengisi masing-masing file tersebut dengan tampilan yang sesuai dengan desain dari template yang kita gunakan. Tujuannya adalah agar tampilan dashboard terlihat profesional, rapi, dan konsisten di seluruh halaman yang menggunakan layout ini.