Membuat Sistem Routing Dinamis dan Nested Layout di Nuxt 3

merasa bingung mengatur struktur halaman saat membangun aplikasi dengan Nuxt 3? Atau mungkin Anda ingin membuat halaman detail seperti /user/1, /user/2, namun tidak tahu cara membuat routing dinamis? Belum lagi jika ingin menggunakan berbeda layout pada halaman tertentu—pusing memikirkan harus mulai dari mana?

Tenang, Anda tidak sendiri. Banyak pemula yang merasa overwhelmed saat pertama kali berhadapan dengan sistem routing Nuxt 3, terutama saat harus menggabungkan dynamic route dan nested layout dalam satu proyek.

Artikel ini hadir sebagai solusi. Di sini, Anda akan mendapatkan:

• Penjelasan mudah tentang cara kerja routing di Nuxt 3.
• Panduan langkah demi langkah membuat dynamic route ([id].vue).
• Cara membuat nested layout agar halaman punya tata letak berbeda.
• Tips melayout konten tanpa error.

Apa Itu Routing di Nuxt 3?

Routing di Nuxt 3 berjalan secara otomatis berdasarkan struktur folder di dalam direktori pages/. Artinya, Anda tidak perlu membuat file router manual, cukup buat file .vue, maka rute akan tercipta.

Langkah-Langkah membuat sistem routing dinamis dan nested layout di Nuxt 3

1. Membuat Routing Dasar di pages/

Contoh Struktur Dasar:

pages/
 ├── index.vue        → '/'
 ├── about.vue        → '/about'
 └── contact.vue      → '/contact'

pages/
 ├── index.vue        → '/'
 ├── about.vue        → '/about'
 └── contact.vue      → '/contact'

Setiap file .vue di folder pages/ otomatis menjadi halaman.

2. Membuat Dynamic Route ([id].vue)

Dynamic Route diperlukan untuk halaman dinamis seperti profil, detail produk, dll.

Langkah:

Buat folder pages/users/ dan tambahkan file [id].vue:

pages/
 └── users/
     └── [id].vue     → '/users/:id'

pages/
 └── users/
     └── [id].vue     → '/users/:id'

Contoh kode [id].vue:

<template>
  <div>
    <h1>Profil Pengguna: {{ userId }}</h1>
  </div>
</template>

<script setup>
const route = useRoute()
const userId = route.params.id
</script>

<template>
  <div>
    <h1>Profil Pengguna: {{ userId }}</h1>
  </div>
</template>

<script setup>
const route = useRoute()
const userId = route.params.id
</script>

📝 Penjelasan:

• useRoute() digunakan untuk mengambil parameter URL.
• Jika URL adalah /users/123, maka id = 123.

3. Membuat Nested Routing (Halaman Bersarang)

Nested routing digunakan untuk membuat halaman dalam halaman, contoh:
/users/1/settings, /users/1/posts

Struktur Folder:

pages/
 └── users/
     ├── [id].vue           → '/users/:id'
     └── [id]/
         ├── posts.vue      → '/users/:id/posts'
         └── settings.vue   → '/users/:id/settings'

pages/
 └── users/
     ├── [id].vue           → '/users/:id'
     └── [id]/
         ├── posts.vue      → '/users/:id/posts'
         └── settings.vue   → '/users/:id/settings'

Contoh posts.vue:

<template>
  <div>
    <h2>Postingan dari User {{ $route.params.id }}</h2>
  </div>
</template>

<template>
  <div>
    <h2>Postingan dari User {{ $route.params.id }}</h2>
  </div>
</template>

4. Menggunakan Nested Layout (Tata Letak Berbeda)

Anda dapat membuat layout berbeda untuk halaman tertentu di folder layouts/.

Langkah:

1.Buat layout baru:
layouts/user.vue

<template>
  <div>
    <header>User Layout</header>
    <main>
      <slot/>
    </main>
  </div>
</template>

<template>
  <div>
    <header>User Layout</header>
    <main>
      <slot/>
    </main>
  </div>
</template>

2.Gunakan layout di halaman user:

<script setup>
definePageMeta({
  layout: 'user'
})
</script>

<script setup>
definePageMeta({
  layout: 'user'
})
</script>

5. Tips Penting Agar Tidak Error

• Gunakan nama folder [id] untuk dynamic folder.
• Pastikan setiap layout memiliki <slot />.
• Jangan lupa gunakan definePageMeta() untuk mengganti layout.

Anda sudah memahami dasar hingga lanjutan: mulai dari routing otomatis, dynamic route, nested route, hingga nested layout di Nuxt 3. Dengan fondasi ini, Anda sudah selangkah lebih dekat membangun aplikasi profesional seperti dashboard, e-commerce, atau sistem admin.

Ingin melanjutkan ke level berikutnya?
Baca juga: “Mengoptimalkan Performance di Nuxt 3 dengan Middleware & Server Route”