Tạo component tái sử dụng

Component là đơn vị xây dựng UI quan trọng trong bất kỳ ứng dụng Vue/Nuxt nào. Trong Nuxt 3, việc tạo và sử dụng component trở nên cực kỳ tiện lợi nhờ vào auto-import và khả năng tổ chức linh hoạt. Bài học này sẽ giúp bạn nắm được cách tạo component đơn giản, áp dụng các nguyên tắc thiết kế tái sử dụng, và thực hành với các component phổ biến như nút bấm, thẻ nội dung (card), và thông báo (alert).

Tạo component tái sử dụng

1. Cách tạo component mới trong thư mục components/

Tất cả component nên được đặt trong thư mục components/. Nuxt sẽ tự động nhận diện và import các file trong thư mục này (auto-import).

Ví dụ: tạo một nút tái sử dụng:

components/BaseButton.vue

<template>
  <button
    class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
    @click="$emit('click')"
  >
    <slot />
  </button>
</template>

Lưu ý: Component sẽ được tự động import, bạn không cần import BaseButton from ...

2. Các nguyên tắc viết component tái sử dụng

Để một component dễ tái sử dụng, cần tuân theo các nguyên tắc sau:

• Tối ưu đầu vào (Props): Cho phép tùy biến nội dung, màu sắc, trạng thái...
• Tối ưu đầu ra (Emit): Cho phép component gửi sự kiện ra ngoài (ví dụ: click, submit)
• Dùng slot để truyền nội dung động
• Tránh hardcode, sử dụng props mặc định hợp lý

Ví dụ cải tiến BaseButton với props:

<script setup>
defineProps({
  color: { type: String, default: 'blue' },
  size: { type: String, default: 'md' }
})
</script>

<template>
  <button
    :class="[
      'text-white rounded transition',
      color === 'blue' ? 'bg-blue-600 hover:bg-blue-700' : 'bg-gray-600 hover:bg-gray-700',
      size === 'sm' ? 'px-2 py-1 text-sm' : 'px-4 py-2 text-base'
    ]"
    @click="$emit('click')"
  >
    <slot />
  </button>
</template>

3. Thực hành: tạo các component phổ biến

a. Alert – Thông báo

components/BaseAlert.vue

<script setup>
defineProps({
  type: { type: String, default: 'info' }
})
</script>

<template>
  <div :class="{
    'p-4 rounded': true,
    'bg-blue-100 text-blue-800': type === 'info',
    'bg-red-100 text-red-800': type === 'error',
    'bg-green-100 text-green-800': type === 'success'
  }">
    <slot />
  </div>
</template>

b. Card – Thẻ nội dung

components/BaseCard.vue

<template>
  <div class="border rounded shadow-sm p-4 bg-white">
    <slot name="title" />
    <div class="mt-2">
      <slot />
    </div>
  </div>
</template>

Sử dụng trong page:

<BaseCard>
  <template #title>
    <h2 class="text-xl font-bold">Tiêu đề</h2>
  </template>
  Nội dung card đơn giản.
</BaseCard>

Kết luận bài học

Trong bài này, bạn đã học cách tạo component trong Nuxt 3, hiểu được cơ chế auto-import và cách tổ chức component hiệu quả. Bằng việc áp dụng các nguyên tắc tái sử dụng – như sử dụng props, emit và slot – bạn có thể xây dựng các UI thành phần linh hoạt, dễ bảo trì và sử dụng lại. Các ví dụ thực hành như nút bấm, alert và card là nền tảng để bạn mở rộng ra các component phức tạp hơn trong dự án thực tế.