@intlayer/docs 9.5.6 → 9.5.8

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.