Auth Layout Laravel Inertia, Vue 3, dan Tailwind CSS

Jika sebelumnya kita telah menyelesaikan konfigurasi terkait assets dari template Argon Dashboard Template, maka pada sesi kali ini kita akan melanjutkan dengan membuat layout untuk halaman autentikasi. Layout ini nantinya akan kita gunakan sebagai kerangka tampilan untuk halaman login dan register dalam aplikasi kita.

Silakan teman-teman buat sebuah file baru dengan nama AuthenticatedLayout.vue. File ini kita tempatkan di dalam direktori: resources/js/layouts/.

Dengan demikian, struktur atau hirarki folder kita akan terlihat kurang lebih seperti ini:

resources/
└── js/
    └── layouts/
        └── AuthenticatedLayout.vue

Tujuan dari pembuatan layout ini adalah agar halaman login dan register memiliki struktur tampilan yang konsisten, sekaligus terpisah dari layout utama yang digunakan setelah user berhasil login.

Konfigurasi

Silakan buka file yang baru saja dibuat, kemudian masukkan kode berikut ini:

<!-- resources/js/Layouts/AuthLayout.vue -->
<template>
  <div class="m-0 font-sans antialiased font-normal bg-white text-start text-base leading-default text-slate-500">
    <main class="mt-0 transition-all duration-200 ease-in-out">
      <section>
        <div class="relative flex items-center min-h-screen p-0 overflow-hidden bg-center bg-cover">
          <div class="container z-1">
            <div class="flex flex-wrap -mx-3">
              <slot />
              <!-- Side Banner -->
              <div class="absolute top-0 right-0 flex-col justify-center hidden w-6/12 h-full max-w-full px-3 pr-0 my-auto text-center flex-0 lg:flex">
                <div class="relative flex flex-col justify-center h-full bg-cover px-24 m-4 overflow-hidden bg-[url('https://raw.githubusercontent.com/creativetimofficial/public-assets/master/argon-dashboard-pro/assets/img/signin-ill.jpg')] rounded-xl ">
                  <span class="absolute top-0 left-0 w-full h-full bg-center bg-cover bg-gradient-to-tl from-blue-500 to-violet-500 opacity-60"></span>
                  <h4 class="z-20 mt-12 font-bold text-white">"Attention is the new currency"</h4>
                  <p class="z-20 text-white ">The more effortless the writing looks, the more effort the writer actually put into the process.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

Struktur Template

Mari kita pelajari bagian demi bagian dari layout diatas:

1. <div class="m-0 font-sans antialiased ...">

Ini adalah container utama dari seluruh layout.

• m-0 menghilangkan margin.
• font-sans dan antialiased membuat tampilan teks lebih bersih dan modern.
• bg-white text-slate-500 memberikan latar putih dengan teks abu-abu kebiruan.
• text-start, text-base, dan leading-default memastikan teks tampil rapi dan nyaman dibaca.

2. <main class="mt-0 transition-all ...">

Bagian utama isi halaman. Penggunaan transition-all dan duration-200 memberi efek transisi halus saat terjadi perubahan tampilan.

3. <section> dan <div class="relative flex items-center ...">

• Ini membungkus konten login/register.
• min-h-screen memastikan konten mengisi seluruh tinggi layar.
• flex items-center memusatkan isi secara vertikal dan horizontal.
• bg-center bg-cover disiapkan agar bisa memiliki latar belakang gambar jika dibutuhkan.

4. <div class="container z-1"> ... <slot />

Bagian ini adalah tempat konten halaman dimasukkan (login/register form).

• <slot /> adalah fitur Vue untuk menyisipkan konten anak.
• Biasanya file seperti Login.vue atau Register.vue akan menggunakan layout ini dan kontennya akan muncul di sini.

5. Side Banner (Gambar Ilustrasi Kanan)

<div class="absolute top-0 right-0 ... lg:flex">

• Ini adalah bagian banner kanan yang hanya tampil di layar lebar (lg:flex).
• w-6/12 berarti mengisi separuh kanan layar.
• bg-[url(...)] menampilkan ilustrasi dari URL.
• Ada overlay gradasi warna ungu ke biru (bg-gradient-to-tl from-blue-500 to-violet-500 opacity-60) agar teks di atas gambar tetap terlihat jelas.

Pada materi selanjutnya, kita akan melukan slicing login dan register page menggunakan Argon Dashboard Tailwind.