Tổ chức component theo module hoặc chức năng

Khi dự án phát triển ngày càng lớn, việc tổ chức component một cách khoa học là điều bắt buộc để đảm bảo dễ quản lý, dễ mở rộng và dễ tái sử dụng. Trong bài học này, bạn sẽ học các cách tổ chức component theo tính năng hoặc module, cách chia nhỏ giao diện thành các phần logic rõ ràng, cũng như quy ước đặt tên giúp team làm việc đồng nhất hơn.

Tổ chức component theo module hoặc chức năng

1. Cách tổ chức component hiệu quả

Trong Nuxt, bạn có thể tổ chức component theo nhiều cách, nhưng phổ biến nhất là 2 hướng:

a. Theo tính năng (Feature-based)

Phù hợp với dự án lớn, mỗi tính năng (feature) có một thư mục riêng chứa các component liên quan:

components/
└── user/
    ├── UserCard.vue
    ├── UserForm.vue
└── product/
    ├── ProductList.vue
    ├── ProductItem.vue

• Ưu điểm: dễ nhóm theo business logic, dễ scale, dễ tìm kiếm.
• Khuyết điểm: một số component dùng chung sẽ nằm rải rác.

b. Theo loại component (Folder-based)

Phù hợp với dự án nhỏ hoặc team mới làm quen.

components/
├── forms/
├── cards/
├── buttons/
├── layout/

• Ưu điểm: dễ quản lý UI thành phần, thích hợp UI library nội bộ.
• Khuyết điểm: ít liên kết với nghiệp vụ, khó scale lớn.

2. Tách nhỏ UI thành các phần nhỏ dễ kiểm soát

Thay vì viết các component "quá khổ", hãy chia nhỏ thành:

• Component cha chứa logic chính và chia thành:
  • Component trình bày (presentation): hiển thị dữ liệu, nhận props.
  • Component chức năng (logic): xử lý sự kiện, gọi API, validate.

Ví dụ:

components/
└── blog/
    ├── BlogList.vue       # component chính
    ├── BlogItem.vue       # render từng bài viết
    ├── BlogSkeleton.vue   # loading state

Việc chia nhỏ giúp:

• Tái sử dụng BlogItem cho nhiều nơi khác nhau.
• Dễ test, dễ bảo trì.
• UI mượt hơn nhờ xử lý loading riêng.

3. Quy ước đặt tên và tái sử dụng

Một số nguyên tắc nên áp dụng:

• Tên component dạng PascalCase: UserCard.vue, BaseButton.vue
• Tên có tiền tố mô tả vai trò:
  • Base → component tái sử dụng chung (BaseInput, BaseModal)
  • App → các phần layout, layout-level (AppHeader, AppSidebar)
  • Feature → component theo module (UserCard, BlogPost)
• Tránh viết logic trong component nhỏ chỉ để dùng 1 lần → nên gộp lại hoặc bỏ vào logic composable nếu cần

4. Gợi ý cấu trúc thư mục components/ kết hợp

Dưới đây là một ví dụ kết hợp hai mô hình trên:

components/
├── base/              # component tái sử dụng toàn app
│   ├── BaseButton.vue
│   └── BaseInput.vue
├── layout/            # layout/section component
│   ├── AppHeader.vue
│   └── AppFooter.vue
├── user/              # module người dùng
│   ├── UserCard.vue
│   ├── UserForm.vue
└── blog/              # module blog
    ├── BlogList.vue
    └── BlogItem.vue

Kết luận

Việc tổ chức component hợp lý giúp bạn và team phát triển dự án hiệu quả hơn, tránh lặp lại code, dễ mở rộng và bảo trì. Trong bài này, bạn đã học cách tổ chức component theo tính năng hoặc loại, biết cách chia nhỏ UI và đặt tên theo quy ước rõ ràng. Những kỹ thuật này là nền tảng để xây dựng ứng dụng có cấu trúc tốt, dễ phát triển lâu dài