Cấu trúc thư mục chuẩn trong Nuxt

Trong bài học này, bạn sẽ khám phá cấu trúc thư mục mặc định của một dự án Nuxt. Mỗi thư mục trong dự án Nuxt đều có vai trò riêng, giúp việc phát triển ứng dụng trở nên rõ ràng, dễ mở rộng và có tính tổ chức cao. Bạn sẽ được giới thiệu cách hoạt động của cơ chế tự động import, quy tắc đặt tên hợp lý, và thực hành tạo component và layout đầu tiên.

Mục tiêu bài học

• Hiểu rõ vai trò của từng thư mục chính trong Nuxt
• Biết cách đặt tên, quản lý file, và tận dụng auto-import
• Thực hành tạo component và layout đơn giản
• Sẵn sàng tổ chức dự án quy mô lớn một cách gọn gàng

Cấu trúc thư mục

1. Giới thiệu các thư mục chính trong Nuxt

2. Vai trò của mỗi thư mục trong quá trình phát triển

• pages/
  Mỗi file .vue tương ứng với một route. Sub-folder tạo nested route.
  Ví dụ: pages/about.vue → /about, pages/blog/index.vue → /blog

• components/
  Các component dùng nhiều nơi: Header, Footer, Button, Card...
  Nuxt hỗ trợ tự động import, không cần import Header from '../components/Header.vue'

• layouts/
  Layout bao quanh các page, dùng để chia bố cục trang (có thể có nhiều layout).
  Mặc định: layouts/default.vue, có thể tạo thêm auth.vue, admin.vue...

• assets/
  Dành cho CSS, SCSS, hoặc ảnh xử lý qua webpack/Vite. Ví dụ: assets/css/main.scss

• public/
  Truy cập trực tiếp qua URL. Ví dụ: public/logo.png → http://localhost:3000/logo.png

3. Quy tắc đặt tên và tự động import

• Component: đặt theo PascalCase hoặc kebab-case
  Ví dụ: components/BaseButton.vue → dùng <BaseButton /> trực tiếp
• Layout: đặt tên file tương ứng với tên layout
  layouts/default.vue, layouts/guest.vue
  Trong page: dùng definePageMeta({ layout: 'guest' })
• Auto-import:
  • Không cần import, Nuxt sẽ quét thư mục components/ và tự động dùng
  • Kể cả trong <script setup>, bạn cũng không cần khai báo thủ công

4. Thực hành: Thêm một component và một layout đơn giản

Bước 1: Tạo một component Header

components/SiteHeader.vue:

<template>
  <header class="bg-blue-500 text-white p-4 text-center">
    <h1>Khóa học Nuxt.js</h1>
  </header>
</template>

Bước 2: Tạo layout mặc định

layouts/default.vue:

<template>
  <div>
    <SiteHeader />
    <main class="p-4">
      <slot />
    </main>
  </div>
</template>

Layout là nơi định nghĩa khung sườn, trong đó <slot /> sẽ hiển thị nội dung của từng trang cụ thể.

Bước 3: Kiểm tra lại trang chủ

Trong pages/index.vue, bạn chỉ cần:

<template>
  <div>
    <p>Đây là nội dung trang chủ.</p>
  </div>
</template>

Chạy lại dự án và truy cập http://localhost:3000. Bạn sẽ thấy layout default bao quanh trang chủ, kèm theo component SiteHeader.

Kết luận

Cấu trúc thư mục rõ ràng và hợp lý là một trong những điểm mạnh của Nuxt. Bạn đã làm quen với các thư mục quan trọng như pages, components, layouts, assets và public, đồng thời hiểu được vai trò của từng phần trong quy trình phát triển. Bên cạnh đó, việc thực hành tạo layout và component cũng giúp bạn nắm chắc quy tắc hoạt động tự động của Nuxt – điều giúp lập trình trở nên gọn gàng và hiệu quả hơn.