Konfigurasi Layout dalam Nuxt JS SSR dengan Laravel 12 API (Struktur App)

Setelah kita berhasil membuat dua komponen penting, yaitu Header dan Footer, langkah berikutnya adalah mengintegrasikannya ke dalam layout utama aplikasi Nuxt kita.

Kenapa perlu dilakukan ini? Supaya kedua komponen ini bisa tampil secara konsisten di setiap halaman aplikasi — tanpa perlu kita panggil satu per satu di setiap file page.

Mengenal File app.vue

Di Nuxt 3 dan 4, kita memiliki sebuah file utama yang bertindak sebagai root layout atau layout global. Nama file ini adalah app.vue.

File app.vue ini berfungsi sebagai pembungkus dari semua halaman (pages/) dan komponen. Jadi, jika kita ingin Header dan Footer muncul di seluruh halaman, maka tempat terbaik untuk memanggilnya adalah di file ini.

Konfigurasi app.vue

Silakan buka file tersebut, kemudian ubah menjadi seperti berikut ini:

<template>
  <div class="flex flex-col min-h-screen">
    <Header />
    <main class="flex-grow">
      <NuxtPage />
    </main>
    <Footer />
  </div>
</template>

Sekarang mari kita bahas satu per satu bagian dari kode app.vue yang sudah kita konfigurasi tadi. Tujuannya agar teman-teman benar-benar paham kenapa strukturnya seperti ini dan apa pengaruhnya terhadap tampilan aplikasi secara keseluruhan.

<div class="flex flex-col min-h-screen">

Baris pertama ini adalah pembungkus utama untuk seluruh halaman. Kita menggunakan utilitas Tailwind CSS:

• flex flex-col artinya kontainer ini menggunakan sistem flexbox dengan arah vertikal (atas ke bawah).
• min-h-screen membuat tinggi minimum dari elemen ini adalah sepanjang layar penuh. Ini berguna untuk memastikan footer tetap berada di bawah layar, meskipun kontennya pendek.

<Header />

Komponen ini akan selalu muncul di bagian atas halaman. Karena diletakkan sebelum <main>, maka tampilannya akan seperti sebuah navigasi utama atau brand header — dan karena kita letakkan di app.vue, maka ia otomatis muncul di semua halaman.

<main class="flex-grow">

Ini adalah bagian utama (konten halaman).

• flex-grow membuat area ini mengisi sisa ruang vertikal yang tersedia di antara Header dan Footer.

Di dalam <main> ini terdapat <NuxtPage />. Elemen ini adalah tempat Nuxt akan merender halaman berdasarkan route yang sedang dibuka, misalnya:

• Saat membuka /, maka file pages/index.vue akan dirender di sini.
• Saat membuka /products, maka file pages/products.vue akan muncul di sini juga.

<Footer />

Terakhir adalah bagian footer, yang muncul di bagian bawah halaman. Karena diletakkan di luar <main>, maka posisi dan tampilannya akan tetap stabil di bagian paling bawah, mengikuti tinggi layar yang diatur sebelumnya oleh min-h-screen.

Npm Run Dev

Silakan teman-teman janlankan perintah npm run dev dan juga php artisan serve untuk laravel API nya. Maka berikut tampilan ketika kita akses halaman aplikasi kita pada url http://localhost:3000/

Kesimpulan

Dengan struktur ini, teman-teman sudah membuat layout dasar yang bersih, responsif, dan dapat digunakan ulang di seluruh halaman.

• Ingin menambahkan menu baru? Tinggal update di komponen Header.
• Ingin menambahkan link sosial atau info hak cipta? Tambahkan saja di Footer.
• Tidak perlu mengulang kode ini di setiap halaman.