Membuat Komponen Reusable di Nuxt JS 4

Setelah sebelumnya kita berhasil membuat logika untuk menangani API menggunakan composable di Nuxt JS 4, sekarang saatnya kita berpindah ke bagian antarmuka, yaitu komponen tampilan.

Pada bagian ini, kita akan membuat dua buah komponen sederhana yang bersifat reusable — artinya, komponen ini bisa digunakan berulang kali di berbagai halaman tanpa perlu menulis ulang strukturnya.

Buat Folder components

Pertama, silakan buat folder baru dengan nama components di dalam direktori utama (root) atau di dalam folder app jika kamu mengikuti struktur modul Nuxt.

Strukturnya kurang lebih akan terlihat seperti ini:

nuxt-laravel
├── app
│   └── components
│       ├── Header.vue
│       └── Footer.vue

Buat Komponen Header.vue dan Footer.vue

Buat dua buah file Vue di dalam folder components, masing-masing:

1. Header.vue – berisi tampilan bagian atas halaman (misalnya, logo dan navigasi)
2. Footer.vue – berisi informasi bagian bawah halaman (seperti hak cipta, tautan sosial media, dsb.).

Konfigurasi Header.vue

Silakan buka file Header.vue yang baru saja dibuat kemudian masukkan kode berikut ini:

<template>
    <header class="bg-blue-500 text-white py-4 shadow-md">
      <div class="container mx-auto px-6 flex justify-between items-center">
        <NuxtLink to="/" class="text-2xl font-semibold text-white hover:text-gray-200 transition">
          Toko Online LagiKoding
        </NuxtLink>
  
        <nav>
          <ul class="flex space-x-6">
            <li v-for="item in menuItems" :key="item.name">
              <NuxtLink
                :to="item.path"
                class="relative px-3 py-2 transition hover:text-gray-200"
                :class="{ 'text-gray-200 font-semibold': $route.path === item.path }"
              >
                {{ item.name }}
                <span
                  v-if="$route.path === item.path"
                  class="absolute bottom-0 left-0 w-full h-0.5 bg-gray-200"
                ></span>
              </NuxtLink>
            </li>
          </ul>
        </nav>
      </div>
    </header>
  </template>
  
  <script setup>
  const menuItems = [
    { name: "Home", path: "/" },
    { name: "Produk", path: "/products" },
  ];
  </script>
  

Konsep Dasar Header di Nuxt 3/4

Dalam aplikasi web, komponen header biasanya merupakan bagian yang paling sering dilihat oleh pengguna. Ia berfungsi sebagai navigasi utama dan identitas visual dari aplikasi itu sendiri. Di Nuxt 3/4, kita bisa mendefinisikannya sebagai komponen Vue biasa, lalu menyisipkannya di layout utama (app.vue) agar muncul di setiap halaman.

Nah, mari kita bahas isi dari file <Header.vue> satu per satu.

Struktur Template

<header class="bg-blue-500 text-white py-4 shadow-md">

Baris ini membentuk bagian header dengan:

• Warna latar belakang biru (bg-blue-500)
• Teks berwarna putih
• Padding atas bawah (py-4)
• Bayangan halus di bawah (shadow-md)

Lalu di dalamnya, kita buat <div> dengan kelas:

<div class="container mx-auto px-6 flex justify-between items-center">

Artinya:

• container mx-auto: lebar container dibatasi dan ditengah
• px-6: padding kiri kanan
• flex justify-between items-center: pakai Flexbox untuk menyusun elemen kiri dan kanan (logo dan menu)

Logo Navigasi

htmlSalinEdit<NuxtLink to="/" class="text-2xl font-semibold text-white hover:text-gray-200 transition">
  Toko Online LagiKoding
</NuxtLink>

Di sini kita menampilkan judul toko yang sekaligus berfungsi sebagai link ke beranda (/). Ukurannya besar (text-2xl), tebal (font-semibold), dan responsif saat di-hover (warnanya jadi abu muda).

Navigasi Dinamis

Kemudian kita masuk ke bagian menu:

<nav>
  <ul class="flex space-x-6">
    <li v-for="item in menuItems" :key="item.name">

• Menu ditampilkan secara horizontal menggunakan Flexbox (flex space-x-6)
• Kita lakukan v-for untuk setiap item menu yang berasal dari variabel menuItems

Lalu di dalam setiap li, kita tampilkan:

<NuxtLink :to="item.path" class="..." :class="{ 'text-gray-200 font-semibold': $route.path === item.path }">
  {{ item.name }}

Fungsinya:

• :to="item.path" untuk mengarahkan ke URL
• Highlight menu yang sedang aktif dengan memberi style tebal dan warna abu muda jika $route.path cocok dengan item.path

Bonusnya:

<span v-if="$route.path === item.path" class="absolute bottom-0 left-0 w-full h-0.5 bg-gray-200"></span>

Elemen ini menambahkan garis bawah tipis sebagai indikator halaman aktif. Ini semacam active tab underline yang elegan.

Bagian Script

<script setup>
const menuItems = [
  { name: "Home", path: "/" },
  { name: "Produk", path: "/products" },
];
</script>

Dengan pendekatan <script setup>, kita definisikan array menuItems yang berisi nama dan path masing-masing halaman. Karena ini file .vue yang modern (Nuxt 3+), kita tidak perlu ekspor atau define secara manual — semuanya sudah otomatis scoped ke template di atas.

Kesimpulan

Jadi, komponen Header.vue ini:

• Menggunakan Tailwind CSS untuk styling yang ringkas dan konsisten
• Menampilkan logo toko sekaligus link ke halaman utama
• Menyediakan menu navigasi dinamis yang responsif dan interaktif
• Secara visual memberi petunjuk halaman aktif, yang sangat penting untuk pengalaman pengguna

Ini contoh yang sangat baik dari komponen reusable, dan sangat cocok disematkan di layout global seperti app.vue agar tampil di semua halaman secara konsisten. Pada materi selanjutnya. kita akan melakukan konfigurasi untuk komponen footer kita.