@intlayer/docs 9.0.0-canary.6 → 9.0.0-canary.8

package/docs/vi/compiler.md

@@ -81,12 +81,15 @@ Cập nhật file `vite.config.ts` của bạn để bao gồm plugin `intlayerC
 
 ```ts fileName="vite.config.ts"
 import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 export default defineConfig({
   plugins: [
-    intlayer(),
-    intlayerCompiler(), // Thêm plugin trình biên dịch
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
   ],
 });
 ```

package/docs/vi/custom_domains.md

@@ -172,10 +172,16 @@ Plugin Vite `intlayerProxy` áp dụng logic tương tự trong quá trình phá
 
 ```typescript fileName="vite.config.ts"
 import { defineConfig } from "vite";
-import { intlayerProxy } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 export default defineConfig({
-  plugins: [intlayerProxy()],
+  plugins: [
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
+  ],
 });
 ```
 

package/docs/vi/custom_url_rewrites.md

@@ -342,10 +342,16 @@ export function middleware(request: NextRequest) {
 
 ```typescript fileName="vite.config.ts"
 import { defineConfig } from "vite";
-import { intlayerProxy } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 export default defineConfig({
-  plugins: [intlayerProxy()],
+  plugins: [
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
+  ],
 });
 ```
 

package/docs/vi/dynamic_dictionaries/index.md

@@ -1,13 +1,12 @@
 ---
 createdAt: 2026-06-12
-updatedAt: 2026-06-12
-title: Từ Điển Động
-description: Tổng quan về ba tính năng từ điển động của Intlayer — bộ sưu tập, biến thể và bản ghi động — để xây dựng nội dung i18n linh hoạt, được điều khiển bằng runtime.
+updatedAt: 2026-06-26
+title: Từ điển động
+description: Tổng quan về các tính năng từ điển động của Intlayer — bộ sưu tập và biến thể — để xây dựng nội dung i18n linh hoạt, được điều khiển trong thời gian chạy.
 keywords:
-  - Từ Điển Động
-  - Bộ Sưu Tập
-  - Biến Thể
-  - Bản Ghi Động
+  - Từ điển động
+  - Bộ sưu tập
+  - Biến thể
   - Intlayer
   - Quốc tế hóa
 slugs:
@@ -18,31 +17,38 @@ history:
   - version: 9.0.0
     date: 2026-06-12
     changes: "Phát hành tính năng từ điển động"
+  - version: 9.1.0
+    date: 2026-06-26
+    changes: "Hợp nhất bản ghi động vào biến thể — `variant` giờ chấp nhận một chuỗi hoặc một đối tượng"
 author: aymericzip
 ---
 
-# Từ Điển Động
+# Từ điển động
 
-Intlayer hỗ trợ ba cơ chế để thể hiện nội dung vượt ra ngoài một từ điển tĩnh duy nhất cho mỗi khóa. Mỗi cơ chế được khai báo thông qua một **trường siêu dữ liệu (metadata) cấp cao nhất** trong tệp nội dung; không cần hàm bao (wrapper).
+Intlayer hỗ trợ hai cơ chế để diễn đạt nội dung vượt ra ngoài một từ điển tĩnh duy nhất cho mỗi khóa. Mỗi cơ chế được khai báo qua một **trường metadata cấp cao nhất** trong tệp nội dung; không cần hàm bao bọc.
 
-| Tính năng                                                                                                             | Trường siêu dữ liệu | Bộ chọn trong `useIntlayer` |
-| --------------------------------------------------------------------------------------------------------------------- | ------------------- | --------------------------- |
-| [Bộ Sưu Tập](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dynamic_dictionaries/collections.md)       | `item: N`           | `{ item: N }`               |
-| [Biến Thể](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dynamic_dictionaries/variants.md)            | `variant: "name"`   | `{ variant: "name" }`       |
-| [Bản Ghi Động](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dynamic_dictionaries/dynamic_content.md) | `meta: { id, … }`   | `{ id, … }`                 |
+| Tính năng                                                                                                       | Trường metadata                           | Bộ chọn trong `useIntlayer`                       |
+| --------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ------------------------------------------------- |
+| [Bộ sưu tập](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dynamic_dictionaries/collections.md) | `item: N`                                 | `{ item: N }`                                     |
+| [Biến thể](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dynamic_dictionaries/variants.md)      | `variant: "name"` _hoặc_ `variant: { … }` | `{ variant: "name" }` _hoặc_ `{ variant: { … } }` |
 
-Cả ba cơ chế đều kết hợp với đối số ngôn ngữ (locale) và hỗ trợ tải chọn lọc / tải lười (lazy loading) thông qua `importMode`.
+Cả hai đều kết hợp với đối số locale và hỗ trợ tải chọn lọc / lười qua `importMode`.
 
-## Khi nào nên sử dụng tính năng nào
+## Khi nào dùng cái nào
 
-- **Bộ sưu tập** — danh sách các mục có thứ tự được quản lý trong các tệp riêng biệt (mục FAQ, bài viết blog, sản phẩm).
-- **Biến thể** — các lựa chọn nội dung thay thế được đặt tên cho các thử nghiệm A/B, biểu ngữ theo mùa hoặc cờ tính năng (feature flags).
-- **Bản ghi động** — nội dung được truy xuất tại runtime bằng một ID ẩn (bản ghi CMS, nội dung dành riêng cho người dùng).
+- **Bộ sưu tập** — danh sách mục được sắp xếp, quản lý trong các tệp riêng (mục FAQ, bài blog, sản phẩm).
+- **Biến thể** — các lựa chọn nội dung được đặt tên hoặc có cấu trúc:
+  - biến thể **chuỗi** cho thử nghiệm A/B, banner theo mùa hoặc feature flag;
+  - biến thể **đối tượng** cho bản ghi CMS, nội dung riêng theo người dùng, hoặc bất kỳ nội dung nào được định địa chỉ bằng một tập hợp trường ("bản ghi động" trước đây).
 
-## Giải quyết xung đột bộ chọn
+> Các phiên bản trước cung cấp một trường `meta` riêng cho nội dung được khóa theo bản ghi. Nó đã được hợp nhất vào `variant`: hãy truyền một **đối tượng** cho `variant` thay vì dùng `meta`.
 
-Khi có nhiều bộ chọn tồn tại trên cùng một từ điển, thứ tự ưu tiên giải quyết là:
+## Khử nhập nhằng bộ chọn
+
+Một khóa có thể khai báo cả hai chiều cùng lúc (ví dụ một bộ sưu tập mà mỗi mục có một biến thể). Chúng được phân giải theo thứ tự:
 
 ```
