Membuat Komponen Footer di Nuxt JS 4

Halo teman-teman! Jika sebelumnya kita sudah berhasil membuat komponen Header untuk mempercantik bagian atas halaman aplikasi Nuxt JS kita, maka kali ini kita akan melanjutkan dengan membuat komponen Footer. Komponen ini akan kita tempatkan di bagian bawah halaman, dan isinya bisa berupa copyright, informasi kontak, ataupun link ke media sosial.

Komponen Footer ini juga bersifat reusable, sehingga bisa digunakan di berbagai halaman tanpa perlu ditulis ulang.

Konfigurasi Footer.vue

Silakan buka file Footer.vue yang sudah kita buat sebelumnya di dalam folder components. Kemudian, masukkan kode berikut ke dalam file tersebut:

<template>
    <footer class="bg-gray-800 text-white py-6 mt-10">
      <div class="container mx-auto px-6 text-center">
        <p class="text-sm">&copy; 2025 Toko Online Lagikoding.</p>
      </div>
    </footer>
  </template>
  

Mari kita pelajari isi dari baris kode footer diatas.

footer sebagai elemen utama

<footer class="bg-gray-800 text-white py-6 mt-10">

• Menggunakan latar belakang abu gelap (bg-gray-800)
• Teks berwarna putih (text-white) agar kontras dan mudah dibaca
• Padding vertikal (py-6) supaya tidak terlalu sempit
• Margin atas (mt-10) memberi jarak dari konten sebelumnya

div.container

<div class="container mx-auto px-6 text-center">

• container mx-auto: membuat lebar konten tetap terbatas dan berada di tengah halaman
• px-6: padding kiri-kanan agar isi tidak mepet
• text-center: membuat teks di dalamnya rata tengah

Isi konten

<p class="text-sm">&copy; 2025 Toko Online Lagikoding.</p>

• text-sm: ukuran font kecil, khas untuk informasi di footer
• ©: simbol hak cipta
• "Toko Online Lagikoding" adalah nama toko

Bersifat Reusable

Komponen ini bersifat reusable, artinya teman-teman bisa menyisipkannya di mana saja — terutama di app.vue, agar muncul secara konsisten di setiap halaman.

Contoh penggunaannya di app.vue:

<template>
  <div>
    <Header />
    <NuxtPage />
    <Footer />
  </div>
</template>

Dengan begitu, teman-teman tidak perlu lagi menyalin kode footer ke setiap halaman secara manual. Ini adalah prinsip DRY (Don't Repeat Yourself) dalam praktik nyata.

Kesimpulan

Komponen Footer.vue yang teman-teman buat ini sederhana tapi fungsional. Cocok untuk tahap awal pengembangan aplikasi berbasis Nuxt JS. Ke depan, teman-teman bisa mengembangkan komponen ini menjadi lebih informatif — misalnya dengan menambahkan:

• Link ke halaman kebijakan privasi
• Ikon media sosial
• Bahasa toggle atau dark mode switch

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