Tutorial Laravel 12 Inertia Vue dan Tailwind CSS #11 Konfigurasi Layout Argon Dashboard

Pada tutorial ini, kita akan belajar bersama bagaimana membangun aplikasi web modern menggunakan Laravel 12, Inertia.js, Vue.js, dan Tailwind CSS. Kita akan memulai dari konsep dasar, menghubungkan komponen backend Laravel dengan frontend Vue melalui Inertia, serta memanfaatkan kekuatan Tailwind untuk mempercantik tampilan aplikasi.

Kurnia Andi Nugroho

✅ Telah dilihat 572 kali

Rating: 5.00 ⭐

06 July 2025, 17:03

Konfigurasi Layout di Laravel 12 dengan Inertia, Vue, dan Tailwind CSS

Halo teman-teman, kali ini kita akan membahas salah satu bagian paling penting dalam membangun antarmuka aplikasi, yaitu layout.

Dalam konteks pengembangan front-end dengan Inertia.js dan Vue 3, layout bisa kita anggap sebagai kerangka utama dari tampilan halaman. Di dalamnya terdapat komponen-komponen yang sifatnya reusable, seperti sidebar, navbar, dan footer. Keuntungan utama dari pendekatan ini adalah efisiensi: kita tidak perlu menulis ulang sidebar atau navbar di setiap halaman. Cukup definisikan sekali, lalu gunakan secara konsisten di banyak halaman berbeda.

Langkah pertama, silakan teman-teman buka file AppLayout.vue yang biasanya berfungsi sebagai layout utama untuk halaman dashboard. Setelah itu, ubah isinya menjadi seperti berikut:

<template>
  <body
    class="m-0 font-sans antialiased font-normal dark:bg-slate-900 text-base leading-default bg-gray-50 text-slate-500">
    
    <noscript>
      <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0"
        style="display:none;visibility:hidden">
      </iframe>
    </noscript>

    <!-- Warna latar belakang atas -->
    <div class="absolute w-full bg-blue-500 dark:hidden min-h-75"></div>

    <!-- Sidebar -->
    <Sidebar :isOpen="isSidebarOpen" @close="isSidebarOpen = false" />

    <!-- Konten utama -->
    <main class="relative h-full max-h-screen transition-all duration-200 ease-in-out xl:ml-68 rounded-xl">

      <!-- Navbar -->
      <Navbar :isSidebarOpen="isSidebarOpen" @toggleSidebar="isSidebarOpen = true" />

      <!-- Konten dinamis -->
      <div class="w-full px-6 py-6 mx-auto">
        <slot />
        <Footer />
      </div>

    </main>
  </body>
</template>

<script>
import Sidebar from '@/components/Sidebar.vue'
import Navbar from '@/components/Navbar.vue'
import Footer from '@/components/Footer.vue'

export default {
  components: {
    Sidebar,
    Navbar,
    Footer
  },
  data() {
    return {
      isSidebarOpen: false
    }
  }
}
</script>

<slot /> digunakan sebagai tempat untuk menyisipkan konten halaman yang berbeda-beda, jadi layout ini akan membungkus halaman manapun yang menggunakannya.
Komponen Sidebar, Navbar, dan Footer disusun dengan rapi agar tampil konsisten di seluruh halaman dashboard.
Properti isSidebarOpen digunakan untuk mengatur apakah sidebar sedang terbuka atau tertutup. Ini berguna terutama untuk tampilan responsif di perangkat mobile atau layar kecil.
Class-class Tailwind seperti bg-gray-50, dark:bg-slate-900, xl:ml-68, dan transition-all memastikan tampilan modern, responsif, dan mendukung dark mode.