-variant → meta → item
+variant → item
 ```
+
+Vì vậy, `{ variant: "promo" }` trên khóa variant × item trả về mọi mục promo dưới dạng mảng, và thêm `{ item: 2 }` thu hẹp lại còn một mục duy nhất.

package/docs/vi/dynamic_dictionaries/variants.md

@@ -1,13 +1,15 @@
 ---
 createdAt: 2026-06-12
-updatedAt: 2026-06-12
-title: Biến Thể
-description: Sử dụng trường siêu dữ liệu variant trong các tệp nội dung Intlayer để khai báo các lựa chọn nội dung thay thế được đặt tên (thử nghiệm A/B, biểu ngữ theo mùa, văn bản gắn cờ tính năng) và chuyển đổi giữa chúng tại runtime mà không cần thay đổi mã.
+updatedAt: 2026-06-26
+title: Biến thể
+description: Dùng trường metadata variant trong các tệp nội dung Intlayer để khai báo các lựa chọn nội dung được đặt tên hoặc có cấu trúc — thử nghiệm A/B, banner theo mùa, nội dung gắn feature flag, bản ghi CMS, nội dung riêng theo người dùng — và chuyển đổi giữa chúng trong thời gian chạy mà không cần đổi mã.
 keywords:
-  - Biến Thể
+  - Biến thể
   - Thử nghiệm A/B
-  - Cờ Tính Năng
-  - Nội Dung Động
+  - Feature Flag
+  - Nội dung động
+  - Bản ghi động
+  - CMS
   - Intlayer
   - Quốc tế hóa
 slugs:
@@ -17,17 +19,27 @@ slugs:
 history:
   - version: 9.0.0
     date: 2026-06-12
-    changes: "Phát hành tính năng từ điển biến thể"
+    changes: "Phát hành tính năng biến thể"
+  - version: 9.1.0
+    date: 2026-06-26
+    changes: "`variant` giờ chấp nhận một chuỗi hoặc một đối tượng — `meta` / bản ghi động trước đây được khai báo dưới dạng biến thể đối tượng"
 author: aymericzip
 ---
 
-# Biến Thể
+# Biến thể
 
-Một **biến thể** (variant) là một tập hợp các tệp nội dung chia sẻ cùng một khóa từ điển (`key`) nhưng mỗi tệp mang một tên `variant` khác nhau. Intlayer phục vụ tệp phù hợp dựa trên bộ chọn được truyền vào `useIntlayer`.
+Một **biến thể** là một tập hợp các tệp nội dung dùng chung `key` từ điển nhưng mỗi tệp mang một giá trị `variant` khác nhau. Intlayer phục vụ tệp phù hợp dựa trên bộ chọn được truyền cho `useIntlayer`.
 
-## Khai báo các biến thể
+Giá trị `variant` có thể có **hai dạng**:
 
-Mỗi tệp đại diện cho một lựa chọn thay thế có tên. Việc bỏ qua `variant` (hoặc đặt thành `"default"`) sẽ đánh dấu tệp đó làm phương án mặc định (fallback).
+- **Một chuỗi** — một lựa chọn được đặt tên duy nhất (thử nghiệm A/B, banner theo mùa, feature flag).
+- **Một đối tượng** — một bộ phân biệt có cấu trúc được định địa chỉ bằng một tập hợp trường (bản ghi CMS, nội dung riêng theo người dùng, bất kỳ nội dung nào được khóa bằng một ID mờ). Toàn bộ đối tượng chính là danh tính: bộ chọn phải cung cấp một đối tượng **bằng nhau** để phân giải mục.
+
+> Dạng đối tượng thay thế trường `meta` trước đây. Ở bất cứ đâu trước kia bạn viết `meta: { id, … }`, hãy viết `variant: { id, … }`, và chọn nó bằng `{ variant: { id, … } }`.
+
+## Biến thể được đặt tên (chuỗi)
+
+Mỗi tệp đại diện cho một lựa chọn được đặt tên. Bỏ qua `variant` (hoặc đặt thành `"default"`) đánh dấu nó là dự phòng.
 
 ```ts fileName="hero-banner.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { t, type Dictionary } from "intlayer";
