Tự động import component

Một trong những ưu điểm nổi bật của Nuxt là cơ chế tự động import component, giúp bạn tiết kiệm thời gian và giảm boilerplate khi xây dựng giao diện. Trong bài này, bạn sẽ tìm hiểu cách hoạt động của tính năng auto-import, cách cấu hình trong nuxt.config.ts, cũng như tổ chức thư mục components/ sao cho Nuxt có thể tự động nhận diện các component một cách thông minh.

Tự động import component

1. Cơ chế auto-import trong Nuxt

Nuxt 3 cung cấp sẵn tính năng tự động import component từ thư mục components/.

• Bạn không cần dùng import thủ công trong <script setup> hoặc <template>.
• Chỉ cần đặt file .vue đúng trong components/ là Nuxt sẽ nhận diện được.

Ví dụ:

components/BaseButton.vue

<template>
  <button class="bg-blue-500 text-white px-4 py-2 rounded">
    <slot />
  </button>
</template>

Dùng trực tiếp trong bất kỳ file nào:

<BaseButton>Click Me</BaseButton>

Không cần import BaseButton from '~/components/BaseButton.vue'

2. Bật/tùy chỉnh auto-import trong nuxt.config.ts

Theo mặc định, Nuxt bật auto-import với components: true. Bạn có thể tùy chỉnh như sau:

// nuxt.config.ts
export default defineNuxtConfig({
  components: true // hoặc cấu hình chi tiết hơn
})

Tùy chọn nâng cao

components: [
  {
    path: '~/components',
    pathPrefix: false
  }
]

• pathPrefix: false → không cần prefix theo thư mục khi gọi component.

3. Tổ chức thư mục con trong components/

Bạn có thể chia nhỏ component theo thư mục con, Nuxt sẽ tự xử lý:

components/
├── base/
│   ├── BaseInput.vue
│   └── BaseButton.vue
├── user/
│   └── UserCard.vue

Cách Nuxt xử lý tên component

• BaseButton.vue → dùng <BaseButton />
• user/UserCard.vue → dùng <UserCard /> (nếu pathPrefix: false)
• Nếu không, sẽ phải gọi là <UserUserCard />

Cấu trúc thư mục càng rõ ràng, component càng dễ dùng.

4. Thực hành: Thêm component và dùng trực tiếp

Bước 1: Tạo file components/alert/AlertBox.vue

<template>
  <div class="p-4 border-l-4 bg-yellow-100 border-yellow-500 text-yellow-700">
    <slot />
  </div>
</template>

Bước 2: Dùng ngay trong page:

<template>
  <AlertBox>
    Đây là một thông báo cảnh báo!
  </AlertBox>
</template>

Không cần import gì cả.

Kết luận

Tự động import component là một tính năng cực kỳ hữu ích giúp tiết kiệm thời gian và giảm rườm rà khi làm việc với nhiều component. Trong bài này, bạn đã hiểu cách hoạt động của auto-import, cách cấu hình trong nuxt.config.ts, và cách tổ chức thư mục components/ để Nuxt tự động nhận diện chính xác. Khi áp dụng tốt, bạn sẽ có một dự án gọn gàng, hiệu suất làm việc cao hơn và dễ mở rộng.