Sử dụng Layout cho nhiều loại trang

Layout trong Nuxt giúp tái sử dụng giao diện tổng quát giữa các trang như phần header, footer, sidebar… thay vì lặp lại ở từng page. Không chỉ có layout mặc định (default.vue), bạn hoàn toàn có thể định nghĩa nhiều layout khác nhau cho các khu vực riêng biệt như trang quản trị (admin), trang dành cho người dùng chưa đăng nhập (guest), hoặc các trang yêu cầu xác thực (auth). Trong bài học này, chúng ta sẽ tìm hiểu cách tạo nhiều layout, gán layout cụ thể cho từng trang, và xây dựng layout nâng cao bằng slot.

Sử dụng Layout

1. Cách tạo nhiều layout

Trong Nuxt, layout được định nghĩa trong thư mục layouts/ với mỗi file .vue tương ứng với một layout.

Ví dụ:

• layouts/default.vue: layout mặc định
• layouts/auth.vue: layout cho các trang cần đăng nhập
• layouts/admin.vue: layout dành cho trang quản trị
• layouts/guest.vue: layout cho khách chưa đăng nhập

Ví dụ: layouts/default.vue

<template>
  <div>
    <header>Đây là header mặc định</header>
    <main>
      <slot />
    </main>
    <footer>Đây là footer mặc định</footer>
  </div>
</template>

Ví dụ: layouts/admin.vue

<template>
  <div>
    <nav>Admin Sidebar</nav>
    <main>
      <slot />
    </main>
  </div>
</template>

Mỗi layout cần có ít nhất một <slot /> để hiển thị nội dung page.

2. Gán layout cho trang bằng definePageMeta

Mặc định, Nuxt sử dụng layouts/default.vue. Nếu bạn muốn gán layout khác cho một trang cụ thể, hãy dùng definePageMeta() trong phần <script setup> của file .vue:

Ví dụ: pages/admin/dashboard.vue

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

<template>
  <h1>Admin Dashboard</h1>
</template>

Nuxt sẽ tự động dùng layouts/admin.vue cho trang này.

3. Thực hành: Tạo layout cho các khu vực khác nhau

Bài tập nhỏ: Tạo 3 layout cho 3 loại người dùng:

• Guest: khách chưa đăng nhập
• Auth: người dùng đã đăng nhập
• Admin: quản trị viên

Cấu trúc đề xuất:

layouts/
  default.vue
  guest.vue
  auth.vue
  admin.vue

pages/
  index.vue          → default
  login.vue          → guest
  profile.vue        → auth
  admin/dashboard.vue → admin

Ví dụ gán layout cho login.vue:

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

<template>
  <h2>Đăng nhập</h2>
</template>

4. Slot nâng cao: header, footer, sidebar riêng biệt

Nuxt layout có thể có nhiều <slot> được đặt tên để giúp chia bố cục linh hoạt hơn.

Ví dụ: layout có header và sidebar

<template>
  <div class="layout">
    <header><slot name="header" /></header>
    <aside><slot name="sidebar" /></aside>
    <main><slot /></main>
  </div>
</template>

Cách sử dụng slot từ một trang:

<template>
  <template #header>
    <h1>Header Tùy chỉnh</h1>
  </template>

  <template #sidebar>
    <ul>
      <li>Trang 1</li>
      <li>Trang 2</li>
    </ul>
  </template>

  <p>Nội dung chính của trang</p>
</template>

Slot nâng cao giúp chia sẻ giao diện một cách linh hoạt, nhất là với các trang có nhiều khu vực hiển thị khác nhau như dashboard, admin panel, v.v.

Kết luận

Trong bài học này, bạn đã hiểu cách tạo nhiều layout trong Nuxt và áp dụng chúng theo từng khu vực trong ứng dụng: từ layout mặc định, layout riêng cho người dùng, khách hoặc admin. Bạn cũng đã biết cách gán layout cho từng page cụ thể thông qua definePageMeta, và sử dụng slot để xây dựng bố cục linh hoạt hơn. Đây là kỹ thuật cực kỳ quan trọng giúp dự án của bạn tổ chức rõ ràng, dễ mở rộng và dễ bảo trì.