Membuat Halaman Index pada Nuxt 4 SSR dengan Laravel 12 API

Pada pembahasan kali ini, kita akan mulai membangun halaman beranda (index) untuk aplikasi yang sedang kita kembangkan. Langkah pertama yang perlu Anda lakukan adalah membuat sebuah folder baru bernama pages di dalam direktori proyek Nuxt Anda.

Setelah itu, buat sebuah file dengan nama index.vue di dalam folder pages tersebut. File inilah yang akan menjadi titik masuk utama saat pengguna pertama kali mengakses aplikasi.

Struktur hirarkinya akan tampak seperti berikut:

nuxt-laravel
├── app
    /pages
      └── index.vue

File index.vue ini berperan sebagai halaman utama yang akan ditampilkan saat pengguna membuka root URL (http://localhost:3000/). Silakan ubah file index.vue menjadi seperti berikut ini:

<template>
  <div class="relative overflow-hidden min-h-screen">
    <div class="absolute inset-0 bg-gradient-to-br from-blue-50 via-white to-blue-100 z-0"></div>
    <div class="relative z-10 text-center py-16 px-4 sm:px-6 lg:px-8">
      <h1 class="text-5xl font-extrabold text-blue-700 mb-4 animate-fade-in-down">
        Selamat Datang di <span class="text-indigo-600">Toko Online Lagikoding</span>
      </h1>
      <p class="text-gray-600 text-lg mb-8 animate-fade-in-up">
        Temukan produk unggulan pilihan dengan harga terbaik hanya untukmu.
      </p>
      <NuxtLink to="/products"
        class="inline-block bg-indigo-600 text-white px-8 py-3 rounded-full shadow-lg text-lg hover:bg-indigo-700 transition duration-300">
        Jelajahi Produk
      </NuxtLink>
    </div>
    <div class="mt-16 mb-24 px-6 grid grid-cols-1 md:grid-cols-3 gap-8 text-center z-10 relative pb-20">
      <div class="p-6 bg-white rounded-xl shadow hover:shadow-lg transition duration-300">
        <h3 class="text-xl font-semibold text-blue-700 mb-2">Gratis Ongkir</h3>
        <p class="text-gray-600">Untuk pembelian di atas Rp 300.000 ke seluruh Indonesia.</p>
      </div>
      <div class="p-6 bg-white rounded-xl shadow hover:shadow-lg transition duration-300">
        <h3 class="text-xl font-semibold text-blue-700 mb-2">Pembayaran Aman</h3>
        <p class="text-gray-600">Didukung berbagai metode seperti e-wallet, transfer, dan lainnya.</p>
      </div>
      <div class="p-6 bg-white rounded-xl shadow hover:shadow-lg transition duration-300">
        <h3 class="text-xl font-semibold text-blue-700 mb-2">Garansi Produk</h3>
        <p class="text-gray-600">Pengembalian mudah jika produk tidak sesuai ekspektasi.</p>
      </div>
    </div>
  </div>
</template>


<script setup>
import { useHead } from '#imports'
useHead({
  title: 'Home - Toko Online Lagikoding',
  meta: [
    {
      name: 'description',
      content: 'Selamat datang di toko online terbaik, temukan berbagai produk dengan harga terbaik.',
    },
  ],
});
</script>

<style scoped>
@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes zoom-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fade-in-down {
  animation: fade-in-down 0.8s ease-out;
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out;
}

.animate-zoom-in {
  animation: zoom-in 1s ease-out;
}
</style>

1. Bagian Template

<template>
  <div class="relative overflow-hidden min-h-screen">
    ...
  </div>
</template>

Bagian <template> adalah tempat utama untuk menuliskan struktur HTML dari halaman. Dalam contoh ini, kita menggunakan div utama dengan class Tailwind seperti relative, overflow-hidden, dan min-h-screen untuk memastikan tampilan menyesuaikan tinggi layar secara penuh dan efek visual seperti background gradient bisa ditampilkan dengan baik.

2. Background Gradient

<div class="absolute inset-0 bg-gradient-to-br from-blue-50 via-white to-blue-100 z-0"></div>

Elemen ini merupakan layer latar belakang yang menggunakan gradien warna dari biru muda ke putih. Class absolute inset-0 membuatnya mengisi seluruh ruang div induknya. Z-index diatur ke 0 agar semua konten di atasnya tetap terlihat.

3. Konten Utama: Judul dan CTA

<div class="relative z-10 text-center py-16 ...">
  <h1>...</h1>
  <p>...</p>
  <NuxtLink to="/products">...</NuxtLink>
</div>

• Judul utama (<h1>) menampilkan sambutan dengan gaya tebal dan besar, serta menggunakan animasi fade-in-down.
• Paragraf penjelas menggunakan fade-in-up agar muncul dengan animasi dari bawah.
• Tombol Jelajahi Produk menggunakan komponen NuxtLink untuk navigasi internal. Diberi gaya agar tampil seperti tombol modern dengan efek hover.

4. Fitur Highlight Box

<div class="mt-16 mb-24 px-6 grid grid-cols-1 md:grid-cols-3 ...">
  <div class="p-6 bg-white rounded-xl shadow ...">
    ...
  </div>
  ...
</div>

Bagian ini merupakan highlight section yang menampilkan tiga keunggulan utama toko:

• Gratis Ongkir
• Pembayaran Aman
• Garansi Produk

Disusun menggunakan grid responsif yang akan menampilkan satu kolom di layar kecil dan tiga kolom di layar sedang ke atas. Masing-masing kotak memiliki latar belakang putih, radius membulat, dan efek bayangan saat di-hover.

5. Bagian Script

<script setup>
import { useHead } from '#imports'

useHead({
  title: 'Home - Toko Online Lagikoding',
  meta: [
    {
      name: 'description',
      content: 'Selamat datang di toko online terbaik, temukan berbagai produk dengan harga terbaik.',
    },
  ],
});
</script>

• Kita menggunakan <script setup>, yaitu sintaks ringkas untuk Composition API di Vue 3.
• Fungsi useHead() digunakan untuk mengatur judul halaman dan meta deskripsi, yang penting untuk SEO dan pengalaman pengguna.

6. Style Khusus

<style scoped>
@keyframes fade-in-down { ... }
@keyframes fade-in-up { ... }
@keyframes zoom-in { ... }

.animate-fade-in-down { animation: fade-in-down ... }
.animate-fade-in-up { animation: fade-in-up ... }
.animate-zoom-in { animation: zoom-in ... }
</style>

Bagian ini mendefinisikan animasi kustom menggunakan @keyframes, yang kemudian dipanggil melalui class utility seperti animate-fade-in-up. Efek ini membuat konten terlihat lebih hidup dan profesional saat pertama kali muncul di layar.

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 menyelesaikan langkah-langkah di atas, kita telah berhasil membangun halaman index yang tidak hanya fungsional, tetapi juga memiliki tampilan modern dan responsif. Halaman ini bisa menjadi wajah utama dari aplikasi kita, sehingga penting untuk membuatnya menarik sejak awal. Selanjutnya, kita bisa mulai menghubungkan halaman ini dengan API dari Laravel 12, seperti menampilkan daftar produk secara dinamis.