@@ -65,9 +77,9 @@ const dictionary = {
 export default dictionary;
 ```
 
-## Sử dụng biến thể
+### Sử dụng biến thể được đặt tên
 
-### Biến thể mặc định
+#### Biến thể mặc định
 
 <Tabs group="framework">
   <Tab label="React" value="react">
@@ -209,7 +221,7 @@ export default dictionary;
   </Tab>
 </Tabs>
 
-### Biến thể có tên
+#### Biến thể được đặt tên
 
 ```tsx
 const { headline, cta } = useIntlayer("hero-banner", {
@@ -217,18 +229,264 @@ const { headline, cta } = useIntlayer("hero-banner", {
 });
 ```
 
-### Biến thể có tên với ngôn ngữ cụ thể
+#### Biến thể được đặt tên với locale tường minh
 
 ```tsx
 const content = useIntlayer("hero-banner", {
   variant: "black_friday",
-  locale: "vi",
+  locale: "fr",
 });
 ```
 
+## Biến thể đối tượng (có cấu trúc)
+
+Một biến thể đối tượng định địa chỉ nội dung bằng một tập hợp cặp khóa-giá trị tùy ý được khai báo trong trường `variant` — giúp mô hình hóa bản ghi CMS, nội dung riêng theo người dùng, hoặc bất kỳ nội dung nào có khóa là một ID mờ. **Toàn bộ đối tượng** chính là danh tính: bộ chọn phải cung cấp một đối tượng bằng nhau để mục được phân giải.
+
+```ts fileName="product.abc.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { t, type Dictionary } from "intlayer";
+
+const dictionary = {
+  key: "product",
+  variant: { id: "prod_abc", userId: "user_123" },
+  content: {
+    name: t({ en: "Widget Pro", fr: "Widget Pro" }),
+    description: t({ en: "The best widget.", fr: "Le meilleur widget." }),
+  },
+} satisfies Dictionary;
+
+export default dictionary;
+```
+
+```ts fileName="product.abcd.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { t, type Dictionary } from "intlayer";
+
+const dictionary = {
+  key: "product",
+  variant: { id: "prod_abcd", userId: "user_123" },
+  content: {
+    name: t({ en: "Widget Lite", fr: "Widget Lite" }),
+    description: t({ en: "A lighter option.", fr: "Une option plus légère." }),
+  },
+} satisfies Dictionary;
+
+export default dictionary;
+```
+
+### Sử dụng biến thể đối tượng
+
+Truyền đối tượng khớp cho `variant`. Mọi trường được khai báo trên từ điển phải được cung cấp và bằng nhau; nếu không, kết quả là `null`. Thứ tự các trường không quan trọng.
+
+<Tabs group="framework">
+  <Tab label="React" value="react">
+    ```tsx fileName="Product.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { useIntlayer } from "react-intlayer";
+
+    export const Product = ({
+      productId,
+      userId,
+    }: {
+      productId: string;
+      userId: string;
+    }) => {
+      const content = useIntlayer("product", {
+        variant: { id: productId, userId },
+      });
+
+      if (!content) return null;
+
+      return <p>{content.description}</p>;
+    };
+    ```
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+    ```tsx fileName="Product.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { useIntlayer } from "next-intlayer";
+
+    export const Product = ({
+      productId,
+      userId,
+    }: {
+      productId: string;
+      userId: string;
+    }) => {
+      const content = useIntlayer("product", {
+        variant: { id: productId, userId },
+      });
+
+      if (!content) return null;
+
+      return <p>{content.description}</p>;
+    };
+    ```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+    ```vue fileName="Product.vue" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    <script setup>
+    import { useIntlayer } from "vue-intlayer";
+
+    const props = defineProps({
+      productId: String,
+      userId: String,
+    });
+
+    const content = useIntlayer("product", {
+      variant: { id: props.productId, userId: props.userId },
+    });
+    </script>
+
+    <template>
+      <p v-if="content">{{ content.description }}</p>
+    </template>
+    ```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+    ```svelte fileName="Product.svelte" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    <script lang="ts">
+    import { useIntlayer } from "svelte-intlayer";
+
+    export let productId: string;
+    export let userId: string;
+
+    const content = useIntlayer("product", {
+      variant: { id: productId, userId },
+    });
+    </script>
+
+    {#if $content}
+      <p>{$content.description}</p>
+    {/if}
+    ```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+    ```tsx fileName="Product.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { useIntlayer } from "preact-intlayer";
+
+    export const Product = ({
+      productId,
+      userId,
+    }: {
+      productId: string;
+      userId: string;
+    }) => {
+      const content = useIntlayer("product", {
+        variant: { id: productId, userId },
+      });
+
+      if (!content) return null;
+
+      return <p>{content.description}</p>;
+    };
+    ```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+    ```tsx fileName="Product.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { useIntlayer } from "solid-intlayer";
+
+    export const Product = (props: {
+      productId: string;
+      userId: string;
+    }) => {
+      const content = useIntlayer("product", {
+        variant: { id: props.productId, userId: props.userId },
+      });
+
+      return (
+        <>
+          {content() && <p>{content().description}</p>}
+        </>
+      );
+    };
+    ```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+    ```typescript fileName="product.component.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { Component, Input, OnInit } from "@angular/core";
+    import { useIntlayer } from "angular-intlayer";
+
+    @Component({
+      selector: "app-product",
+      template: `
+        @if (content()) {
+          <p>{{ content().description }}</p>
+        }
+      `,
+    })
+    export class ProductComponent implements OnInit {
+      @Input() productId!: string;
+      @Input() userId!: string;
+
+      content: any;
+
+      ngOnInit() {
+        this.content = useIntlayer("product", {
+          variant: { id: this.productId, userId: this.userId },
+        });
+      }
+    }
+    ```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+    ```javascript fileName="product.js"
+    import { useIntlayer } from "vanilla-intlayer";
+
+    const content = useIntlayer("product", {
+      variant: { id: "prod_abcd", userId: "user_123" },
+    });
+
+    if (content) {
+      document.body.innerHTML = `<p>${content.description}</p>`;
+    }
+    ```
+
+  </Tab>
+</Tabs>
+
+#### Với locale tường minh
+
+```tsx
+const content = useIntlayer("product", {
+  variant: { id: "prod_abc", userId: "user_123" },
+  locale: "fr",
+});
+```
+
+#### Thiếu trường — không khớp
+
+```ts
+// Trả về null: thiếu `userId`, nên đối tượng không khớp với biến thể đã khai báo
+const content = useIntlayer("product", { variant: { id: "prod_abc" } });
+```
+
+## Chế độ tải
+
+Biến thể đối tượng thường được tải lười. Đặt `importMode` trên từ điển để kiểm soát điều này:
+
+```ts contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+const dictionary = {
+  key: "product",
+  importMode: "fetch", // or "dynamic"
+  variant: { id: "prod_abc", userId: "user_123" },
+  content: { … },
+} satisfies Dictionary;
+
+export default dictionary;
+```
+
+Xem [tối ưu hóa bundle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/bundle_optimization.md) để biết chi tiết về các chế độ `static`, `dynamic` và `fetch`.
+
 ## Các trường hợp sử dụng điển hình
 
-- Các thử nghiệm A/B nội dung được điều hướng bởi một khóa thử nghiệm
-- Biểu ngữ theo mùa hoặc biểu ngữ quảng cáo
-- Thông điệp được gắn cờ tính năng (feature flag)
-- Các chiến dịch tiếp thị cụ thể theo từng vùng địa lý
+- Thử nghiệm A/B nội dung được điều khiển bằng khóa thí nghiệm
+- Banner theo mùa hoặc khuyến mãi
+- Thông điệp gắn feature flag
+- Chiến dịch tiếp thị riêng theo locale
+- Nội dung tiếp thị theo từng sản phẩm được quản lý trong CMS
+- Nội dung riêng theo người dùng hoặc tài khoản
+- Bất kỳ nội dung nào được khóa bằng một ID mờ trong thời gian chạy

package/docs/vi/intlayer_with_analog.md

@@ -207,7 +207,11 @@ import analog from "@analogjs/platform";
 export default defineConfig(() => ({
   plugins: [
     analog(),
-    intlayer(), // Thêm plugin Intlayer
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
   ],
 }));
 ```

package/docs/vi/intlayer_with_astro.md

@@ -518,6 +518,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Trình biên dịch Babel'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 Cập nhật `vite.config.ts` của bạn để bao gồm plugin `intlayerCompiler`:
 
 ```ts fileName="vite.config.ts"
@@ -527,7 +529,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // Thêm plugin trình biên dịch
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```

package/docs/vi/intlayer_with_astro_lit.md

@@ -604,6 +604,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Trình biên dịch Babel'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 Cập nhật `vite.config.ts` của bạn để bao gồm plugin `intlayerCompiler`:
 
 ```ts fileName="vite.config.ts"
@@ -613,7 +615,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // Thêm plugin trình biên dịch
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```

package/docs/vi/intlayer_with_astro_preact.md

@@ -559,6 +559,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Trình biên dịch Babel'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 Cập nhật `vite.config.ts` của bạn để bao gồm plugin `intlayerCompiler`:
 
 ```ts fileName="vite.config.ts"
@@ -568,7 +570,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // Thêm plugin trình biên dịch
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```

package/docs/vi/intlayer_with_astro_react.md

@@ -555,6 +555,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Trình biên dịch Babel'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 Cập nhật `vite.config.ts` của bạn để bao gồm plugin `intlayerCompiler`:
 
 ```ts fileName="vite.config.ts"
@@ -564,7 +566,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // Thêm plugin trình biên dịch
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```

package/docs/vi/intlayer_with_astro_solid.md

@@ -555,6 +555,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Trình biên dịch Babel'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 Cập nhật `vite.config.ts` của bạn để bao gồm plugin `intlayerCompiler`:
 
 ```ts fileName="vite.config.ts"
@@ -564,7 +566,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // Thêm plugin trình biên dịch
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```

package/docs/vi/intlayer_with_astro_svelte.md

@@ -559,6 +559,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Trình biên dịch Babel'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 Cập nhật `vite.config.ts` của bạn để bao gồm plugin `intlayerCompiler`:
 
 ```ts fileName="vite.config.ts"
@@ -568,7 +570,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // Thêm plugin trình biên dịch
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```

package/docs/vi/intlayer_with_astro_vanilla.md

@@ -533,6 +533,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Trình biên dịch Babel'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 Cập nhật `vite.config.ts` của bạn để bao gồm plugin `intlayerCompiler`:
 
 ```ts fileName="vite.config.ts"
@@ -542,7 +544,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // Thêm plugin trình biên dịch
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```

package/docs/vi/intlayer_with_astro_vue.md

@@ -569,6 +569,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Trình biên dịch Babel'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 Cập nhật `vite.config.ts` của bạn để bao gồm plugin `intlayerCompiler`:
 
 ```ts fileName="vite.config.ts"
@@ -578,7 +580,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // Thêm plugin trình biên dịch
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```

package/docs/vi/intlayer_with_lynx+react.md

@@ -232,6 +232,8 @@ if (import.meta.webpackHot) {
 Tạo các file **khai báo nội dung** ở bất kỳ đâu trong dự án của bạn (thường là trong `src/`), sử dụng bất kỳ định dạng phần mở rộng nào mà Intlayer hỗ trợ:
 
 - `.content.json`
+- `.content.jsonc`
+- `.content.json5`
 - `.content.ts`
 - `.content.tsx`
 - `.content.js`
@@ -239,7 +241,10 @@ Tạo các file **khai báo nội dung** ở bất kỳ đâu trong dự án c
 - `.content.mjs`
 - `.content.mjx`
 - `.content.cjs`
-- `.content.cjx`
+- `.content.md`
+- `.content.mdx`
+- `.content.yaml`
+- `.content.yml`
 - v.v.
 
 Ví dụ: