@intlayer/docs 9.5.6 → 9.5.7

package/blog/vi/vue-i18n_vs_intlayer-vue-i18n.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "vue-i18n vs @intlayer/vue-i18n: API Giống Nhau, Bundle Khác"
 description: Những thay đổi khi một ứng dụng Vue 3 giữ các lệnh gọi vue-i18n của nó nhưng phục vụ chúng qua bộ điều hợp tương thích @intlayer/vue-i18n. JavaScript mỗi trang, kích thước runtime, kích thước thành phần và rò rỉ được đo lường trên cùng một mã Vite + Vue, cộng với những gì bộ điều hợp giữ lại, bỏ qua và không thể thay thế.
 keywords:
@@ -25,6 +25,8 @@ author: aymericzip
 
 # vue-i18n VS @intlayer/vue-i18n | API Giống Nhau, Bundle Khác
 
+![Vue i18n library ecosystem](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
 `@intlayer/vue-i18n` là một compat adapter: nó expose API của `vue-i18n` (`createI18n`, `useI18n`, `t()`, `d()`, `n()`, `$t`, `v-t`, `i18n.global.locale`...) và phục vụ nó từ các dictionaries được biên dịch bởi Intlayer. Các file `.vue` của bạn không thay đổi. Cái mà `t("footer.github")` được bind tới thì có.
 
 Bài viết này đo lường việc thay thế đó trên cùng một ứng dụng Vite + Vue 3, được xây dựng một lần với `vue-i18n` và một lần với adapter. Các con số đến từ [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom). Để so sánh `vue-i18n` và Intlayer như các thư viện, hãy đọc [vue-i18n vs Intlayer](https://intlayer.org/blog/vue-i18n-vs-intlayer) và [benchmark vue-i18n vs Intlayer](https://intlayer.org/blog/vue-i18n-vs-intlayer-benchmark). Bài này nói về những gì adapter thay đổi khi bạn giữ các component của mình như cũ.
@@ -105,6 +107,10 @@ Cả hai đều được xây dựng trong cấu hình **tĩnh**, cấu hình m
 
 ### Kết quả trên Vite + Vue 3
 
+Chọn số liệu và thư viện mà bạn quan tâm:
+
+<I18nBenchmark framework="vite-vue" vertical/>
+
 | Setup                    | Strategy | Lib size (gz) | Lib size (min) | Page JS avg (gz) | Locale leak | Page leak | Component avg (gz) | E2E reactivity |  Page load |
 | ------------------------ | -------- | ------------: | -------------: | ---------------: | ----------: | --------: | -----------------: | -------------: | ---------: |
 | **base** (no i18n)       | -        |        0.0 KB |         0.0 KB |          41.3 KB |        0.0% |         - |             1.1 KB |         1.8 ms |    10.8 ms |
@@ -124,11 +130,24 @@ Cả hai đều được xây dựng trong cấu hình **tĩnh**, cấu hình m
 - **Reactivity và page load.** Chuyển đổi locale rẻ tiền cho cả hai (1.5-2.8 ms); hệ thống reactivity của Vue làm cho nó diễn ra một khi các message đã ở trong bộ nhớ. Page load giảm từ 13.6 ms xuống **9.3 ms**, phù hợp với 88 KB JavaScript ít hơn để phân tích.
 - **Về các hàng gốc.** `vue-intlayer` trong lần chạy này đã đóng gói mọi locale ở chế độ `static` và đạt 57.1 KB với runtime 3.9 KB; các từ điển đồng bộ của adapter mang ít chuỗi locale ngoài hơn, do đó con số trên mỗi trang thấp hơn. Runtime gốc vẫn là nhẹ nhất trong ba cái, và mô hình `.content.ts` của nó là nơi các khối `<i18n>` SFC tìm thấy tương đương của chúng.
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Bảng đầy đủ, từng thư viện và từng chiến lược, trong [báo cáo benchmark Vue](https://intlayer.org/vi/doc/benchmark/vue).
+
 ## Tại sao các số liệu thay đổi
 
+![The Intlayer compiler extracts content from components](https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.webp?raw=true)
+
 Không có gì thay đổi trong `src/components/`, vì vậy những lợi ích đến từ những gì `useI18n` được ràng buộc với.
 
-**Với `vue-i18n`**, binding là global instance. `createI18n({ messages: { en, fr, ... } })` là một import chứa toàn bộ; mọi component gọi `useI18n()` đều có thể truy cập tất cả nó, vì vậy bundler không thể split dưới instance. Tối ưu hóa có nghĩa là _bạn_ phải split `en.json` theo route, gọi `setLocaleMessage()` trong router guard, và giữ route-to-file map chính xác khi components di chuyển.
+**Với `vue-i18n`**, binding là global instance. `createI18n({ messages: { en, fr, ... } })` là một import chứa toàn bộ; mọi component gọi `useI18n()` đều có thể truy cập tất cả nó, vì vậy bundler không thể split dưới instance. Tối ưu hóa có nghĩa là _bạn_ phải split `en.json` theo route, gọi `setLocaleMessage()` trong router guard, và giữ route-to-file map chính xác khi components di chuyển. Sự lãng phí gia tăng trên cả hai trục cùng một lúc, trang và ngôn ngữ:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
 
 ```bash
 .
@@ -258,26 +277,107 @@ export const i18n = createI18n({ locale: "en" });
 
 ## Những giới hạn cần biết trước khi bắt đầu
 
-- **Các khối SFC `<i18n>` không được đọc.** Nếu các tin nhắn của bạn nằm bên trong các component, chúng cần được di chuyển đến các file locale (hoặc đến `.content.ts`, đó là ý tưởng tương tự nhưng có kiểu dữ liệu).
-- **Tải tin nhắn trong thời gian chạy không còn nữa.** `setLocaleMessage()` và `mergeLocaleMessage()` cảnh báo và trả về. Các bản dịch được tìm nạp từ CMS trong thời gian chạy cần Intlayer's CMS hoặc các lệnh `intlayer pull` / `push`.
-- **`messages` là một fallback, không miễn phí.** Giữ lại các import JSON trong `createI18n()` sẽ giữ 75 KB trong bundle. Xóa chúng khi `intlayer test` vượt qua.
-- **Adapter không phải là runtime gốc.** 7.9 KB so với 3.9 KB cho `vue-intlayer`. Khi mọi component đã chuyển sang `useIntlayer`, hãy loại bỏ nó.
+<AccordionGroup>
+<Accordion header="Các khối SFC <i18n> không được đọc">
+
+Nếu các tin nhắn của bạn nằm bên trong các component, chúng cần được chuyển sang các tệp ngôn ngữ hoặc sang `.content.ts`, cùng ý tưởng với các kiểu được tạo tự động.
+
+</Accordion>
+<Accordion header="Tải tin nhắn tại runtime đã bị loại bỏ">
+
+`setLocaleMessage()` và `mergeLocaleMessage()` đưa ra cảnh báo và trả về. Bản dịch được lấy từ CMS tại runtime cần [Intlayer CMS](https://intlayer.org/vi/doc/concept/cms) hoặc các lệnh `intlayer pull` / `push`.
+
+</Accordion>
+<Accordion header="messages là phương án dự phòng, không miễn phí">
+
+Việc giữ các import JSON trong `createI18n()` vẫn giữ 75 KB trong bundle. Hãy xóa chúng khi `intlayer test` thành công.
+
+</Accordion>
+<Accordion header="Adapter không phải là runtime gốc">
+
+7.9 KB so với 3.9 KB của `vue-intlayer`. Khi mọi component đã chuyển sang `useIntlayer`, hãy gỡ bỏ nó.
+
+</Accordion>
+</AccordionGroup>
 
 ## Khi nào sử dụng cái nào?
 
-- **Ở lại trên `vue-i18n`** nếu ứng dụng của bạn phụ thuộc vào các khối SFC `<i18n>`, vào các luồng `setLocaleMessage()` runtime, hoặc nếu 90 KB cho mỗi trang không phải là mối quan tâm cho khán giả của bạn.
-- **Sử dụng `@intlayer/vue-i18n`** nếu bạn đang dùng `vue-i18n` và muốn giảm 88 KB, các component nhỏ hơn 23 lần, 0% page leakage, các key được gõ và kiểm tra CI mà không cần chỉnh sửa tệp `.vue`. Đây là điểm vào cho một codebase `vue-i18n` hiện có.
-- **Đi native (`vue-intlayer`)** cho các dự án mới, hoặc khi adapter đã hoàn thành công việc của nó. Nó có runtime nhẹ nhất (3.9 KB) và mô hình `.content.ts` cho từng component thay thế các khối `<i18n>` bằng nội dung được gõ.
+<AccordionGroup>
+<Accordion header="Ở lại với vue-i18n">
+
+Ứng dụng của bạn phụ thuộc vào các khối SFC `<i18n>`, quy trình `setLocaleMessage()` tại runtime hoặc 90 KB mỗi trang không phải là vấn đề đối với người dùng của bạn.
+
+</Accordion>
+<Accordion header="Sử dụng @intlayer/vue-i18n">
+
+Bạn đang dùng `vue-i18n` và muốn tiết kiệm 88 KB, component nhỏ hơn 23 lần, 0% rò rỉ trang, khóa có định kiểu và kiểm tra CI mà không cần chỉnh sửa tệp `.vue`. Đây là điểm khởi đầu cho codebase `vue-i18n` hiện có.
+
+</Accordion>
+<Accordion header="Chuyển sang native (vue-intlayer)">
+
+Dành cho các dự án mới hoặc khi adapter đã hoàn thành nhiệm vụ. Nó có runtime nhẹ nhất (3.9 KB) và mô hình `.content.ts` cho từng component thay thế các khối `<i18n>` bằng nội dung có định kiểu. Bắt đầu với [Intlayer với Vue](https://intlayer.org/vi/doc/environment/vite-and-vue) hoặc [với Nuxt](https://intlayer.org/vi/doc/environment/nuxt-and-vue).
+
+</Accordion>
+</AccordionGroup>
+
+## Câu hỏi thường gặp
+
+<FAQ>
+
+<Question title="Tôi có phải chỉnh sửa các tệp .vue của mình không?">
+
+Không. Bản build benchmark chỉ thay đổi `vite.config.ts`, `intlayer.config.ts` và một dòng trong `src/i18n.ts`, import `messages`. Mọi vị trí gọi `useI18n()`, `$t`, `v-t` và Options API đều được giữ nguyên.
+
+</Question>
+
+<Question title="Tại sao kích thước component lại nhỏ hơn 23 lần?">
+
+Bởi vì `useI18n()` không còn truy cập vào instance toàn cục. `createI18n({ messages })` chứa tất cả tin nhắn của mọi ngôn ngữ, do đó một component được biên dịch riêng lẻ sẽ kéo theo 196 KB. Với adapter, nó chỉ truy cập từ điển của riêng mình: 8.4 KB.
+
+</Question>
+
+<Question title="Định dạng d() và n() thì sao?">
+
+Được giữ nguyên. Các cấu hình `datetimeFormats` và `numberFormats` được truyền vào `createI18n()` đều được tuân thủ, hỗ trợ bởi API `Intl` gốc. Xem [định dạng ngày, giờ và số](https://intlayer.org/vi/blog/date-time-number-formatting-locales).
+
+</Question>
+
+<Question title="Nó có hoạt động với Nuxt không?">
+
+`@intlayer/vue-i18n` nhắm tới Vite + Vue. Đối với `@nuxtjs/i18n`, hãy sử dụng [adapter tương thích Nuxt i18n](https://intlayer.org/vi/doc/compatibility/nuxtjs-i18n) và xem [Intlayer với Nuxt](https://intlayer.org/vi/doc/environment/nuxt-and-vue) để thiết lập native.
+
+</Question>
+
+<Question title="Tôi có thể di chuyển từng component một không?">
+
+Có. Bất kỳ component nào cũng có thể chuyển từ `useI18n()` sang `useIntlayer("footer")` với tệp nội dung được đặt cùng vị trí. Các từ điển JSON và `.content.ts` cùng tồn tại và hợp nhất.
+
+</Question>
+
+</FAQ>
 
 ## Những so sánh liên quan
 
-- [vue-i18n vs Intlayer](https://intlayer.org/blog/vue-i18n-vs-intlayer) (tính năng và DX)
-- [vue-i18n vs Intlayer benchmark](https://intlayer.org/blog/vue-i18n-vs-intlayer-benchmark) (các thư viện, cùng benchmark)
-- [next-intl vs @intlayer/next-intl](https://intlayer.org/blog/next-intl-vs-intlayer-next-intl) (cùng chuỗi adapter)
-- [i18next vs @intlayer/i18next](https://intlayer.org/blog/i18next-vs-intlayer-i18next) (cùng chuỗi adapter)
-- [Lingui vs @intlayer/lingui](https://intlayer.org/blog/lingui-vs-intlayer-lingui) (cùng chuỗi adapter)
-- [Hướng dẫn di chuyển: vue-i18n to Intlayer](https://intlayer.org/doc/migration/vue-i18n)
-- [Tài liệu tham khảo bộ chuyển đổi tương thích: vue-i18n](https://intlayer.org/doc/compatibility/vue-i18n), [Nuxt i18n](https://intlayer.org/doc/compatibility/nuxtjs-i18n)
+Cùng loạt adapter:
+
+- [next-intl vs @intlayer/next-intl](https://intlayer.org/vi/blog/next-intl-vs-intlayer-next-intl)
+- [i18next vs @intlayer/i18next](https://intlayer.org/vi/blog/i18next-vs-intlayer-i18next)
+- [Lingui vs @intlayer/lingui](https://intlayer.org/vi/blog/lingui-vs-intlayer-lingui)
+
+Các thư viện được so sánh trực tiếp:
+
+- [vue-i18n vs Intlayer](https://intlayer.org/vi/blog/vue-i18n-vs-intlayer), features and DX
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/vi/blog/vue-i18n-vs-intlayer-benchmark)
+- [Is vue-i18n outdated?](https://intlayer.org/vi/blog/is-vue-i18n-outdated)
+- [How to pick a Vue i18n library](https://intlayer.org/vi/blog/how-to-pick-vue-i18n-library)
+
+Tài liệu tham khảo:
+
+- [Compat adapter: vue-i18n](https://intlayer.org/vi/doc/compatibility/vue-i18n) and [Nuxt i18n](https://intlayer.org/vi/doc/compatibility/nuxtjs-i18n)
+- [Hướng dẫn di chuyển: vue-i18n sang Intlayer](https://intlayer.org/vi/doc/migration/vue-i18n)
+- [Báo cáo benchmark Vue](https://intlayer.org/vi/doc/benchmark/vue)
+- [Tối ưu hóa bundle](https://intlayer.org/vi/doc/concept/bundle-optimization) và [trình biên dịch Intlayer](https://intlayer.org/vi/doc/compiler)
+- [Visual Editor](https://intlayer.org/vi/doc/concept/editor), [CMS](https://intlayer.org/vi/doc/concept/cms) và [dịch thuật AI](https://intlayer.org/vi/doc/concept/auto-fill)
 
 ## Kết luận
 
@@ -285,4 +385,4 @@ export const i18n = createI18n({ locale: "en" });
 
 Tất cả dữ liệu thô, các ứng dụng thử nghiệm và các script đều có trong [kho lưu trữ Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom). Chạy nó bằng chính bạn.
 
-Tham khảo [tài liệu 'Why Intlayer?'](https://intlayer.org/doc/why) để biết thêm chi tiết.
+Tham khảo [tài liệu 'Why Intlayer?'](https://intlayer.org/vi/doc/why) để biết thêm chi tiết.

package/blog/vi/vue-i18n_vs_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-11
-updatedAt: 2025-08-23
+updatedAt: 2026-09-22
 title: vue-i18n vs Intlayer
 description: So sánh vue-i18n với Intlayer cho quốc tế hóa (i18n) trong ứng dụng Vue/Nuxt
 keywords:
@@ -20,6 +20,8 @@ author: aymericzip
 
 # vue-i18n VS Intlayer | Quốc tế hóa Vue (i18n)
 
+![Vue i18n library ecosystem](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
 Hướng dẫn này so sánh hai lựa chọn i18n phổ biến cho **Vue 3** (và **Nuxt**): **vue-i18n** và **Intlayer**.
 Chúng tôi tập trung vào công cụ Vue hiện đại (Vite, Composition API) và đánh giá:
 
@@ -40,6 +42,30 @@ Chúng tôi tập trung vào công cụ Vue hiện đại (Vite, Composition API
 - **vue-i18n** - Thư viện i18n tiêu chuẩn cho Vue. Định dạng thông điệp linh hoạt (theo kiểu ICU), các khối SFC `<i18n>` cho thông điệp cục bộ, và hệ sinh thái rộng lớn. Việc đảm bảo an toàn và bảo trì quy mô lớn chủ yếu phụ thuộc vào bạn.
 - **Intlayer** - Mô hình nội dung tập trung vào component cho Vue/Vite/Nuxt với **kiểu TS nghiêm ngặt**, **kiểm tra trong thời gian build**, **tree-shaking**, **bộ trợ giúp router & SEO**, tùy chọn **Trình chỉnh sửa trực quan/CMS**, và **dịch thuật hỗ trợ AI**.
 
+## Chi phí trong thời gian build
+
+Trước bảng tính năng, phần đo lường thực tế. [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) xây dựng cùng một ứng dụng Vite + Vue 3 (10 trang, 10 ngôn ngữ) với từng thư viện và ghi lại những gì trình duyệt tải về:
+
+<I18nBenchmark framework="vite-vue" vertical/>
+
+| Setup                | Lib size (gz) | Page JS avg (gz) | Page leak | Component avg (gz) |
+| -------------------- | ------------: | ---------------: | --------: | -----------------: |
+| **base** (no i18n)   |        0.0 KB |          41.3 KB |         - |             1.1 KB |
+| `vue-i18n`           |       24.3 KB |         134.9 KB |     90.0% |           196.0 KB |
+| `@intlayer/vue-i18n` |        7.9 KB |          47.0 KB |      0.0% |             8.4 KB |
+| **`vue-intlayer`**   |    **3.9 KB** |      **57.1 KB** |  **0.0%** |         **7.7 KB** |
+
+Riêng runtime `vue-i18n` đã nặng gấp **6 lần** Intlayer, mỗi trang tải **90% chuỗi ký tự của các trang khác**, và một component được biên dịch riêng lẻ kéo theo **196 KB** vì `useI18n()` liên kết nó với toàn bộ cây thông điệp toàn cục. Kết quả đầy đủ với thời gian phản hồi và tải trang có trong [benchmark vue-i18n vs Intlayer](https://intlayer.org/vi/blog/vue-i18n-vs-intlayer-benchmark).
+
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Bảng đầy đủ trong [báo cáo benchmark Vue](https://intlayer.org/vi/doc/benchmark/vue).
+
 ## So sánh tính năng song song (tập trung vào Vue)
 
 | Tính năng                                             | **Intlayer**                                                                         | **vue-i18n**                                                               |
@@ -65,59 +91,74 @@ Chúng tôi tập trung vào công cụ Vue hiện đại (Vite, Composition API
 
 ## So sánh chi tiết
 
-### 1) Kiến trúc & khả năng mở rộng
+<AccordionGroup>
+<Accordion header="1) Kiến trúc và khả năng mở rộng">
 
-- **vue-i18n**: Các thiết lập phổ biến sử dụng **danh mục tập trung** theo từng locale (có thể chia nhỏ thành các file/namespace). Các block SFC `<i18n>` cho phép thông điệp cục bộ nhưng các nhóm thường quay lại dùng danh mục chia sẻ khi dự án phát triển.
+- **vue-i18n**: Các thiết lập phổ biến sử dụng **danh mục tập trung** theo từng locale (có thể chia nhỏ thành các file/namespace). Các block SFC `<i18n>` cho phép thông điệp cục bộ nhưng các nhóm thường quay lại dùng danh mục chia sẻ khi dự án phát triển. Xem [i18n theo component vs tập trung](https://intlayer.org/vi/blog/per-component-vs-centralized-i18n).
 - **Intlayer**: Khuyến khích **từ điển theo từng component** được lưu trữ bên cạnh component mà nó phục vụ. Điều này giảm xung đột giữa các nhóm, giữ cho nội dung dễ tìm kiếm và tự nhiên giới hạn sự lệch pha/các khóa không sử dụng.
 
 **Tại sao điều này quan trọng:** Trong các ứng dụng Vue lớn hoặc hệ thống thiết kế, **nội dung mô-đun** mở rộng tốt hơn so với các danh mục đơn khối.
 
-### 2) TypeScript & an toàn
+</Accordion>
+<Accordion header="2) TypeScript và độ an toàn kiểu">
 
 - **vue-i18n**: Hỗ trợ TS tốt; **kiểu khóa nghiêm ngặt** thường cần các schema/generic tùy chỉnh và quy ước cẩn thận.
 - **Intlayer**: **Tạo kiểu nghiêm ngặt** từ nội dung của bạn, cung cấp **tự động hoàn thành trong IDE** và **lỗi biên dịch** cho lỗi chính tả hoặc thiếu key.
 
 **Tại sao điều này quan trọng:** Kiểu dữ liệu mạnh giúp phát hiện lỗi **trước** khi chạy.
 
-### 3) Xử lý dịch thiếu
+</Accordion>
+<Accordion header="3) Xử lý bản dịch bị thiếu">
 
-- **vue-i18n**: Cảnh báo/fallback **thời gian chạy** (ví dụ, fallback locale hoặc key).
-- **Intlayer**: Phát hiện **thời gian xây dựng** với cảnh báo/lỗi trên các locale và key.
+- **vue-i18n**: Cảnh báo/fallback **thời gian chạy** (ví dụ, fallback locale hoặc key). Xem [phát hiện bản dịch bị thiếu](https://intlayer.org/vi/blog/detecting-missing-translations).
+- **Intlayer**: Phát hiện **thời gian xây dựng** với cảnh báo/lỗi trên các locale và key., cộng thêm `npx intlayer test` trong CI.
 
 **Tại sao điều này quan trọng:** Việc kiểm soát thời gian xây dựng giữ cho giao diện sản phẩm sạch và nhất quán.
 
-### 4) Chiến lược định tuyến & URL (Vue Router/Nuxt)
+</Accordion>
+<Accordion header="4) Chiến lược định tuyến và URL (Vue Router/Nuxt)">
 
-- **Cả hai** đều có thể làm việc với các route được địa phương hóa.
+- **Cả hai** đều có thể làm việc với các route được địa phương hóa. Xem [hướng dẫn hreflang](https://intlayer.org/vi/blog/hreflang-guide-multilingual-seo).
 - **Intlayer** cung cấp các trợ giúp để **tạo đường dẫn có địa phương hóa**, **quản lý tiền tố ngôn ngữ**, và phát ra **`<link rel="alternate" hreflang>`** cho SEO. Với Nuxt, nó bổ sung cho hệ thống định tuyến của framework.
 
 **Tại sao điều này quan trọng:** Ít lớp kết dính tùy chỉnh hơn và **SEO sạch hơn** trên các ngôn ngữ.
 
-### 5) Hiệu năng & hành vi tải
+</Accordion>
+<Accordion header="5) Hiệu suất và hành vi tải">
 
-- **vue-i18n**: Hỗ trợ thông điệp ngôn ngữ bất đồng bộ; việc tránh đóng gói quá mức là do bạn (chia catalog cẩn thận).
+- **vue-i18n**: Hỗ trợ thông điệp ngôn ngữ bất đồng bộ; việc tránh đóng gói quá mức là do bạn (chia catalog cẩn thận). Benchmark ở trên minh chứng bằng số liệu: 134.9 KB so với 57.1 KB mỗi trang.
 - **Intlayer**: **Tree-shake** khi build và **tải lười theo từ điển/ngôn ngữ**. Nội dung không dùng sẽ không được đóng gói.
 
 **Tại sao điều này quan trọng:** Gói nhỏ hơn và khởi động nhanh hơn cho các ứng dụng Vue đa ngôn ngữ.
 
-### 6) Trải nghiệm nhà phát triển & công cụ hỗ trợ
+</Accordion>
+<Accordion header="6) Trải nghiệm nhà phát triển và công cụ">
 
 - **vue-i18n**: Tài liệu và cộng đồng trưởng thành; bạn thường sẽ dựa vào **các nền tảng địa phương hóa bên ngoài** cho quy trình biên tập.
-- **Intlayer**: Cung cấp **Trình chỉnh sửa trực quan miễn phí**, **CMS** tùy chọn (thân thiện với Git hoặc tách rời), một **tiện ích mở rộng VSCode**, các tiện ích **CLI/CI**, và **dịch hỗ trợ AI** sử dụng khóa nhà cung cấp của riêng bạn.
+- **Intlayer**: Cung cấp **Trình chỉnh sửa trực quan miễn phí**, **CMS** tùy chọn (thân thiện với Git hoặc tách rời), một **tiện ích mở rộng VSCode**, các tiện ích **CLI/CI**, và **dịch hỗ trợ AI** sử dụng khóa nhà cung cấp của riêng bạn., một **máy chủ MCP**
 
 **Tại sao điều này quan trọng:** Giảm chi phí vận hành và rút ngắn vòng lặp phát triển – nội dung.
 
-### 7) SEO, SSR & SSG
+</Accordion>
+<Accordion header="7) SEO, SSR và SSG">
 
-- **Cả hai** đều hoạt động với Vue SSR và Nuxt.
+- **Cả hai** đều hoạt động với Vue SSR và Nuxt. Xem [quốc tế hóa và SEO](https://intlayer.org/vi/blog/SEO-and-i18n).
 - **Intlayer**: Thêm các **trợ giúp SEO** (sơ đồ trang web/metadata/`hreflang`) không phụ thuộc vào framework và hoạt động tốt với các bản build Vue/Nuxt.
 
 **Tại sao điều này quan trọng:** SEO quốc tế mà không cần cấu hình phức tạp.
 
+</Accordion>
+</AccordionGroup>
+
 ## Tại sao chọn Intlayer? (Vấn đề & cách tiếp cận)
 
+![Centralized catalogs versus per-component dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/assets/project_stucture_18n_vs_intlayer.png?raw=true)
+
 Hầu hết các bộ công cụ i18n (bao gồm **vue-i18n**) bắt đầu từ các **danh mục tập trung**:
 
+<Tabs defaultTab="per-locale" group="catalog">
+<Tab label="Một tệp cho mỗi ngôn ngữ" value="per-locale">
+
 ```bash
 .
 ├── locales
@@ -129,7 +170,8 @@ Hầu hết các bộ công cụ i18n (bao gồm **vue-i18n**) bắt đầu từ
         └── MyComponent.vue
 ```
 
-Hoặc với các thư mục theo từng locale:
+</Tab>
+<Tab label="Một thư mục cho mỗi ngôn ngữ" value="per-folder">
 
 ```bash
 .
@@ -148,6 +190,34 @@ Hoặc với các thư mục theo từng locale:
         └── MyComponent.vue
 ```
 
+</Tab>
+</Tabs>
+
+Thư mục đó liên tục phình to, một namespace cho mỗi tính năng, ở mọi ngôn ngữ:
+
+```txt
+locales
+├── EN
+│   ├── blog.json
+│   ├── about.json
+│   ├── auth.json
+│   ├── blog.json
+│   ├── cart.json
+│   ├── categories.json
+│   ├── contact.json
+│   ├── dashboard.json
+│   ├── errors.json
+│   ├── faq.json
+│   ├── footer.json
+│   ├── form.json
+│   ├── home.json
+│   ├── language.json
+│   ├── navbar.json
+│   ├── ... 65 files
+│   └── validation.json
+└── ES
+```
+
 Điều này thường làm chậm phát triển khi ứng dụng ngày càng lớn:
 
 1. **Đối với một component mới** bạn tạo/sửa các catalog từ xa, kết nối namespace, và dịch (thường bằng cách sao chép/dán thủ công từ các công cụ AI).
@@ -163,7 +233,33 @@ Hoặc với các thư mục theo từng locale:
         └── MyComponent.vue
 ```
 
-**Khai báo nội dung** (theo từng component):
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="vue-i18n" value="vue-i18n">
+
+```json fileName="./locales/en.json"
+{
+  "componentExample": {
+    "greeting": "Hello World"
+  }
+}
+```
+
+```vue fileName="./components/MyComponent.vue"
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <span>{{ t("componentExample.greeting") }}</span>
+</template>
+```
+
+Mỗi tệp ngôn ngữ phải được chỉnh sửa thủ công và khóa chỉ là một chuỗi thuần túy: một lỗi chính tả sẽ hiển thị dưới dạng `componentExample.greting` trên môi trường production.
+
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="./components/MyComponent/myComponent.content.ts"
 import { t, type Dictionary } from "intlayer";
@@ -173,8 +269,8 @@ const componentExampleContent = {
   content: {
     greeting: t({
       en: "Hello World",
-      es: "Hola Mundo",
       fr: "Bonjour le monde",
+      es: "Hola Mundo",
     }),
   },
 } satisfies Dictionary;
@@ -182,11 +278,10 @@ const componentExampleContent = {
 export default componentExampleContent;
 ```
 
-**Sử dụng trong Vue** (Composition API):
-
 ```vue fileName="./components/MyComponent/MyComponent.vue"
 <script setup lang="ts">
-import { useIntlayer } from "vue-intlayer"; // Tích hợp Vue
+import { useIntlayer } from "vue-intlayer"; // Vue integration
+
 const { greeting } = useIntlayer("component-example");
 </script>
 
@@ -195,6 +290,11 @@ const { greeting } = useIntlayer("component-example");
 </template>
 ```
 
+Tất cả ngôn ngữ nằm trong một tệp có định kiểu duy nhất cạnh component.
+
+</Tab>
+</Tabs>
+
 Cách tiếp cận này:
 
 - **Tăng tốc phát triển** (khai báo một lần; IDE/AI tự động hoàn thành).
@@ -222,20 +322,71 @@ Cách tiếp cận này:
 
 ## Khi nào nên chọn cái nào?
 
-- **Chọn vue-i18n** nếu bạn muốn **phương pháp Vue tiêu chuẩn**, bạn thoải mái quản lý catalog/namespace tự mình, và ứng dụng của bạn có kích thước **nhỏ đến trung bình** (hoặc bạn đã sử dụng Nuxt i18n).
-- **Chọn Intlayer** nếu bạn đánh giá cao **nội dung theo phạm vi component**, **TypeScript nghiêm ngặt**, **đảm bảo thời gian build**, **tree-shaking**, và **công cụ routing/SEO/editor tích hợp sẵn** - đặc biệt dành cho **codebase Vue/Nuxt lớn, mô-đun**, hệ thống thiết kế, v.v.
+<AccordionGroup>
+<Accordion header="Chọn vue-i18n">
+
+Bạn muốn **cách tiếp cận chuẩn của Vue**, bạn cảm thấy thoải mái khi tự quản lý danh mục và namespace, và ứng dụng của bạn ở **quy mô vừa hoặc nhỏ** (hoặc bạn đã sử dụng Nuxt i18n). Các khối SFC `<i18n>` và `setLocaleMessage()` tại runtime là những tính năng mà Intlayer cố ý không sao chép lại.
+
+</Accordion>
+<Accordion header="Chọn Intlayer">
+
+Bạn coi trọng **nội dung theo phạm vi component**, **TypeScript chặt chẽ**, **đảm bảo tại thời điểm build**, **tree-shaking** và các công cụ toàn diện cho routing, SEO và biên tập, đặc biệt cho các **codebase Vue/Nuxt lớn, có tính module** và hệ thống thiết kế. Bắt đầu với [Intlayer với Vue](https://intlayer.org/vi/doc/environment/vite-and-vue) hoặc [với Nuxt](https://intlayer.org/vi/doc/environment/nuxt-and-vue).
+
+</Accordion>
+<Accordion header="Chọn @intlayer/vue-i18n">
+
+Hiện tại bạn đang dùng `vue-i18n` và muốn tối ưu dung lượng bundle mà không cần chỉnh sửa tệp `.vue`. [Adapter tương thích](https://intlayer.org/vi/doc/compatibility/vue-i18n) giữ nguyên `createI18n`, `useI18n`, `t()`, `d()`, `n()`, `$t` và `v-t`, cung cấp chúng từ các từ điển đã biên dịch. Được đo đạc trực tiếp trong [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/vi/blog/vue-i18n-vs-intlayer-vue-i18n).
+
+</Accordion>
+</AccordionGroup>
 
 ## Tương tác với vue-i18n
 
 `intlayer` cũng có thể giúp quản lý các namespace của `vue-i18n` của bạn.
 
-Sử dụng `intlayer`, bạn có thể khai báo nội dung theo định dạng của thư viện i18n yêu thích của bạn, và intlayer sẽ tạo ra các namespace tại vị trí bạn chọn (ví dụ: `/messages/{{locale}}/{{namespace}}.json`).
+Sử dụng `intlayer`, bạn có thể khai báo nội dung theo định dạng của thư viện i18n yêu thích của bạn, và intlayer sẽ tạo ra các namespace tại vị trí bạn chọn (ví dụ: `/messages/{{locale}}/{{namespace}}.json`). Xem [tài liệu tương thích vue-i18n](https://intlayer.org/vi/doc/compatibility/vue-i18n) và [adapter Nuxt i18n](https://intlayer.org/vi/doc/compatibility/nuxtjs-i18n).
+
+## FAQ
+
+<FAQ>
+
+<Question title="Intlayer là sự thay thế cho vue-i18n hay là một lớp bên trên?">
+
+Cả hai, tùy thuộc vào cách bạn áp dụng. `vue-intlayer` là một runtime gốc với composable `useIntlayer()` riêng. `@intlayer/vue-i18n` là một adapter tương thích giữ nguyên API của `vue-i18n` và hoán đổi nguồn dữ liệu được liên kết, để bạn có thể di chuyển mà không cần chỉnh sửa component và chuyển đổi từng tệp sau đó.
+
+</Question>
+
+<Question title="Điều gì xảy ra với các khối SFC <i18n> của tôi?">
+
+Adapter không đọc chúng. Hãy chuyển các thông điệp đó vào tệp JSON ngôn ngữ của bạn, hoặc vào tệp `.content.ts` đặt cạnh component với các kiểu được tạo tự động. Đó là tính năng duy nhất của `vue-i18n` không được chuyển giao.
+
+</Question>
+
+<Question title="Intlayer có hoạt động với Nuxt không?">
+
+Có. [Intlayer với Nuxt](https://intlayer.org/vi/doc/environment/nuxt-and-vue) hỗ trợ định tuyến đa ngôn ngữ, middleware phát hiện ngôn ngữ và tạo sitemap. Nếu bạn đang dùng `@nuxtjs/i18n`, [adapter tương thích Nuxt i18n](https://intlayer.org/vi/doc/compatibility/nuxtjs-i18n) là con đường di chuyển.
+
+</Question>
+
+<Question title="Tôi có thể giữ locales/{locale}.json làm nguồn chân lý duy nhất không?">
+
+Có. [Plugin đồng bộ JSON](https://intlayer.org/vi/doc/compatibility/vue-i18n) đọc chúng với cú pháp của `vue-i18n` (`{name}`, `{0}`, dạng số nhiều `"car | cars"`) và ghi các bản dịch trở lại khi CLI hoặc CMS cập nhật.
+
+</Question>
+
+<Question title="ICU có hoạt động với Intlayer trên Vue không?">
+
+Hỗ trợ ICU gốc đang được hoàn thiện. Adapter `@intlayer/vue-i18n` xử lý cú pháp thông điệp của chính `vue-i18n`, bao gồm dạng số nhiều và nội suy có tên/danh sách. Để tìm hiểu mô hình số nhiều của Intlayer, hãy xem [nội dung liệt kê](https://intlayer.org/vi/doc/concept/content/enumeration).
+
+</Question>
+
+</FAQ>
 
 ## Sao GitHub
 
 Sao trên GitHub là một chỉ số mạnh mẽ về độ phổ biến của dự án, sự tin tưởng của cộng đồng và tính liên quan lâu dài. Mặc dù không phải là thước đo trực tiếp về chất lượng kỹ thuật, chúng phản ánh số lượng nhà phát triển thấy dự án hữu ích, theo dõi tiến trình của nó và có khả năng áp dụng nó. Để ước tính giá trị của một dự án, sao giúp so sánh mức độ thu hút giữa các lựa chọn thay thế và cung cấp cái nhìn sâu sắc về sự phát triển của hệ sinh thái.
 
-[![Biểu đồ Lịch sử Sao](https://api.star-history.com/svg?repos=intlify/vue-i18n&repos=aymericzip/intlayer&type=Date)](https://star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
+[![Biểu đồ Lịch sử Sao](https://api.star-history.com/chart?repos=intlify%2Fvue-i18n%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
 
 ## Kết luận
 
@@ -244,4 +395,15 @@ Cả **vue-i18n** và **Intlayer** đều hỗ trợ nội địa hóa ứng d
 - Với **Intlayer**, **nội dung mô-đun**, **TypeScript nghiêm ngặt**, **an toàn thời gian biên dịch**, **gói được tree-shaken**, và **công cụ cho router/SEO/trình soạn thảo** đều có sẵn **ngay khi sử dụng**.
 - Nếu nhóm của bạn ưu tiên **khả năng bảo trì và tốc độ** trong một ứng dụng Vue/Nuxt đa ngôn ngữ, dựa trên component, Intlayer cung cấp trải nghiệm **toàn diện nhất** hiện nay.
 
-Tham khảo tài liệu ['Tại sao chọn Intlayer?'](https://intlayer.org/doc/why) để biết thêm chi tiết.
+## Đọc thêm
+
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/vi/blog/vue-i18n-vs-intlayer-benchmark), the measured run behind the table above
+- [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/vi/blog/vue-i18n-vs-intlayer-vue-i18n), the adapter on the same app
+- [Is vue-i18n outdated?](https://intlayer.org/vi/blog/is-vue-i18n-outdated)
+- [How to pick a Vue i18n library](https://intlayer.org/vi/blog/how-to-pick-vue-i18n-library)
+- [Using Intlayer with vue-i18n](https://intlayer.org/vi/blog/intlayer-with-vue-i18n)
+- [Vue benchmark report](https://intlayer.org/vi/doc/benchmark/vue)
+- [Migration guide: vue-i18n to Intlayer](https://intlayer.org/vi/doc/migration/vue-i18n)
+- [Bundle optimization](https://intlayer.org/vi/doc/concept/bundle-optimization) and [the Intlayer compiler](https://intlayer.org/vi/doc/compiler)
+
+Refer to ['Why Intlayer?' doc](https://intlayer.org/vi/doc/why) for more details.