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

Halo teman-teman, kita lanjut lagi ke tahap berikutnya dalam membangun tampilan dashboard menggunakan Laravel 12, Inertia.js, Vue 3, dan Tailwind CSS. Setelah sebelumnya kita menyusun komponen seperti sidebar dan navbar, kali ini kita akan fokus pada komponen footer—yaitu bagian bawah halaman yang biasanya berisi informasi hak cipta (copyright), link tambahan, atau kredensial pengembang.

Silakan buka file Footer.vue yang ada di dalam struktur berikut:

resources
└── js
    └── components
        └── Footer.vue

Setelah itu, ubah isi file tersebut dengan kode berikut:

<template>
  <footer class="pt-4">
    <div class="w-full px-6 mx-auto">
      <div class="flex flex-wrap items-center -mx-3 lg:justify-between">
        <div class="w-full max-w-full px-3 mt-0 mb-6 shrink-0 lg:mb-0 lg:w-1/2 lg:flex-none">
          <div class="text-sm leading-normal text-center text-slate-500 lg:text-left">
            ©2025
            made with <i class="fa fa-heart"></i> by
            <a href="https://www.creative-tim.com" class="font-semibold text-slate-700 dark:text-white" target="_blank">
              Creative Tim
            </a>
            for a better web.
          </div>
        </div>
        <div class="w-full max-w-full px-3 mt-0 shrink-0 lg:w-1/2 lg:flex-none">
          <ul class="flex flex-wrap justify-center pl-0 mb-0 list-none lg:justify-end">
            <li class="nav-item">
              <a href="https://www.creative-tim.com"
                 class="block px-4 pt-0 pb-1 text-sm font-normal transition-colors ease-in-out text-slate-500"
                 target="_blank">Creative Tim</a>
            </li>
            <li class="nav-item">
              <a href="https://www.creative-tim.com/presentation"
                 class="block px-4 pt-0 pb-1 text-sm font-normal transition-colors ease-in-out text-slate-500"
                 target="_blank">About Us</a>
            </li>
            <li class="nav-item">
              <a href="https://creative-tim.com/blog"
                 class="block px-4 pt-0 pb-1 text-sm font-normal transition-colors ease-in-out text-slate-500"
                 target="_blank">Blog</a>
            </li>
            <li class="nav-item">
              <a href="https://www.creative-tim.com/license"
                 class="block px-4 pt-0 pb-1 pr-0 text-sm font-normal transition-colors ease-in-out text-slate-500"
                 target="_blank">License</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
</template>

Kode di atas merupakan komponen Footer dari template Argon Dashboard, yang sudah kita sesuaikan agar lebih fleksibel digunakan dalam proyek berbasis Inertia dan Vue. Footer ini bersifat responsif dan sudah menggunakan berbagai class dari Tailwind CSS, sehingga otomatis menyesuaikan tampilan untuk berbagai ukuran layar.

Beberapa hal yang bisa teman-teman perhatikan:

• Bagian kiri menampilkan informasi copyright yang dikustomisasi, bisa diganti dengan nama proyek atau institusi kalian.
• Bagian kanan menampilkan beberapa link eksternal, seperti ke halaman About Us, Blog, atau Lisensi.
• Class utility seperti flex, justify-between, text-slate-500, dan dark:text-white memastikan tampilan tetap rapi dan mendukung dark mode.

Komponen ini reusable, artinya cukup kita tempatkan sekali di layout utama, maka footer akan otomatis muncul di semua halaman dashboard yang menggunakan layout tersebut.

Di sesi berikutnya, kita akan belajar membuat layout dan memanggil komponen-komponen yang sudah kita buat kedalam layout.