BÀI 4: TẠO LAYOUT ĐỘNG TRONG NUXT

Chúng ta cùng tiếp tục với Bài 4 – Tạo Layout động trong NuxtJS. Đây là một trong những tính năng cực kỳ hữu ích của Nuxt giúp bạn tái sử dụng giao diện khung (layout) cho toàn bộ website.

1. Layout là gì?

Layout giống như một khung cố định (header, footer, sidebar…) mà bên trong sẽ chèn nội dung trang tuỳ theo route.

Ví dụ:

📋 Copy+----------------------------+
| Header                    |
|---------------------------|
| <--- nội dung page --->   |
|---------------------------|
| Footer                    |
+----------------------------+

2. Layout mặc định – layouts/default.vue

Mặc định, nếu bạn không cấu hình gì, tất cả trang đều dùng layout này.

Tạo file: layouts/default.vue

📋 Copy<template>
  <div>
    <header>
      <h2>Trang web của tôi</h2>
      <nav>
        <NuxtLink to="/">Trang chủ</NuxtLink> |
        <NuxtLink to="/about">Giới thiệu</NuxtLink>
      </nav>
    </header>

    <main>
      <slot /> <!-- Nơi nội dung trang được render -->
    </main>

    <footer>
      <p>© 2025 – Powered by Nuxt</p>
    </footer>
  </div>
</template>

<style scoped>
header, footer {
  padding: 12px;
  background-color: #f3f3f3;
}
nav a {
  margin-right: 10px;
  text-decoration: none;
}
main {
  padding: 20px;
}
</style>

3. Tạo layout khác – ví dụ layouts/clean.vue

Bạn có thể tạo layout riêng cho một số page, ví dụ layout không có header/footer.

Tạo file layouts/clean.vue:

📋 Copy<template>
  <div style="padding: 40px; text-align: center;">
    <slot />
  </div>
</template>

4. Áp dụng layout cho một trang cụ thể

Trong trang muốn đổi layout (ví dụ pages/login.vue):

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

<template>
  <h1>Đăng nhập</h1>
  <input placeholder="Email" />
  <input placeholder="Mật khẩu" type="password" />
</template>

→ Trang /login sẽ không dùng layout mặc định mà dùng layout clean.vue.

5. Slot trong layout là gì?

<slot /> là nơi Nuxt sẽ chèn nội dung của trang hiện tại vào layout.

Nếu thiếu <slot /> thì nội dung trang sẽ không được hiển thị.

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

• Tạo layout dùng chung cho toàn app
• Tạo nhiều layout khác nhau và áp dụng theo trang
• Sử dụng <slot /> để nhúng nội dung
• Phân biệt layout với component thường

Bài tập mở rộng

1. Tạo layout admin.vue có sidebar
2. Trang /admin/dashboard.vue dùng layout admin
3. Cho phép layout chứa layout (nested layout)