@intlayer/docs 9.0.0-canary.3 → 9.0.0-canary.5

package/docs/vi/compat/transloco.md

@@ -0,0 +1,45 @@
+---
+createdAt: 2026-06-13
+updatedAt: 2026-06-13
+title: "Di Chuyển Từ Transloco Sang Intlayer"
+description: "Tìm hiểu cách di chuyển ứng dụng Angular của bạn từ Transloco sang Intlayer bằng bộ điều hợp tương thích."
+keywords:
+  - transloco
+  - angular
+  - intlayer
+  - migration
+  - compat
+slugs:
+  - doc
+  - compatibility
+  - transloco
+history:
+  - version: 9.0.0
+    date: 2026-06-13
+    changes: "Khởi tạo lịch sử"
+author: aymericzip
+---
+
+# Di Chuyển Từ Transloco Sang Intlayer
+
+Nếu ứng dụng Angular của bạn hiện đang sử dụng `@jsverse/transloco`, bạn có thể di chuyển sang Intlayer bằng cách sử dụng bộ điều hợp tương thích của chúng tôi. Quá trình chuyển đổi này cho phép bạn duy trì cú pháp template hiện có trong khi tận dụng cấu trúc từ điển mạnh mẽ của Intlayer.
+
+## Phải làm gì
+
+Chỉ cần chạy lệnh khởi tạo trong dự án của bạn:
+
+```bash
+npx intlayer init
+```
+
+Lệnh này sẽ tạo cấu hình `intlayer.config.ts` cần thiết. Sau đó bạn sẽ thay thế các import Transloco của mình bằng các module `@intlayer/transloco` hoặc dựa vào các bí danh build.
+
+## Những gì diễn ra bên dưới
+
+Transloco sử dụng các phạm vi và `TranslocoService` (`translate`, `selectTranslate`), cùng với các directive cấu trúc (`*transloco="let t"`) và pipe (`| transloco`).
+
+Bên dưới:
+
+- **Phạm vi:** Ánh xạ tự nhiên đến các key từ điển Intlayer, cung cấp một cách loại bỏ tuyệt vời cho tối ưu hóa bundle.
+- **Service & Directive:** Bộ điều hợp Angular của Intlayer thay thế liền mạch các provider, cho phép các pipe và directive template hiện có của bạn giải quyết các chuỗi dựa trên các từ điển Intlayer.
+- **Phân tích tại thời điểm build:** Bộ phân tích TypeScript nhận ra các lời gọi `instant/get`, và việc loại bỏ fallback đảm bảo tính chính xác ngay cả khi việc sử dụng template không thể theo dõi tĩnh được.

package/docs/vi/compat/vue-i18n.md

@@ -0,0 +1,58 @@
+---
+createdAt: 2026-06-13
+updatedAt: 2026-06-13
+title: "Di Chuyển Từ Vue I18n Sang Intlayer"
+description: "Tìm hiểu cách di chuyển ứng dụng Vue của bạn từ vue-i18n sang Intlayer bằng bộ điều hợp tương thích."
+keywords:
+  - vue-i18n
+  - vue
+  - intlayer
+  - migration
+  - compat
+slugs:
+  - doc
+  - compatibility
+  - vue-i18n
+history:
+  - version: 9.0.0
+    date: 2026-06-13
+    changes: "Khởi tạo lịch sử"
+author: aymericzip
+---
+
+# Di Chuyển Từ Vue I18n Sang Intlayer
+
+Nếu ứng dụng Vue của bạn hiện đang sử dụng `vue-i18n`, bạn có thể di chuyển sang Intlayer mà không cần viết lại các component hoặc dịch các hook. Intlayer cung cấp một bộ điều hợp tương thích phản chiếu hoàn hảo API của `vue-i18n` trong khi tận dụng các tính năng mạnh mẽ của Intlayer bên dưới.
+
+## Phải làm gì
+
+Để bắt đầu, chỉ cần chạy lệnh khởi tạo trong dự án của bạn:
+
+```bash
+npx intlayer init
+```
+
+Trong quá trình khởi tạo, Intlayer sẽ thiết lập file cấu hình (`intlayer.config.ts`) và chuẩn bị dự án của bạn để di chuyển. Bạn chỉ cần thêm plugin Intlayer vào cấu hình Vite của mình để tự động tạo bí danh cho các import `vue-i18n`.
+
+```typescript fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vueI18nVitePlugin from "@intlayer/vue-i18n/plugin";
+
+export default defineConfig({
+  plugins: [vue(), vueI18nVitePlugin()],
+});
+```
+
+## Những gì diễn ra bên dưới
+
+`vueI18nVitePlugin` chèn một bí danh module vào bundler của bạn. Bất kỳ import nào của `vue-i18n` trong codebase của bạn sẽ được chuyển hướng trong suốt sang `@intlayer/vue-i18n`.
+
+**Bên dưới, bộ điều hợp xử lý cú pháp `vue-i18n` phức tạp một cách gốc:**
+
+- **Nội suy & Số nhiều:** Giải quyết các nội suy `{name}` và danh sách `{0}`. Số nhiều kiểu pipe (`"car | cars"`) được chuyển đổi thành các node enumeration/plural của Intlayer dựa trên ngữ nghĩa vị trí.
+- **Định dạng:** Các hàm như `d()` và `n()` bao bọc `Intl` bên dưới, tuân thủ `datetimeFormats` và `numberFormats` được xác định trong các tùy chọn của bạn.
+- **Trạng thái toàn cục & cục bộ:** `global.locale` được ánh xạ tới một `WritableComputedRef` được hỗ trợ bởi client Intlayer, vì vậy reactivity hoạt động chính xác như mong đợi (ví dụ: `locale.value = 'fr'`).
+- **Directive:** Directive `v-t` được đăng ký và hoạt động bình thường.
+
+Ứng dụng của bạn tiếp tục hiển thị chính xác như trước, nhưng nội dung được cung cấp bởi các từ điển Intlayer của bạn, mang lại cho bạn type safety, tối ưu hóa bundle tốt hơn và tích hợp CMS liền mạch.

