@intlayer/docs 9.5.3 → 9.5.4

package/blog/vi/how_to_pick_vue_i18n_library.md

@@ -0,0 +1,442 @@
+---
+createdAt: 2026-09-16
+updatedAt: 2026-09-16
+title: "Cách chọn đúng thư viện Vue i18n năm 2026"
+description: Hướng dẫn ra quyết định cho việc quốc tế hóa (i18n) Vue và Nuxt. Những câu hỏi cần trả lời trước khi so sánh vue-i18n, @nuxtjs/i18n, fluent-vue, Paraglide và Intlayer, cùng chi phí của từng lựa chọn về bundle size, typing và SSR payload.
+keywords:
+  - vue i18n
+  - vue internationalization
+  - vue-i18n
+  - nuxt i18n
+  - fluent-vue
+  - Paraglide
+  - Intlayer
+  - so sánh thư viện i18n
+slugs:
+  - blog
+  - how-to-pick-vue-i18n-library
+author: aymericzip
+---
+
+# Cách chọn đúng thư viện Vue i18n
+
+"Vue i18n" vừa là một thuật ngữ chung vừa là tên của thư viện mà hầu như ai cũng cài đặt. Điều đó vừa tiện lợi vừa dễ gây hiểu lầm: `vue-i18n` là một lựa chọn mặc định tốt, nhưng không phải là lựa chọn duy nhất, và những câu hỏi định hình quyết định (có dùng SSR hay không, bao nhiêu trang, ai là người viết bản dịch) hiếm khi được đặt ra trước khi chạy `npm install`.
+
+Hướng dẫn này sẽ đặt ra những câu hỏi đó trước, sau đó ánh xạ các câu trả lời tới những thư viện phù hợp, cho cả Vite + Vue thuần lẫn Nuxt.
+
+![Hệ sinh thái thư viện Vue i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
+## Mục lục
+
+<TOC/>
+
+## Sáu câu hỏi cần trả lời trước khi so sánh các thư viện
+
+1. **Vite SPA hay Nuxt?** Trong một SPA, chi phí catalog là vấn đề về JS bundle. Trong Nuxt, đó còn là vấn đề về HTML payload, bởi vì các message được serialize vào SSR state và hydrate. Hầu hết các báo cáo "vue-i18n chạy chậm" xuất phát từ các ứng dụng Nuxt chính vì lý do này.
+2. **Ai là người viết bản dịch?** Developer, một TMS, một agency bàn giao chuỗi ICU, hay một AI pipeline. `vue-i18n` sử dụng cú pháp số nhiều riêng biệt phân cách bằng dấu gạch đứng (pipe-separated), không phải ICU. Điều này rất quan trọng nếu các chuỗi văn bản đến từ bên ngoài.
+3. **Có bao nhiêu locale và trang?** Hai locale và năm trang có thể chuyển giao (ship) tất cả mọi thứ cùng lúc. Mười locale và bốn mươi route thì không thể, và chiến lược tải dữ liệu (loading strategy) sẽ trở thành chi phí chính.
+4. **Bạn có cần type trên các key không?** `t("cart.totl")` vẫn biên dịch bình thường trong `vue-i18n` trừ khi bạn truyền một message schema generic, và schema đó lại xung đột với các catalog được lazy load.
+5. **Nội dung bao gồm những gì?** Chỉ các nhãn UI, hay cả markdown, liên kết bên trong câu, và các block riêng theo từng locale. Rich content là nơi mà việc `t()` trả về một chuỗi string trở nên bất tiện.
+6. **CSP có phải là một ràng buộc không?** Bản build mặc định của `vue-i18n` biên dịch message trong trình duyệt bằng `new Function`. Các bản build runtime-only cần `@intlify/unplugin-vue-i18n` để precompile tại thời điểm build time.
+
+Hãy ghi lại các câu trả lời. Mọi phân tích bên dưới đều sẽ đối chiếu lại với chúng.
+
+## Bức tranh toàn cảnh qua một hình ảnh
+
+Hệ sinh thái Vue có ít thư viện i18n hơn React, và chúng đến từ các làn sóng kiến trúc khác nhau.
+
+![Lịch sử các thư viện JavaScript i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/history_i18n.webp?raw=true)
+
+<AccordionGroup>
+<Accordion header="Runtime dictionary (2015 đến 2019): vue-i18n, @nuxt/i18n">
+
+`vue-i18n` xuất hiện vào năm 2015 và luôn là lựa chọn mặc định kể từ đó. `@nuxt/i18n` bọc lấy nó với tính năng định tuyến locale (locale routing), thẻ SEO và lazy loading theo từng locale. Các message được biên dịch thành các render function, tại thời điểm build time nếu bạn thêm unplugin, hoặc trực tiếp trong trình duyệt nếu không cấu hình thêm.
+
+</Accordion>
+<Accordion header="Định dạng thay thế (2020): fluent-vue">
+
+Các file `.ftl` của Mozilla Fluent mang lại cú pháp message thân thiện hơn cùng các biến thể nhận biết ngữ pháp (grammar-aware). Không có key type, và Vite plugin sẽ nạp mọi locale vào từng trang.
+
+</Accordion>
+<Accordion header="Compiler và nội dung đồng vị trí (2024 đến 2026): Paraglide, Intlayer">
+
+Paraglide sinh ra một hàm cho mỗi message và để bundler tự động tree-shake phần còn lại. Intlayer khai báo nội dung theo từng component trong các file `.content.ts`, sinh type tự động, và chỉ chuyển giao những gì một route thực sự render.
+
+</Accordion>
+</AccordionGroup>
+
+Bài viết [lịch sử của JavaScript i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/history_of_i18n.md) đi sâu chi tiết vào từng làn sóng.
+
+## Quyết định quan trọng nhất: nội dung nằm ở đâu và được tải khi nào
+
+Hai lựa chọn mang tính cấu trúc giải thích cho hầu hết sự khác biệt về bundle size giữa các thiết lập:
+
+- **Nội dung tập trung hay phân tán theo phạm vi (scoped).** Một file `locales/en.json` cho toàn bộ ứng dụng, hay một khai báo riêng cho từng component.
+- **Static hay dynamic import.** Nạp tất cả mọi thứ khi khởi động, hay chỉ tải locale đang hoạt động (và lý tưởng nhất là route đang hoạt động) theo nhu cầu (on demand).
+
+Biểu đồ ước tính payload cho một ứng dụng trên lý thuyết từ 1 đến 10 trang, được dịch sang 1 đến 10 locale, với khoảng 30 KB văn bản trên mỗi trang.
+
+![Rò rỉ nội dung theo lý thuyết theo từng kiến trúc](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
+
+`vue-i18n` hỗ trợ trục dynamic: gọi `setLocaleMessage` sau một lệnh `import()` đồng nghĩa với việc bạn không còn phải chuyển giao chín locale mà không ai đọc. Điều mà nó không mang lại cho bạn là trục theo trang. Một catalog locale là một đối tượng duy nhất, và việc nạp nó sẽ nạp toàn bộ nội dung của mọi trang. Trong một SPA, không ai nhận ra điều đó. Nhưng trong Nuxt, với `@nuxtjs/i18n` và nhiều hơn mười trang, mỗi route đều phải gánh các chuỗi của mọi route khác hai lần: trong JS chunk và trong SSR payload.
+
+Bài [benchmark Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/benchmark/vue.md) đo lường điều này dưới dạng "rò rỉ từ các route khác" (leakage from other routes) và "rò rỉ từ các locale khác" (leakage from other locales). Nếu câu trả lời của bạn cho câu hỏi 3 là "nhiều trang", phần này sẽ quan trọng hơn bất kỳ sở thích API nào. Bài viết [i18n theo từng component so với tập trung](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/per-component_vs_centralized_i18n.md) đề cập đến khía cạnh bảo trì của cùng sự đánh đổi này.
+
+## Các ứng cử viên
+
+Kích thước thư viện được lấy từ bài [benchmark Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/benchmark/vue.md): plugin cộng với composable trong một component rỗng, sau khi bundling, tree-shaking và minification, trên một ứng dụng 10 trang, 10 locale. Nội dung được đo lường riêng biệt.
+
+| Thư viện       | Mô hình nội dung                                           | An toàn kiểu                     | Định dạng message                   | Phân tách theo route   | Kích thước thư viện                                |
+| :------------- | :--------------------------------------------------------- | :------------------------------- | :---------------------------------- | :--------------------- | :------------------------------------------------- |
+| `vue-i18n`     | Catalog tập trung theo locale, tùy chọn SFC `<i18n>` block | 2/5 — Opt-in qua schema generic  | Riêng (pipe plural)                 | Không                  | ~24.3 kB                                           |
+| `@nuxtjs/i18n` | Tương tự `vue-i18n`, cộng thêm routing và thẻ SEO          | 2/5 — Tương tự                   | Tương tự                            | Không, chỉ theo locale | ~24.3 kB                                           |
+| `fluent-vue`   | File `.ftl` (Mozilla Fluent)                               | 1/5 — Không                      | Fluent                              | Không                  | ~29.7 kB                                           |
+| Paraglide      | Project inlang, các hàm được sinh ra                       | 3.5/5 — Được sinh ra             | Riêng                               | Qua tree-shaking       | Gần như bằng 0 (do mã được sinh ra trong codebase) |
+| Intlayer       | Một file `.content.ts` cho mỗi component                   | 5/5 — Được sinh ra, bật mặc định | Intlayer (+ ICU, i18next, vue-i18n) | Có, theo component     | ~3.9 kB                                            |
+
+> Các con số là ảnh chụp nhanh tại các phiên bản của bài benchmark. Hãy chạy thử nghiệm trên chính ứng dụng của bạn trước khi đưa ra quyết định chỉ dựa vào kích thước.
+> An toàn kiểu: 5/5 nghĩa là khóa, tham số và mọi locale đều được kiểm tra mà không cần thiết lập thủ công, bao gồm cả trình định dạng URL và các helper.
+
+Kích thước thư viện gần như bằng 0 của Paraglide đạt được nhờ thiết kế: runtime được sinh trực tiếp vào repository của bạn, điều này đồng nghĩa với việc cần một bước sinh lại mã (regeneration) trước mỗi lần push và nguy cơ merge conflict trên các file được sinh ra. Intlayer cần `vite-intlayer` (hoặc Nuxt module), vì vậy nó không thể chạy nếu không có một build step.
+
+## Đối chiếu câu trả lời với thư viện phù hợp
+
+<AccordionGroup>
+<Accordion header="Vite SPA, team nhỏ, ít locale">
+
+`vue-i18n` ở chế độ Composition (`legacy: false`), kết hợp với `@intlify/unplugin-vue-i18n` để bạn chuyển giao bản build runtime-only. Lazy-load các locale bằng `import()`. Cấu hình này đáp ứng hầu hết các ứng dụng nhỏ và câu trả lời từ cộng đồng có ở khắp mọi nơi. Các block SFC `<i18n>` đặt message đồng vị trí với component, điều này rất hữu ích, nhưng công cụ trích xuất và hỗ trợ TMS xung quanh chúng còn hạn chế hơn so với catalog JSON, vì vậy hãy sớm thống nhất lựa chọn mà team sẽ sử dụng.
+
+</Accordion>
+<Accordion header="Nuxt với định tuyến locale, sitemap và hreflang">
+
+`@nuxtjs/i18n` cung cấp chiến lược định tuyến, các thẻ `hreflang` và tự động phát hiện locale mà không cần viết thêm code, và chỉ riêng điều đó đã đủ để chọn nó cho các trang nội dung có vài trang. Giới hạn của nó nằm ở catalog theo từng locale: khi vượt quá khoảng mười trang, SSR payload sẽ phải gánh toàn bộ nội dung của mọi route. Nếu đó là trường hợp của bạn, hãy tự cấu hình thủ công `vue-i18n` với message theo từng route, hoặc chuyển sang mô hình nội dung scoped. Bài viết [Nuxt i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/list_i18n_technologies/frameworks/nuxt.md) sẽ hướng dẫn bạn lựa chọn chiến lược định tuyến trước tiên.
+
+</Accordion>
+<Accordion header="Bản dịch đến từ TMS hoặc agency bàn giao định dạng ICU">
+
+Cú pháp số nhiều của `vue-i18n` (`"no item | one item | {count} items"`) không phải là ICU và không mang tính tương thích cao (portable). Các biên dịch viên cần được thông báo trước về điều này, và bản xuất từ TMS thông thường sẽ không tạo ra định dạng đó. Hãy thống nhất định dạng trước khi tạo catalog đầu tiên, hoặc chọn một thư viện có định dạng phù hợp với vendor của bạn. Khả năng hỗ trợ ICU của Intlayer mới ở mức một phần, vì vậy nếu hiện tại bạn nhận chuỗi ICU, hãy cân nhắc đó cũng là một yếu tố cản trở.
+
+</Accordion>
+<Accordion header="Ứng dụng lớn, nhiều route, ngân sách bundle hoặc SSR payload hạn chế">
+
+Nên ưu tiên nội dung scoped được biên dịch tại build time. Paraglide đạt được điều này thông qua tree-shaking, hoạt động rất hiệu quả trên Vite. Intlayer đạt được điều này thông qua các khai báo theo từng component và chỉ chuyển giao những gì route thực sự render. Với `vue-i18n`, bạn có thể chia tách message theo route một cách thủ công, nhưng không có gì đảm bảo tính thực thi và một component dùng chung import namespace toàn cục có thể âm thầm phá vỡ cấu trúc đó.
+
+</Accordion>
+<Accordion header="Type safety là yêu cầu bắt buộc">
+
+`vue-i18n` có thể được gán type bằng cách truyền một schema generic vào `createI18n`. Cách này hoạt động được, nhưng sẽ bị phá vỡ ngay khi các catalog được lazy load, bởi vì schema mô tả các message có thể chưa được tải về. Nếu không muốn phải tự bảo trì điều đó, hãy chọn thư viện có type được sinh trực tiếp từ nội dung: Paraglide hoặc Intlayer. Bài viết [phát hiện bản dịch còn thiếu](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/detecting_missing_translations.md) so sánh những gì mỗi công cụ phát hiện được tại build time.
+
+</Accordion>
+<Accordion header="Nội dung phức tạp hơn các nhãn UI thông thường">
+
+Các trang markdown, câu có chứa `<RouterLink>` ở giữa, hoặc các component riêng biệt theo locale. `vue-i18n` có `<i18n-t>` cho phép nội suy component (component interpolation), hoạt động ổn nhưng khá dài dòng. Content node của Intlayer chấp nhận markdown, HTML và các object lồng nhau trực tiếp, phù hợp hơn nhiều khi ứng dụng chứa nhiều nội dung phong phú.
+
+</Accordion>
+<Accordion header="Bản dịch sẽ được tạo bởi AI">
+
+Khi đó, file JSON tập trung không còn đối tượng sử dụng nào để duy trì sự tồn tại của nó. Nội dung đồng vị trí kết hợp với một CLI tự động điền các locale còn thiếu là con đường ngắn hơn nhiều. Lệnh `fill` của Intlayer chạy trực tiếp với API key của chính bạn (OpenAI, Anthropic, Mistral, Gemini) và chỉ dịch lại những gì đã thay đổi.
+
+</Accordion>
+</AccordionGroup>
+
+## Hạn chế của từng thư viện
+
+- **`vue-i18n`**: nặng nhất trong nhóm, định dạng số nhiều riêng, type là tùy chọn (opt-in) và dễ vỡ khi lazy loading, không hỗ trợ phân tách phạm vi theo route, các key không dùng tích tụ một cách âm thầm. Việc để lại `legacy: true` trong ứng dụng Vue 3 sẽ giữ lại layer tương thích Vue 2 và làm mất khả năng gõ type của `useI18n()`.
+- **`@nuxtjs/i18n`**: thừa hưởng tất cả các nhược điểm trên, và SSR payload sẽ gánh toàn bộ chuỗi ký tự của mọi trang khi ứng dụng vượt quá khoảng một tá route.
+- **`fluent-vue`**: cú pháp message tốt, không có key type, và Vite plugin nạp tất cả nội dung ở mọi ngôn ngữ vào từng trang. Nặng nhất trong bài benchmark.
+- **Paraglide**: các file được sinh ra phải commit vào repo, cần regenerate trước mỗi lần push, và locale được đọc từ cookie hoặc storage trên mỗi lệnh gọi message thay vì từ một reactive store, làm tốn thêm tài nguyên xử lý khi chuyển đổi locale.
+- **Intlayer**: bắt buộc phải có build plugin, hệ sinh thái nhỏ hơn, hỗ trợ ICU một phần, và nội dung phân tán khắp codebase theo thiết kế, vì vậy việc xuất ra một file JSON duy nhất cho biên dịch viên sẽ cần đến công cụ hỗ trợ.
+
+## Mã nguồn thực tế của từng lựa chọn
+
+Cùng một component, phần tóm tắt giỏ hàng với tiêu đề và định dạng số nhiều, được viết bằng từng ứng cử viên. Điểm thú vị không nằm ở template, mà ở vị trí lưu trữ nội dung và những gì `vue-tsc` nhận biết được về nó.
+
+<Tabs defaultTab="vue-i18n">
+  <Tab label="vue-i18n" value="vue-i18n">
+
+  <Tabs group="locale">
+  <Tab value="en" label="Tiếng Anh">
+
+```json fileName="src/locales/en.json"
+{
+  "cart": {
+    "title": "Your cart",
+    "items": "no item | one item | {count} items"
+  }
+}
+```
+
+  </Tab>
+  <Tab value="fr" label="Tiếng Pháp">
+
+```json fileName="src/locales/fr.json"
+{
+  "cart": {
+    "title": "Votre panier",
+    "items": "aucun article | un article | {count} articles"
+  }
+}
+```
+
+  </Tab>
+  <Tab value="es" label="Tiếng Tây Ban Nha">
+
+```json fileName="src/locales/es.json"
+{
+  "cart": {
+    "title": "Tu carrito",
+    "items": "ningún artículo | un artículo | {count} artículos"
+  }
+}
+```
+
+  </Tab>
+  </Tabs>
+
+```vue fileName="src/components/CartSummary.vue"
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+const props = defineProps<{ count: number }>();
+const { t } = useI18n();
+</script>
+
+<template>
+  <section>
+    <h2>{{ t("cart.title") }}</h2>
+    <p>{{ t("cart.items", { count: props.count }, props.count) }}</p>
+  </section>
+</template>
+```
+
+Số nhiều phân cách bằng dấu gạch đứng (pipe) là định dạng riêng của vue-i18n, không phải ICU. `t` chấp nhận bất kỳ chuỗi nào trừ khi bạn truyền một message schema generic vào `createI18n`.
+
+  </Tab>
+  <Tab label="fluent-vue" value="fluent-vue">
+
+  <Tabs group="locale">
+  <Tab value="en" label="Tiếng Anh">
+
+```ftl fileName="src/locales/en.ftl"
+cart-title = Your cart
+cart-items = { $count ->
+    [one] { $count } item
+   *[other] { $count } items
+}
+```
+
+  </Tab>
+  <Tab value="fr" label="Tiếng Pháp">
+
+```ftl fileName="src/locales/fr.ftl"
+cart-title = Votre panier
+cart-items = { $count ->
+    [one] { $count } article
+   *[other] { $count } articles
+}
+```
+
+  </Tab>
+  <Tab value="es" label="Tiếng Tây Ban Nha">
+
+```ftl fileName="src/locales/es.ftl"
+cart-title = Tu carrito
+cart-items = { $count ->
+    [one] { $count } artículo
+   *[other] { $count } artículos
+}
+```
+
+  </Tab>
+  </Tabs>
+
+```vue fileName="src/components/CartSummary.vue"
+<script setup lang="ts">
+import { useFluent } from "fluent-vue";
+
+const props = defineProps<{ count: number }>();
+const { $t } = useFluent();
+</script>
+
+<template>
+  <section>
+    <h2>{{ $t("cart-title") }}</h2>
+    <p>{{ $t("cart-items", { count: props.count }) }}</p>
+  </section>
+</template>
+```
+
+Cú pháp của Fluent xử lý số nhiều và các biến thể ngữ pháp rất tốt. Message id là các chuỗi untyped, và Vite plugin đóng gói mọi locale vào từng trang.
+
+  </Tab>
+  <Tab label="Paraglide" value="paraglide">
+
+  <Tabs group="locale">
+  <Tab value="en" label="Tiếng Anh">
+
+```json fileName="messages/en.json"
+{
+  "cart_title": "Your cart",
+  "cart_items": "{count} items"
+}
+```
+
+  </Tab>
+  <Tab value="fr" label="Tiếng Pháp">
+
+```json fileName="messages/fr.json"
+{
+  "cart_title": "Votre panier",
+  "cart_items": "{count} articles"
+}
+```
+
+  </Tab>
+  <Tab value="es" label="Tiếng Tây Ban Nha">
+
+```json fileName="messages/es.json"
+{
+  "cart_title": "Tu carrito",
+  "cart_items": "{count} artículos"
+}
+```
+
+  </Tab>
+  </Tabs>
+
+```vue fileName="src/components/CartSummary.vue"
+<script setup lang="ts">
+import { m } from "../paraglide/messages.js";
+
+const props = defineProps<{ count: number }>();
+</script>
+
+<template>
+  <section>
+    <h2>{{ m.cart_title() }}</h2>
+    <p>{{ m.cart_items({ count: props.count }) }}</p>
+  </section>
+</template>
+```
+
+Mỗi message là một hàm được sinh ra và có đầy đủ type, vì vậy một key bị thiếu sẽ dẫn đến lỗi import. Thư mục `paraglide/` được sinh trực tiếp vào repo của bạn và được regenerate lại sau mỗi lần thay đổi.
+
+  </Tab>
+  <Tab label="Intlayer" value="intlayer">
+
+```ts fileName="src/components/cartSummary.content.ts"
+import { plural, t, type Dictionary } from "intlayer";
+
+const cartSummaryContent = {
+  key: "cart-summary",
+  content: {
+    title: t({ en: "Your cart", fr: "Votre panier", es: "Tu carrito" }),
+    items: t({
+      en: plural({ one: "{{count}} item", other: "{{count}} items" }),
+      fr: plural({ one: "{{count}} article", other: "{{count}} articles" }),
+      es: plural({ one: "{{count}} artículo", other: "{{count}} artículos" }),
+    }),
+  },
+} satisfies Dictionary;
+
+export default cartSummaryContent;
+```
+
+```vue fileName="src/components/CartSummary.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+const props = defineProps<{ count: number }>();
+const { title, items } = useIntlayer("cart-summary");
+</script>
+
+<template>
+  <section>
+    <h2><title /></h2>
+    <p>{{ items(props.count) }}</p>
+  </section>
+</template>
+```
+
+Tất cả các locale nằm trong một file duy nhất cạnh component. Type được sinh ra tại thời điểm build, vì vậy `title` được tự động gợi ý (autocomplete) và lỗi chính tả sẽ khiến `vue-tsc` báo lỗi ngay. `<title />` render một node mà visual editor có thể nhắm tới; `{{ items(props.count) }}` trả về chuỗi văn bản thuần.
+
+  </Tab>
+</Tabs>
+
+Bạn đang sử dụng `vue-i18n`? [Compat adapter `@intlayer/vue-i18n`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/compat/vue-i18n.md) alias package ở cấp độ bundler, nhờ đó `useI18n()`, `$t`, pipe plural và `v-t` tiếp tục hoạt động trong khi Intlayer đảm nhận cung cấp nội dung. [Hướng dẫn di chuyển](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/migration_from_vue-i18n_to_intlayer.md) sẽ hướng dẫn bạn cách gỡ bỏ adapter sau đó, và cũng có [hướng dẫn dành riêng cho Nuxt](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/migration_from_nuxtjs_i18n_to_intlayer.md).
+
+## Những điều cần cân nhắc trước khi quyết định
+
+Bảng tính năng chỉ cho bạn biết một thư viện có thể làm được gì hôm nay. Những điểm dưới đây cho bạn biết trải nghiệm thực tế khi đồng hành cùng nó sẽ như thế nào.
+
+**Kiểm tra mức độ hoạt động của repository.**
+
+Các commit, thời gian phản hồi issue, và liệu bản phát hành minor gần nhất có diễn ra trong năm nay hay không. Một thiết kế hoàn hảo nhưng không có người duy trì sẽ sớm trở thành một cuộc di chuyển (migration) bắt buộc trong tương lai.
+
+**Đừng chọn thư viện chỉ dựa vào lượt tải trên npm.**
+
+Thư viện được cài đặt nhiều nhất là thư viện xuất hiện đầu tiên, không phải thư viện phù hợp nhất cho một codebase Vue năm 2026. Lượt tải phản ánh lịch sử, không phản ánh sự phù hợp.
+
+![Bảng xếp hạng các thư viện JavaScript i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/alphabet_rank_i18n_lib.webp?raw=true)
+
+**Tìm hiểu xem ai tài trợ cho người duy trì, và họ bán sản phẩm gì.**
+
+`vue-i18n` được bảo trợ bởi Crowdin, tương tự như `next-intl` và `svelte-i18n`. `i18next` được bảo trợ bởi Locize. Tolgee, Paraglide (inlang) và Intlayer tự vận hành nền tảng riêng của mình. Một vendor có nguồn thu đến từ dịch vụ lưu trữ bản dịch (hosted translation) ít có lý do để cung cấp bản dịch miễn phí ngay bên trong chuỗi công cụ của bạn. Intlayer là thư viện duy nhất trong nhóm cung cấp tính năng dịch AI qua CLI bằng chính API key của bạn, cùng một CMS mà bạn có thể tự host.
+
+**Thư viện đã sẵn sàng cho AI-agent chưa?**
+
+Các agent vẫn còn gặp khó khăn với i18n: chúng quên locale, tự tạo key bừa bãi, và trộn lẫn các cú pháp message. Thư viện có cung cấp [Agent Skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/agent_skills.md) hoặc một [MCP server](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/mcp_server.md) để agent có thể liệt kê, điền và kiểm thử nội dung hay không? Và việc nạp nội dung có được tối ưu hóa theo mặc định không, hay ai đó phải xem xét lại các namespace và lazy import mỗi quý một lần?
+
+**Type safety ngay từ đầu.**
+
+Không phải "có thể gõ type nếu cấu hình thêm" mà là "sai key sẽ khiến `tsc` báo lỗi ngay trên một bản cài đặt mới". Hãy kiểm tra xem điều gì sẽ xảy ra khi một key không tồn tại, và khi một locale bị thiếu một bản dịch.
+
+**Phát hiện nội dung không sử dụng.**
+
+Các catalog chỉ có xu hướng phình to. Quá trình build của Intlayer sẽ loại bỏ các trường không sử dụng và ghi log chúng (`build.purge`). Paraglide đạt được điều này nhờ kiến trúc, vì một hàm message không được gọi sẽ bị tree-shake. Tất cả các giải pháp khác đều để lại công việc dọn dẹp cho bạn.
+
+**Trải nghiệm lập trình viên (Developer experience).**
+
+Thời gian thiết lập cho đến chuỗi dịch đầu tiên, một [LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/lsp.md) hoặc [tiện ích mở rộng VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/vs_code_extension.md) hiển thị bản dịch khi hover và nhảy thẳng tới định nghĩa, một [CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/cli/index.md) để fill, test và push, một [trình biên dịch](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/compiler.md) hoặc trình trích xuất lấy các chuỗi hard-code ra khỏi component để bạn không phải quản lý từng chuỗi theo từng khóa, cùng phương thức để người không phải developer có thể chỉnh sửa nội dung ([visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_visual_editor.md) hoặc [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_CMS.md)) mà không cần tạo pull request.
+
+## Câu hỏi thường gặp
+
+<FAQ>
+
+<Question title="vue-i18n có còn là lựa chọn mặc định phù hợp trong năm 2026?">
+
+Đối với hầu hết các ứng dụng Vue, câu trả lời là có. Hệ sinh thái lớn nhất, tài liệu kỹ lưỡng, và các chi phí đều có thể dự đoán được: runtime nặng, định dạng số nhiều tùy chỉnh, và việc phân tách phạm vi theo route đòi hỏi bạn phải tự xây dựng và kiểm soát.
+
+</Question>
+
+<Question title="Tôi nên sử dụng @nuxtjs/i18n hay tự cấu hình vue-i18n thủ công trong Nuxt?">
+
+Hãy sử dụng module trừ khi việc định tuyến của bạn có yêu cầu đặc biệt hoặc ứng dụng chỉ có rất ít trang. Cấu hình thủ công đồng nghĩa với việc bạn phải tự xây dựng lại locale route, middleware, `hreflang` và sitemap, và những thứ đó phức tạp hơn vẻ bề ngoài rất nhiều.
+
+</Question>
+
+<Question title="Tôi có cần một thư viện dựa trên compiler không?">
+
+Chỉ khi bundle size, SSR payload, type được sinh tự động hoặc kiểm tra thiếu key tại build time là các yêu cầu thực tế của dự án. Bài viết [so sánh i18n compiler và declarative](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/compiler_vs_declarative_i18n.md) giải thích những gì compiler mang lại và những điểm chúng có thể xử lý chưa tối ưu.
+
+</Question>
+
+<Question title="Việc lựa chọn thư viện có ảnh hưởng đến SEO không?">
+
+Ảnh hưởng gián tiếp. Các công cụ tìm kiếm quan tâm đến định tuyến, `hreflang`, `<html lang>` và việc văn bản có nằm trong HTML được render từ server hay không. Xem thêm [hướng dẫn hreflang](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/hreflang_guide_multilingual_seo.md).
+
+</Question>
+
+</FAQ>
+
+## Tìm hiểu thêm
+
+- [Benchmark Vue i18n: bundle size, độ rò rỉ và thời gian chuyển đổi locale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/benchmark/vue.md)
+- [Vue i18n: cách vue-i18n hoạt động và những điểm bất cập](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/list_i18n_technologies/frameworks/vue.md) và [bài viết về Nuxt i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/list_i18n_technologies/frameworks/nuxt.md)
+- [vue-i18n so với Intlayer, từng tính năng chi tiết](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/vue-i18n_vs_intlayer.md) và [benchmark vue-i18n so với Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/vue-i18n_vs_intlayer_benchmark.md)
+- [vue-i18n có lỗi thời không?](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/is_vue-i18n_outdated.md)
+- [Lịch sử của JavaScript i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/history_of_i18n.md)
+- [So sánh i18n compiler và declarative](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/compiler_vs_declarative_i18n.md)
+- [i18n theo từng component so với tập trung](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/per-component_vs_centralized_i18n.md)
+- [Cài đặt i18n trong ứng dụng Vite + Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_vite+vue.md) và trong [ứng dụng Nuxt](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_nuxt.md)
+- Cùng hướng dẫn cho [React](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/how_to_pick_react_i18n_library.md), [Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/how_to_pick_svelte_i18n_library.md) và [Solid](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/how_to_pick_solid_i18n_library.md)

package/blog/vi/is_i18next_outdated.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-02
-updatedAt: 2026-09-02
+updatedAt: 2026-09-16
 title: Liệu i18next Đã Lỗi Thời Vào Năm 2026?
 description: i18next đang vận hành hàng triệu trang web, nhưng kiến trúc runtime từ năm 2011 đang bộc lộ giới hạn. Phân tích về dung lượng bundle, hạn chế tree-shaking và tốc độ đổi mới.
 keywords:
@@ -125,6 +125,10 @@ Trên Next.js, `next-i18next` thêm vào **76.7 KB gzipped** so với ứng dụ
 
 Theo mặc định, khoảng **90% văn bản dịch** gửi tới một route thực chất thuộc về các trang khác. Việc phân chia namespace thủ công tốn nhiều công sức và rất dễ phát sinh lỗi sót từ khóa.
 
+Biểu đồ dưới đây ước tính dung lượng nội dung cho một ứng dụng giả định gồm 1 đến 10 trang, được dịch sang 1 đến 10 ngôn ngữ, với khoảng 30 KB văn bản mỗi trang. Tải nội dung động theo locale loại bỏ trục ngôn ngữ, giới hạn nội dung theo component hoặc route loại bỏ trục trang, và chỉ khi kết hợp cả hai thì dung lượng mới giữ nguyên.
+
+![Rò rỉ nội dung lý thuyết theo kiến trúc](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
+
 **Độ trễ hydration:**
 
 Component sử dụng `react-i18next` mất tới **85 ms** để hoàn tất hydration, so với chỉ **24 ms** ở Intlayer. Việc chuyển giao các cây JSON khổng lồ tới component client làm chậm khả năng tương tác ban đầu.

package/blog/vi/is_next-intl_outdated.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-02
-updatedAt: 2026-09-02
+updatedAt: 2026-09-16
 title: Liệu next-intl Đã Lỗi Thời Vào Năm 2026?
 description: next-intl đã trở thành lựa chọn phổ biến cho Next.js App Router. Nhưng nó vẫn mang gánh nặng bundle lúc runtime và yêu cầu quản lý namespace thủ công.
 keywords:
@@ -127,6 +127,10 @@ Bởi vì `messages` được đưa vào client provider ở cấp cao nhất, t
 
 Có thể giảm bớt điều này bằng cách chia nhỏ file JSON thành các namespace. Tuy nhiên, việc tự quản lý ánh xạ này tốn nhiều công sức và rất dễ bỏ sót.
 
+Biểu đồ dưới đây ước tính dung lượng nội dung cho một ứng dụng giả định gồm 1 đến 10 trang, được dịch sang 1 đến 10 ngôn ngữ, với khoảng 30 KB văn bản mỗi trang. Tải nội dung động theo locale loại bỏ trục ngôn ngữ, giới hạn nội dung theo component hoặc route loại bỏ trục trang, và chỉ khi kết hợp cả hai thì dung lượng mới giữ nguyên.
+
+![Rò rỉ nội dung lý thuyết theo kiến trúc](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
+
 Intlayer giải quyết vấn đề bằng phân tích tĩnh: [trình biên dịch Intlayer](https://intlayer.org/vi/doc/compiler) chỉ đóng gói những nội dung thực sự được gọi trên route đó, đưa tỷ lệ rò rỉ giữa các trang về mức **0.0%**.
 
 ## Tại Sao next-intl Không Thể Tree-Shaking?

package/blog/vi/is_vue-i18n_outdated.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-02
-updatedAt: 2026-09-02
+updatedAt: 2026-09-16
 title: Liệu vue-i18n Đã Lỗi Thời Vào Năm 2026?
 description: vue-i18n là chuẩn mực cho Vue và Nuxt suốt cả thập kỷ. Nhưng trong các bài kiểm tra benchmark, nó lại là runtime i18n nặng nhất trên web. Tìm hiểu nguyên nhân tại đây.
 keywords:
@@ -116,6 +116,12 @@ Theo mặc định, **90% dữ liệu dịch** được gửi tới một route
 
 Các component có phạm vi dịch cục bộ đạt kích thước trung bình 196 KB ở `vue-i18n` do trùng lặp từ điển, so với chỉ **6.5 KB** khi dùng Intlayer.
 
+**Rò rỉ tăng như thế nào:**
+
+Biểu đồ dưới đây ước tính dung lượng nội dung cho một ứng dụng giả định gồm 1 đến 10 trang, được dịch sang 1 đến 10 ngôn ngữ, với khoảng 30 KB văn bản mỗi trang. Tải nội dung động theo locale loại bỏ trục ngôn ngữ, giới hạn nội dung theo component hoặc route loại bỏ trục trang, và chỉ khi kết hợp cả hai thì dung lượng mới giữ nguyên.
+
+![Rò rỉ nội dung lý thuyết theo kiến trúc](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
+
 ## Tại Sao vue-i18n Lại Nặng?
 
 ### Trình Biên Dịch AST Bị Gửi Xuống Trình Duyệt

package/blog/vi/next-i18next_vs_next-intl_vs_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2026-05-31
+updatedAt: 2026-09-16
 title: "next-i18next vs next-intl vs Intlayer - Hướng dẫn đầy đủ để dịch next-i18next vs next-intl vs Intlayer: 2026 Comparison"
 description: Giải pháp tốt nhất cho kích thước bundle, SEO, hiệu suất & khả năng bảo trì. Làm cho Next.js trang web của bạn đa ngôn ngữ vào năm 2026, dịch thuật LLM, Agent Skills & MCP.
 keywords:
@@ -20,7 +20,7 @@ author: aymericzip
 
 # next-i18next VS next-intl VS intlayer | Quốc tế hóa Next.js (i18n)
 
-![next-i18next VS next-intl VS intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18next-next-intl-intlayer.png?raw=true)
+![next-i18next VS next-intl VS intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18next-next-intl-intlayer.webp?raw=true)
 
 Hãy cùng xem xét những điểm tương đồng và khác biệt giữa ba lựa chọn i18n cho Next.js: next-i18next, next-intl và Intlayer.
 
@@ -126,6 +126,10 @@ Hai vấn đề quan trọng:
 
   > Nếu tôi đang ở trang `/fr/about`, tôi không muốn tải nội dung của trang `/en/about`
 
+Biểu đồ dưới đây ước tính dung lượng nội dung cho một ứng dụng giả định gồm 1 đến 10 trang, được dịch sang 1 đến 10 ngôn ngữ, với khoảng 30 KB văn bản mỗi trang. Tải nội dung động theo locale loại bỏ trục ngôn ngữ, giới hạn nội dung theo component hoặc route loại bỏ trục trang, và chỉ khi kết hợp cả hai thì dung lượng mới giữ nguyên.
+
+![Rò rỉ nội dung lý thuyết theo kiến trúc](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
+
 Một lần nữa, cả ba giải pháp đều nhận thức được những vấn đề này và cho phép quản lý các tối ưu hóa này. Sự khác biệt giữa ba giải pháp là trải nghiệm nhà phát triển (DX).
 
 `next-intl` và `next-i18next` sử dụng phương pháp tập trung để quản lý bản dịch, cho phép phân tách JSON theo locale và theo các tệp con. Trong `next-i18next`, chúng ta gọi các tệp JSON là 'namespaces'; `next-intl` cho phép khai báo các messages. Trong `intlayer`, chúng ta gọi các tệp JSON là 'dictionaries'.
@@ -150,9 +154,9 @@ Trong trường hợp của `next-intl` và `next-i18next`, thư viện yêu c
 
 Dưới đây là ví dụ về tác động của việc tối ưu kích thước bundle sử dụng `intlayer` trong ứng dụng vite + react:
 
-| Gói tối ưu hóa                                                                                      | Gói không tối ưu hóa                                                                                                      |
-| --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
-| ![gói tối ưu hóa](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true) | ![gói không tối ưu hóa](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle_no_optimization.png?raw=true) |
+| Gói tối ưu hóa                                                                                       | Gói không tối ưu hóa                                                                                                       |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| ![gói tối ưu hóa](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.webp?raw=true) | ![gói không tối ưu hóa](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle_no_optimization.webp?raw=true) |
 
 ## TypeScript & an toàn
 

package/blog/vi/per-component_vs_centralized_i18n.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-10
-updatedAt: 2025-09-10
+updatedAt: 2026-09-16
 title: "i18n theo thành phần so với i18n tập trung: Một cách tiếp cận mới với Intlayer"
 description: Phân tích sâu các chiến lược quốc tế hóa trong React, so sánh các phương pháp tập trung, theo khóa và theo thành phần, và giới thiệu Intlayer.
 keywords:
@@ -63,6 +63,7 @@ Tuy nhiên, trong thế giới React, chúng ta chủ yếu thấy các cách ti
 - phân nhỏ việc truy xuất nội dung theo key, hoặc theo component.
 
   </Column>
+
 </Columns>
 
 > Trong blog này, tôi sẽ không tập trung vào các giải pháp dựa trên compiler, những cái tôi đã đề cập ở đây: [Compiler vs Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/compiler_vs_declarative_i18n.md).
@@ -79,6 +80,10 @@ So, broadly speaking, the decision breaks down like this:
 
 Tất nhiên, các tác giả thư viện nhận thức được những giới hạn này và cung cấp các cách khắc phục. Trong số đó: tách thành namespaces, tải động các file JSON (`await import()`), hoặc loại bỏ (purge) nội dung trong quá trình build.
 
+Biểu đồ dưới đây ước tính dung lượng nội dung cho một ứng dụng giả định gồm 1 đến 10 trang, được dịch sang 1 đến 10 ngôn ngữ, với khoảng 30 KB văn bản mỗi trang. Tải nội dung động theo locale loại bỏ trục ngôn ngữ, giới hạn nội dung theo component hoặc route loại bỏ trục trang, và chỉ khi kết hợp cả hai thì dung lượng mới giữ nguyên.
+
+![Rò rỉ nội dung lý thuyết theo kiến trúc](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
+
 Đồng thời, bạn cần biết rằng khi bạn tải nội dung một cách động, bạn sẽ tạo thêm các yêu cầu tới server. Mỗi `useState` bổ sung hoặc hook đồng nghĩa với một yêu cầu server thêm.
 
 > Để khắc phục vấn đề này, Intlayer đề xuất gom nhiều định nghĩa nội dung dưới cùng một khóa; Intlayer sau đó sẽ hợp nhất những nội dung đó.
@@ -111,9 +116,9 @@ Chắc chắn, và đó là một bước tiến lớn. Hãy xem so sánh kích
 
 Ví dụ đầu tiên không bao gồm việc lazy-load các bản dịch theo locale và không tách namespace. Ví dụ thứ hai bao gồm content purging + tải động các bản dịch.
 
-| Bundle tối ưu hóa                                                                                                         | Bundle không tối ưu hóa                                                                              |
-| ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
-| ![gói chưa được tối ưu](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle_no_optimization.png?raw=true) | ![gói được tối ưu](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true) |
+| Bundle tối ưu hóa                                                                                                          | Bundle không tối ưu hóa                                                                               |
+| -------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| ![gói chưa được tối ưu](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle_no_optimization.webp?raw=true) | ![gói được tối ưu](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.webp?raw=true) |
 
 Nhờ có namespaces, chúng ta đã chuyển từ cấu trúc này:
 

package/blog/vi/react-i18next_vs_react-intl_vs_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-01-02
-updatedAt: 2025-06-29
+updatedAt: 2026-09-16
 title: react-i18next vs react-intl vs Intlayer
 description: Tích hợp react-i18next với next-intl và Intlayer cho việc quốc tế hóa (i18n) của ứng dụng React
 keywords:
@@ -106,6 +106,10 @@ Chúng tôi đánh giá:
 
 **Tại sao điều này quan trọng:** Gói nhỏ hơn và ít chuỗi không sử dụng giúp cải thiện hiệu suất khởi động và điều hướng.
 
+Biểu đồ dưới đây ước tính dung lượng nội dung cho một ứng dụng giả định gồm 1 đến 10 trang, được dịch sang 1 đến 10 ngôn ngữ, với khoảng 30 KB văn bản mỗi trang. Tải nội dung động theo locale loại bỏ trục ngôn ngữ, giới hạn nội dung theo component hoặc route loại bỏ trục trang, và chỉ khi kết hợp cả hai thì dung lượng mới giữ nguyên.
+
+![Rò rỉ nội dung lý thuyết theo kiến trúc](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
+
 ### 6) DX, công cụ & bảo trì
 
 - **react-intl / react-i18next**: Hệ sinh thái cộng đồng rộng lớn; đối với quy trình biên tập, bạn thường sử dụng các nền tảng nội địa hóa bên ngoài.