BÀI 20: LAYOUT ĐỘNG & CẤU TRÚC GIAO DIỆN NHIỀU TRANG

Chúng ta cùng tiếp tục với Bài 20 – Layout động và cấu trúc giao diện nhiều trang trong NuxtJS. Đây là nền tảng quan trọng giúp bạn tổ chức giao diện rõ ràng, tái sử dụng header, footer, sidebar, menu… cho từng nhóm trang (ví dụ: trang blog, trang admin, trang public).

---

1. Layout trong Nuxt là gì?

• Layout là giao diện bao bọc các trang (pages)
• Một layout thường gồm: header, footer, menu, sidebar…
• Có thể tạo nhiều layout khác nhau và gán cho từng trang

Mặc định, Nuxt dùng layout ở:
layouts/default.vue

---

2. Tạo layout mặc định

File: layouts/default.vue

📋 Copy<template>
  <div>
    <header>Header chung</header>
    <main>
      <slot />
    </main>
    <footer>© 2025 - MyApp</footer>
  </div>
</template>

→ Tất cả các trang sẽ nằm trong <slot />

---

3. Tạo layout riêng: Blog, Admin

Tạo file layouts/blog.vue:

📋 Copy<template>
  <div class="blog-layout">
    <nav>Menu blog</nav>
    <main>
      <slot />
    </main>
  </div>
</template>

Tạo file layouts/admin.vue:

📋 Copy<template>
  <div class="admin-layout">
    <aside>Sidebar admin</aside>
    <div class="content">
      <slot />
    </div>
  </div>
</template>

---

4. Dùng layout riêng cho từng trang

Trong pages/blog/[slug].vue:

📋 Copy<script setup>
definePageMeta({
  layout: 'blog'
})
</script>

Trong pages/admin/index.vue:

📋 Copy<script setup>
definePageMeta({
  layout: 'admin'
})
</script>

---

5. Tạo layout error.vue cho trang lỗi

Tạo file layouts/error.vue:

📋 Copy<template>
  <div class="error">
    <h1>Lỗi {{ error.statusCode }}</h1>
    <p>{{ error.message }}</p>
    <NuxtLink to="/">Quay về trang chủ</NuxtLink>
  </div>
</template>

<script setup>
defineProps(['error'])
</script>

→ Layout này sẽ dùng khi trang bị lỗi (404, 500…)

---

6. Tái sử dụng header, footer

Bạn nên tạo các component riêng:

• components/Header.vue
• components/Footer.vue
• components/AdminSidebar.vue

Sau đó dùng trong layout:

📋 Copy<template>
  <Header />
  <main><slot /></main>
  <Footer />
</template>

<script setup>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
</script>

---

7. Cấu trúc thư mục gợi ý

📋 Copylayouts/
  default.vue
  blog.vue
  admin.vue
  error.vue

components/
  Header.vue
  Footer.vue
  AdminSidebar.vue

---

Bạn đã học được

• Layout là khung bao quanh các trang
• Tạo nhiều layout riêng: blog, admin, error
• Dùng definePageMeta({ layout }) để gán layout
• Tách component header, footer, sidebar để tái sử dụng
• Cấu trúc giao diện rõ ràng cho dự án lớn

---

Bài tập mở rộng

1. Tạo layout auth.vue cho các trang login/register
2. Dùng default.vue cho trang public, blog.vue cho blog
3. Tạo component BackToTop.vue dùng trong mọi layout
4. Áp dụng layout error.vue và test với route không tồn tại