package/docs/vi/compiler.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-03-12
+updatedAt: 2026-06-23
 title: Trình Biên Dịch Intlayer | Trích Xuất Nội Dung Tự Động cho i18n
 description: Tự động hóa quy trình quốc tế hóa của bạn với Trình Biên Dịch Intlayer. Trích xuất nội dung trực tiếp từ các component để i18n nhanh hơn và hiệu quả hơn trong Vite, Next.js và nhiều hơn nữa.
 keywords:
@@ -60,6 +60,8 @@ Như một giải pháp thay thế, để tự động hóa quy trình i18n củ
 
 ## Cách sử dụng
 
+> The quickest way to wire the compiler in is the interactive setup: run `npx intlayer init --interactive` and select **Compiler**. On Vite there is nothing to configure — the compiler is plugged in directly through the `intlayerCompiler()` plugin. On Next.js the command scaffolds the `babel.config.js` shown below. The non-interactive `intlayer init` leaves the compiler setup untouched.
+
 <Tabs>
  <Tab value='vite'>
 

package/docs/vi/configuration.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-06-17
+updatedAt: 2026-06-23
 title: Cấu hình (Configuration)
 description: Tìm hiểu cách cấu hình Intlayer cho ứng dụng của bạn. Hiểu các cài đặt và tùy chọn khác nhau có sẵn để tùy chỉnh Intlayer theo nhu cầu của bạn.
 keywords:
@@ -14,6 +14,9 @@ slugs:
   - concept
   - configuration
 history:
+  - version: 9.0.0
+    date: 2026-06-24
+    changes: "Add `enableProxy` option to the routing configuration"
   - version: 8.10.0
     date: 2026-06-17
     changes: "Thêm tùy chọn `format` vào cấu hình từ điển"
@@ -882,6 +885,21 @@ Các cài đặt về cách nội dung được quản lý trong ứng dụng, b
 
 ---
 
+### Cấu hình Hệ thống
+
+Các cài đặt liên quan đến các đường dẫn nội bộ và kết quả đầu ra của Intlayer. Các cài đặt này thường là nội bộ và không cần phải được sửa đổi bởi người dùng.
+
+| Field                     | Description                                                                   | Type     | Default                           | Example              | Note                                                                  |
+| ------------------------- | ----------------------------------------------------------------------------- | -------- | --------------------------------- | -------------------- | --------------------------------------------------------------------- |
+| `baseDir`                 | Thư mục cơ sở cho dự án.                                                      | `string` | `process.cwd()`                   | `'/path/to/project'` | Được sử dụng để giải quyết tất cả các thư mục liên quan đến Intlayer. |
+| `dictionariesDir`         | Đường dẫn thư mục để lưu trữ từ điển bản địa hóa.                             | `string` | `'.intlayer/dictionary'`          |                      |                                                                       |
+| `moduleAugmentationDir`   | Thư mục để tăng cường module, cho phép có gợi ý IDE tốt hơn và kiểm tra loại. | `string` | `'.intlayer/types'`               | `'intlayer-types'`   | Hãy chắc chắn bao gồm điều này trong `tsconfig.json`.                 |
+| `unmergedDictionariesDir` | Thư mục để lưu trữ các từ điển chưa được hợp nhất.                            | `string` | `'.intlayer/unmerged_dictionary'` |                      |                                                                       |
+| `typesDir`                | Thư mục để lưu trữ các loại từ điển.                                          | `string` | `'.intlayer/types'`               |                      |                                                                       |
+| `mainDir`                 | Thư mục nơi lưu trữ các tệp ứng dụng chính.                                   | `string` | `'.intlayer/main'`                |                      |                                                                       |
+| `configDir`               | Thư mục nơi lưu trữ các tệp cấu hình.                                         | `string` | `'.intlayer/config'`              |                      |                                                                       |
+| `cacheDir`                | Thư mục nơi lưu trữ các tệp bộ nhớ đệm.                                       | `string` | `'.intlayer/cache'`               |                      |                                                                       |
+
 ### Cấu hình Dictionary (Dictionary)
 
 Tham số điều khiển các hoạt động của dictionary, bao gồm hành vi tự động điền (auto-fill) và thế hệ nội dung.
@@ -990,22 +1008,6 @@ Các tùy chọn build được áp dụng cho các plugin `@intlayer/babel` và
 
 ---
 
-### Cấu hình Hệ thống (System)
-
-Các cài đặt này dành cho người dùng nâng cao và dành cho cấu hình nội bộ của Intlayer.
-
-| Trường                    | Mô tả                                              | Kiểu dữ liệu | Mặc định                          | Ví dụ | Nhận xét |
-| ------------------------- | -------------------------------------------------- | ------------ | --------------------------------- | ----- | -------- |
-| `dictionariesDir`         | Thư mục chứa các dictionary đã biên dịch.          | `string`     | `'.intlayer/dictionary'`          |       |          |
-| `moduleAugmentationDir`   | Thư mục chứa module augmentation TypeScript.       | `string`     | `'.intlayer/types'`               |       |          |
-| `unmergedDictionariesDir` | Thư mục lưu trữ các dictionary chưa được hợp nhất. | `string`     | `'.intlayer/unmerged_dictionary'` |       |          |
-| `typesDir`                | Thư mục chứa các kiểu dữ liệu đã tạo.              | `string`     | `'.intlayer/types'`               |       |          |
-| `mainDir`                 | Thư mục chứa các tệp chính của Intlayer.           | `string`     | `'.intlayer/main'`                |       |          |
-| `configDir`               | Thư mục chứa các tệp cấu hình đã được biên dịch.   | `string`     | `'.intlayer/config'`              |       |          |
-| `cacheDir`                | Thư mục chứa các tệp cache.                        | `string`     | `'.intlayer/cache'`               |       |          |
-
----
-
 ### Cấu hình Compiler (Compiler)
 
 Trình kiểm soát trình biên dịch Intlayer, thu thập các bộ từ điển trực tiếp từ các component của bạn.

package/docs/vi/custom_domains.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-02
-updatedAt: 2026-04-02
+updatedAt: 2026-06-23
 title: Tên miền tùy chỉnh
 description: Tìm hiểu cách cấu hình điều hướng ngôn ngữ dựa trên tên miền trong Intlayer để phục vụ các ngôn ngữ khác nhau từ các tên miền riêng biệt.
 keywords:

package/docs/vi/custom_url_rewrites.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-01-26
+updatedAt: 2026-06-23
 title: Viết lại URL Tùy chỉnh
 description: Tìm hiểu cách cấu hình và sử dụng viết lại URL tùy chỉnh trong Intlayer để định nghĩa các đường dẫn theo locale.
 keywords:

package/docs/vi/dictionary/content_file.md

@@ -609,13 +609,6 @@ Schema JSON được sử dụng để xác thực cấu trúc của từ điể
 
 Chỉ ra liệu từ điển đã được tự động điền từ các nguồn bên ngoài hay chưa. Trong trường hợp có xung đột, các từ điển cơ sở sẽ ghi đè lên các từ điển được tự động điền.
 
-##### `location` ('distant' | 'locale')
-
-Chỉ ra vị trí của từ điển:
-
-- `'locale'`: Từ điển cục bộ (từ các tệp nội dung)
-- `'distant'`: Từ điển từ xa (từ nguồn bên ngoài)
-
 ## Các loại nút nội dung
 
 Intlayer cung cấp một số loại nút nội dung chuyên biệt mở rộng các giá trị nguyên thủy cơ bản:

package/docs/vi/dictionary/enumeration.md

@@ -269,205 +269,6 @@ document.getElementById("cars")!.textContent = content.numberOfCar(6);
   </Tab>
 </Tabs>
 
-## Tài nguyên bổ sung
-
-Để biết thêm thông tin chi tiết về cấu hình và cách sử dụng, hãy tham khảo các tài nguyên sau:
-
-- [Tài liệu CLI Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/cli/index.md)
-- [Tài liệu React Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_create_react_app.md)
-- [Tài liệu Next Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_nextjs_15.md)
-
-Những tài nguyên này cung cấp thêm những hiểu biết sâu sắc về cách thiết lập và sử dụng Intlayer trong các môi trường khác nhau và với các framework đa dạng.
-
-### Using Ordinal Enumeration
-
-<Tabs group="framework">
-  <Tab label="React" value="react">
-
-To use this in a React component, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const RankingComponent: FC<{ count: number }> = ({ count }) => {
-  const { ordinal } = useIntlayer("ranking_component");
-
-  // Get the last digit to determine the correct suffix
-  const lastDigit = Math.abs(count) % 10;
-
-  return (
-    <div>
-      <p>
-        {
-          ordinal(lastDigit)({ count }) // e.g., "5th place" for count=5
-        }
-      </p>
-    </div>
-  );
-};
-```
-
-  </Tab>
-  <Tab label="Next.js" value="nextjs">
-
-To use this in Next.js Client Components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-"use client";
-
-import type { FC } from "react";
-import { useIntlayer } from "next-intlayer";
-
-const RankingComponent: FC<{ count: number }> = ({ count }) => {
-  const { ordinal } = useIntlayer("ranking_component");
-  const lastDigit = Math.abs(count) % 10;
-
-  return (
-    <div>
-      <p>{ordinal(lastDigit)({ count })}</p>
-    </div>
-  );
-};
-
-export default RankingComponent;
-```
-
-  </Tab>
-  <Tab label="Vue" value="vue">
-
-To use this in Vue components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
-
-```vue fileName="**/*.vue"
-<script setup lang="ts">
-import { useIntlayer } from "vue-intlayer";
-
-defineProps<{ count: number }>();
-
-const { ordinal } = useIntlayer("ranking_component");
-</script>
-
-<template>
-  <div>
-    <p>{{ ordinal(Math.abs(count) % 10)({ count }) }}</p>
-  </div>
-</template>
-```
-
-  </Tab>
-  <Tab label="Svelte" value="svelte">
-
-To use this in Svelte components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
-
-```svelte fileName="**/*.svelte"
-<script lang="ts">
-import { useIntlayer } from "svelte-intlayer";
-
-export let count: number;
-
-const content = useIntlayer("ranking_component");
-$: lastDigit = Math.abs(count) % 10;
-</script>
-
-<div>
-  <p>{$content.ordinal(lastDigit)({ count })}</p>
-</div>
-```
-
-  </Tab>
-  <Tab label="Preact" value="preact">
-
-To use this in Preact components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "preact";
-import { useIntlayer } from "preact-intlayer";
-
-const RankingComponent: FC<{ count: number }> = ({ count }) => {
-  const { ordinal } = useIntlayer("ranking_component");
-  const lastDigit = Math.abs(count) % 10;
-
-  return (
-    <div>
-      <p>{ordinal(lastDigit)({ count })}</p>
-    </div>
-  );
-};
-
-export default RankingComponent;
-```
-
-  </Tab>
-  <Tab label="Solid" value="solid">
-
-To use this in SolidJS components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { Component } from "solid-js";
-import { useIntlayer } from "solid-intlayer";
-
-const RankingComponent: Component<{ count: number }> = (props) => {
-  const { ordinal } = useIntlayer("ranking_component");
-
-  return (
-    <div>
-      <p>{ordinal(Math.abs(props.count) % 10)({ count: props.count })}</p>
-    </div>
-  );
-};
-
-export default RankingComponent;
-```
-
-  </Tab>
-  <Tab label="Angular" value="angular">
-
-To use this in Angular components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
-
-```typescript fileName="app.component.ts" codeFormat="typescript"
-import { Component, Input } from "@angular/core";
-import { useIntlayer } from "angular-intlayer";
-
-@Component({
-  selector: "app-ranking",
-  template: `
-    <div>
-      <p>{{ content().ordinal(lastDigit())({ count }) }}</p>
-    </div>
-  `,
-})
-export class RankingComponent {
-  @Input() count!: number;
-
-  content = useIntlayer("ranking_component");
-
-  lastDigit() {
-    return Math.abs(this.count) % 10;
-  }
-}
-```
-
-  </Tab>
-  <Tab label="Vanilla JS" value="vanilla">
-
-To use this with `vanilla-intlayer`, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
-
-```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
-import { installIntlayer, useIntlayer } from "vanilla-intlayer";
-
-installIntlayer();
-
-const content = useIntlayer("ranking_component");
-const lastDigit = Math.abs(5) % 10;
-
-document.getElementById("ranking")!.textContent = content.ordinal(lastDigit)({
-  count: 5,
-});
-```
-
-  </Tab>
-</Tabs>
-
 ## Combining Enumeration with Insert for Ordinal Numbers
 
 A common use case is displaying ordinal numbers (1st, 2nd, 3rd, etc.). You can combine `enu` with `insert` to create dynamic ordinal content:

