Trong Vue.js, "fragments" là một tính năng cho phép bạn nhóm các phần tử con của một thành phần mà không cần bọc chúng trong một phần tử HTML cha. Điều này giúp làm cho mã của bạn gọn gàng hơn và tránh tạo ra các phần tử HTML không cần thiết trong DOM.

Trước khi fragments được giới thiệu, nếu bạn muốn trả về nhiều phần tử từ một thành phần Vue.js, bạn phải bọc chúng trong một phần tử HTML cha, thường là một div. Ví dụ:

<template>
  <div>
    <h1>Tiêu đề</h1>
    <p>Nội dung</p>
  </div>
</template>​

Tuy nhiên, với fragments, bạn có thể trả về nhiều phần tử mà không cần phải bọc chúng trong một phần tử cha. Điều này giúp giảm bớt các phần tử không cần thiết trong DOM. Ví dụ với fragments:

<template>
  <!-- Fragments -->
  <>
    <h1>Tiêu đề</h1>
    <p>Nội dung</p>
  </>
</template>​

Hoặc bạn có thể sử dụng cú pháp <template> mà không cần phải khai báo tên của thành phần chaHoặc không cần bọc bất cứ element nào , Vue đã tự động định nghĩa cho chúng ta:

<template>
  <!-- Fragments sử dụng <template> -->
  <template>
    <h1>Tiêu đề</h1>
    <p>Nội dung</p>
  </template>​
</template>

<template>
  <h1>Tiêu đề</h1>
  <p>Nội dung</p>
</template>

Điều này rất hữu ích khi bạn muốn trả về nhiều phần tử mà không muốn thêm các phần tử không cần thiết vào DOM. Fragments giúp mã của bạn trở nên gọn gàng và dễ đọc hơn trong các trường hợp như vậy.