package/docs/vi/dictionary/insertion.md

@@ -114,8 +114,6 @@ Khi tích hợp với React Intlayer hoặc Next Intlayer, bạn chỉ cần cun
 
 ## Sử dụng Nội dung Chèn với React Intlayer
 
-## Sử dụng Nội dung Chèn với React Intlayer
-
 Để sử dụng nội dung chèn trong một component React, hãy import và sử dụng hook `useIntlayer` từ package `react-intlayer`. Hook này lấy nội dung theo key được chỉ định và cho phép bạn truyền vào một đối tượng ánh xạ mỗi placeholder trong nội dung với giá trị bạn muốn hiển thị.
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}

package/docs/vi/dictionary/nesting.md

@@ -29,6 +29,45 @@ author: aymericzip
 
 Trong Intlayer, lồng nội dung được thực hiện thông qua hàm `nest`, cho phép bạn tham chiếu và tái sử dụng nội dung từ một từ điển khác. Thay vì sao chép nội dung, bạn có thể trỏ đến một module nội dung hiện có bằng khóa của nó.
 
+## Thiết lập Nesting
+
+Để thiết lập nesting trong dự án Intlayer của bạn, trước tiên bạn định nghĩa nội dung cơ sở mà bạn muốn tái sử dụng. Sau đó, trong một module nội dung riêng biệt, bạn sử dụng hàm `nest` để import nội dung đó.
+
+### Từ điển cơ bản
+
+Dưới đây là một ví dụ về một từ điển cơ bản để lồng vào một từ điển khác:
+
+```typescript fileName="firstDictionary.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { type Dictionary } from "intlayer";
+
+const firstDictionary = {
+  key: "key_of_my_first_dictionary",
+  content: {
+    content: "content",
+    subContent: {
+      contentNumber: 0,
+      contentString: "string",
+    },
+  },
+} satisfies Dictionary;
+
+export default firstDictionary;
+```
+
+```json fileName="firstDictionary.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "key_of_my_first_dictionary",
+  "content": {
+    "content": "content",
+    "subContent": {
+      "contentNumber": 0,
+      "contentString": "string"
+    }
+  }
+}
+```
+
 ## Thiết lập lồng nội dung
 
 <Tabs group="framework">

package/docs/vi/dictionary/translation.md

@@ -259,64 +259,3 @@ document.getElementById("welcome-message")!.textContent = String(
 
   </Tab>
 </Tabs>
-
-## Đối tượng Nội dung Tùy chỉnh
-
-`intlayer` hỗ trợ các đối tượng nội dung tùy chỉnh cho việc dịch, cho phép bạn định nghĩa các cấu trúc phức tạp hơn trong khi vẫn đảm bảo an toàn kiểu. Dưới đây là một ví dụ với một đối tượng tùy chỉnh:
-
-```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { t, type Dictionary } from "intlayer";
-
-interface ICustomContent {
-  title: string;
-  content: string;
-}
-
-const customContent = {
-  key: "custom_content",
-  content: {
-    profileText: t<ICustomContent>({
-      en: {
-        title: "Page Title",
-        content: "Page Content",
-      },
-      fr: {
-        title: "Titre de la Page",
-        content: "Contenu de la Page",
-      },
-      es: {
-        title: "Título de la Página",
-        content: "Contenido de la Página",
-      },
-    }),
-  },
-} satisfies Dictionary;
-
-export default customContent;
-```
-
-```json fileName="**/*.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "custom_content",
-  "content": {
-    "profileText": {
-      "nodeType": "translation",
-      "translation": {
-        "en": {
-          "title": "Tiêu đề Trang",
-          "content": "Nội dung Trang"
-        },
-        "fr": {
-          "title": "Titre de la Page",
-          "content": "Contenu de la Page"
-        },
-        "es": {
-          "title": "Tiêu đề Trang",
-          "content": "Nội dung Trang"
-        }
-      }
-    }
-  }
-}
-```