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

package/docs/vi/intlayer_with_react_native+expo.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-06-18
-updatedAt: 2026-05-31
+updatedAt: 2026-06-25
 title: "Expo + React Native i18n - Hướng dẫn đầy đủ để dịch ứng dụng của bạn"
 description: "Không còn i18next nữa. Hướng dẫn 2026 để xây dựng ứng dụng Expo + React Native đa ngôn ngữ (i18n). Dịch với các AI agent và tối ưu hóa kích thước bundle, SEO và hiệu suất."
 keywords:
@@ -17,6 +17,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-react-native-template
 applicationShowcase: https://intlayer-react-native.vercel.app
 history:
+  - version: 9.0.0
+    date: 2026-06-25
+    changes: "Nhập provider và hook trực tiếp từ react-native-intlayer; react-intlayer không còn cần thiết như một phụ thuộc trực tiếp"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Cập nhật cách sử dụng API useIntlayer của Solid sang truy cập thuộc tính trực tiếp"
@@ -101,7 +104,7 @@ Việc kết nối các tệp JSON lớn với các thành phần có thể dẫ
 
 <Accordion header="Mở rộng quy mô không có nhà phát triển">
 
-Không chỉ là giải pháp i18n, Intlayer còn cung cấp **[trình chỉnh sửa trực quan](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** và **[CMS đầy đủ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** để giúp bạn quản lý nội dung đa ngôn ngữ của mình trong **thời gian thực**, giúp việc cộng tác với người dịch, người viết quảng cáo và các thành viên khác trong nhóm trở nên liền mạch. Nội dung có thể được lưu trữ cục bộ và/hoặc từ xa.
+Không chỉ là giải pháp i18n, Intlayer còn cung cấp **[trình chỉnh sửa trực quan](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** tự lưu trữ và **[CMS đầy đủ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** để giúp bạn quản lý nội dung đa ngôn ngữ của mình trong **thời gian thực**, giúp việc cộng tác với người dịch, người viết quảng cáo và các thành viên khác trong nhóm trở nên liền mạch. Nội dung có thể được lưu trữ cục bộ và/hoặc từ xa.
 
 </Accordion>
 
@@ -121,27 +124,39 @@ Xem [Mẫu ứng dụng](https://github.com/aymericzip/intlayer-react-native-tem
 Từ dự án React Native của bạn, hãy cài đặt các gói sau:
 
 ```bash packageManager="npm"
-npm cài đặt intlayer phản ứng-intlayer
-cài đặt npm --save-dev Reac -igen-intlayer
-init nội bộ npx
+npx intlayer-cli init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm thêm intlayer phản ứng-intlayer
-pnpm thêm --save-dev Reac -igen-intlayer
-init nội bộ pnpm
+pnpm dlx intlayer-cli init --interactive
 ```
 
-```bash packageManager="sợi"
-sợi thêm lớp trong Reac-inlayer
-thêm sợi --save-dev Reac -igen-intlayer
-init sợi bên trong
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
 ```
 
 ```bash packageManager="bun"
-bun thêm intlayer phản ứng-inlayer
-bun thêm --dev Reac -igen-intlayer
-init x init
+bunx intlayer-cli init --interactive
+```
+
+> Cờ `--interactive` là tùy chọn. Sử dụng `intlayer-cli init` nếu bạn là AI agent.
+
+> Lệnh này sẽ tự động phát hiện môi trường của bạn và cài đặt các gói cần thiết. Ví dụ:
+
+```bash packageManager="npm"
+npm install intlayer react-native-intlayer
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer react-native-intlayer
+```
+
+```bash packageManager="yarn"
+yarn add intlayer react-native-intlayer
+```
+
+```bash packageManager="bun"
+bun add intlayer react-native-intlayer
 ```
 
 ### Các gói
@@ -149,17 +164,14 @@ init x init
 - **intlayer**  
   Bộ công cụ i18n cốt lõi dùng để cấu hình, nội dung từ điển, tạo kiểu, và các lệnh CLI.
 
-- **react-intlayer**  
-  Tích hợp React cung cấp các context provider và React hook mà bạn sẽ dùng trong React Native để lấy và chuyển đổi ngôn ngữ.
-
 - **react-native-intlayer**  
-  Tích hợp React Native cung cấp plugin Metro để tích hợp Intlayer với bundler của React Native.
+  Tích hợp React Native cung cấp các context provider và React hook mà bạn sẽ dùng để lấy và chuyển đổi ngôn ngữ, các polyfill cho React Native, và plugin Metro để tích hợp Intlayer với bundler của React Native. Nó tái xuất tất cả mọi thứ từ `react-intlayer`, vì vậy bạn chỉ cần gói duy nhất này trong một ứng dụng React Native.
 
 ---
 
 </Step>
 
-<Step number={3} title="Tạo cấu hình Intlayer">
+<Step number={2} title="Tạo cấu hình Intlayer">
 
 Trong thư mục gốc dự án của bạn (hoặc bất cứ nơi nào thuận tiện), tạo một file **cấu hình Intlayer**. Nó có thể trông như sau:
 
@@ -189,11 +201,11 @@ Trong cấu hình này, bạn có thể:
 - Cấu hình **danh sách các ngôn ngữ được hỗ trợ**.
 - Đặt một ngôn ngữ **mặc định**.
 - Sau này, bạn có thể thêm các tùy chọn nâng cao hơn (ví dụ: ghi log, thư mục nội dung tùy chỉnh, v.v.).
-- Xem thêm tại [tài liệu cấu hình Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/configuration.md).
+- Xem thêm tại [tài liệu cấu hình Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md).
 
 </Step>
 
-<Step number={4} title="Thêm plugin Metro">
+<Step number={3} title="Thêm plugin Metro">
 
 Metro là một trình đóng gói (bundler) cho React Native. Đây là trình đóng gói mặc định cho các dự án React Native được tạo bằng lệnh `react-native init`. Để sử dụng Intlayer với Metro, bạn cần thêm plugin vào file `metro.config.js` của bạn:
 
@@ -213,11 +225,11 @@ module.exports = (async () => {
 
 </Step>
 
-<Step number={5} title="Thêm Intlayer provider">
+<Step number={4} title="Thêm Intlayer provider">
 
 Để giữ đồng bộ ngôn ngữ người dùng trên toàn bộ ứng dụng của bạn, bạn cần bao bọc component gốc của bạn với component `IntlayerProvider` từ `react-native-intlayer`.
 
-> Hãy chắc chắn sử dụng provider từ `react-native-intlayer` thay vì `react-intlayer`. Export từ `react-native-intlayer` bao gồm các polyfill cho web API.
+> Luôn nhập từ `react-native-intlayer`. `IntlayerProvider` của nó bao gồm các polyfill cho web API được sử dụng bởi Intlayer, và gói này tái xuất tất cả các hook và tiện ích từ `react-intlayer`.
 
 Ngoài ra, bạn cần thêm hàm `intlayerPolyfill` vào file `index.js` của bạn để đảm bảo Intlayer hoạt động đúng.
 
@@ -244,11 +256,13 @@ export default RootLayout;
 
 </Step>
 
-<Step number={6} title="Khai báo Nội dung của Bạn">
+<Step number={5} title="Khai báo Nội dung của Bạn">
 
 Tạo các tệp **khai báo nội dung** ở bất kỳ đâu trong dự án của bạn (thường là trong thư mục `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`
@@ -256,7 +270,10 @@ Tạo các tệp **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.
 
 > **Expo Router (web): giữ các tệp `.content.*` bên ngoài thư mục `app/`.** Expo Router coi mọi tệp JavaScript/TypeScript bên trong `app/` là một tuyến đường (route). Trên web, tính năng khám phá tuyến đường của nó quét trực tiếp hệ thống tệp và **không** tuân theo `resolver.blockList` của Metro, do đó `*.content.ts` đặt cùng vị trí sẽ được đăng ký làm tuyến đường. Một tệp như `app/(tabs)/_layout.content.ts` thậm chí còn được phân tích cú pháp dưới dạng bố cục (phần `.content` được đọc dưới dạng hậu tố nền tảng), xung đột với `_layout.tsx` thực và gây ra lỗi:
@@ -315,7 +332,7 @@ export default homeScreenContent;
 
 </Step>
 
-<Step number={7} title="Sử dụng Intlayer trong các Component của bạn">
+<Step number={6} title="Sử dụng Intlayer trong các Component của bạn">
 
 Sử dụng hook `useIntlayer` trong các component con để lấy nội dung đã được bản địa hóa.
 
@@ -323,7 +340,7 @@ Sử dụng hook `useIntlayer` trong các component con để lấy nội dung
 
 ```tsx fileName="app/(tabs)/index.tsx" codeFormat={["typescript", "esm"]}
 import { Image, StyleSheet, Platform } from "react-native";
-import { useIntlayer } from "react-intlayer";
+import { useIntlayer } from "react-native-intlayer";
 import { HelloWave } from "@/components/HelloWave";
 import ParallaxScrollView from "@/components/ParallaxScrollView";
 import { ThemedText } from "@/components/ThemedText";
@@ -370,7 +387,7 @@ export default HomeScreen;
 
 </Step>
 
-<Step number={8} title="Thay đổi Ngôn ngữ Ứng dụng" isOptional={true}>
+<Step number={7} title="Thay đổi Ngôn ngữ Ứng dụng" isOptional={true}>
 
 Để chuyển đổi ngôn ngữ từ bên trong các component của bạn, bạn có thể sử dụng phương thức `setLocale` của hook `useLocale`:
 
@@ -378,7 +395,7 @@ export default HomeScreen;
 import { type FC } from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { getLocaleName } from "intlayer";
-import { useLocale } from "react.intlayer";
+import { useLocale } from "react-native-intlayer";
 
 export const LocaleSwitcher: FC = () => {
   const { setLocale, availableLocales } = useLocale();
@@ -421,7 +438,7 @@ const styles = StyleSheet.create({
 
 Điều này kích hoạt việc render lại tất cả các component sử dụng nội dung Intlayer, giờ đây hiển thị bản dịch cho locale mới.
 
-> Xem thêm tài liệu [`useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/useLocale.md) để biết chi tiết.
+> Xem thêm tài liệu [`useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useLocale.md) để biết chi tiết.
 
 </Step>
 
@@ -496,13 +513,12 @@ Intlayer chủ yếu hướng đến Web Intl API; trên React Native bạn ph
 
 Danh sách kiểm tra:
 
-- Sử dụng các phiên bản mới nhất của `intlayer`, `react-intlayer`, và `react-native-intlayer`.
+- Sử dụng các phiên bản mới nhất của `intlayer` và `react-native-intlayer`.
 - Kích hoạt polyfill của Intlayer.
 - Nếu bạn sử dụng `getLocaleName` hoặc các tiện ích dựa trên Intl-API khác, hãy nhập các polyfill này sớm (ví dụ trong `index.js` hoặc `App.tsx`):
 
 ```ts
 import "intl";
-// Nhập polyfill để hỗ trợ các tính năng Intl khác nhau
 import "@formatjs/intl-getcanonicallocales/polyfill";
 import "@formatjs/intl-locale/polyfill";
 import "@formatjs/intl-pluralrules/polyfill";

package/docs/vi/intlayer_with_react_router_v7.md

@@ -633,6 +633,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"
@@ -642,7 +644,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_react_router_v7_fs_routes.md

@@ -512,6 +512,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"
@@ -521,7 +523,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
   ],
 });
 ```
@@ -592,14 +594,17 @@ Bạn cũng có thể sử dụng `intlayerProxy` để thêm routing phía serv
 ```typescript {3,7} fileName="vite.config.ts"
 import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
-import { intlayer, intlayerProxy } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 export default defineConfig({
   plugins: [
-    intlayerProxy(), // should be placed first
     reactRouter(),
 
-    intlayer(),
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
   ],
 });
 ```

package/docs/vi/intlayer_with_storybook.md

@@ -190,7 +190,13 @@ const config: StorybookConfig = {
     } as const;
 
     const viteConfig = defineConfig(() => ({
-      plugins: [intlayer()],
+      plugins: [
+        intlayer({
+          proxy: {
+            ignore: (req) => req.url?.startsWith("/api"),
+          },
+        }),
+      ],
     }));
 
     return mergeConfig(baseConfig, viteConfig(env));

package/docs/vi/intlayer_with_svelte_kit.md

@@ -614,14 +614,17 @@ goto(localizedPath); // Điều hướng đến /en/about hoặc /fr/about tùy
 
 ```ts fileName="vite.config.ts"
 import { defineConfig } from "vite";
-import { intlayer, intlayerProxy } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 import { sveltekit } from "@sveltejs/kit/vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    intlayerProxy(), // should be placed first
-    intlayer(),
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
     sveltekit(),
   ],],
 });
@@ -719,6 +722,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"
@@ -728,7 +733,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_tanstack+solid.md

@@ -227,11 +227,15 @@ export default defineConfig({
     tanstackStart({
       router: {
         routeFileIgnorePattern:
-          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",
+          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5|md|mdx|yaml|yml)$",
       },
     }),
     solidPlugin({ ssr: true }),
-    intlayer(),
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
   ],
 });
 ```
@@ -567,22 +571,25 @@ Bạn cũng có thể sử dụng `intlayerProxy` để thêm điều hướng p
 
 > Lưu ý rằng để sử dụng `intlayerProxy` trong môi trường production, bạn cần chuyển gói `vite-intlayer` từ `devDependencies` sang `dependencies`.
 
-```typescript {7,14-17} fileName="vite.config.ts"
+```typescript fileName="vite.config.ts"
 import { tanstackStart } from "@tanstack/solid-start/plugin/vite";
 import solid from "vite-plugin-solid";
 import { nitro } from "nitro/vite";
 import { defineConfig } from "vite";
-import { intlayer, intlayerProxy } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 export default defineConfig({
   plugins: [
-    intlayerProxy(), // Proxy phải được đặt trước server nếu bạn sử dụng Nitro
     nitro(),
-    intlayer(),
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
     tanstackStart({
       router: {
         routeFileIgnorePattern:
-          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",
+          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5|md|mdx|yaml|yml)$",
       },
     }),
     solid(),
@@ -825,9 +832,9 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel compiler'>
 
-Cập nhật `vite.config.ts` của bạn để bao gồm plugin `intlayerCompiler`:
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
 
-> Kể từ Intlayer v9, trình biên dịch (compiler) được tích hợp trực tiếp vào plugin `intlayer()` và sẽ tự động kích hoạt khi `compiler.enabled` được thiết lập cùng với đường dẫn `compiler.output`. Việc đăng ký riêng biệt `intlayerCompiler()` như hiển thị bên dưới giờ đây là tùy chọn — nó sẽ tự động loại bỏ trùng lặp nếu được thêm vào. Xem [ghi chú phát hành v9](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/releases/v9.md).
+Cập nhật `vite.config.ts` của bạn để bao gồm plugin `intlayerCompiler`:
 
 ```ts fileName="vite.config.ts"
 import { intlayer, intlayerCompiler } from "vite-intlayer";
@@ -842,12 +849,12 @@ export default defineConfig({
     tanstackStart({
       router: {
         routeFileIgnorePattern:
-          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",
+          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5|md|mdx|yaml|yml)$",
       },
     }),
     solidPlugin({ ssr: true }),
     intlayer(),
-    intlayerCompiler(),
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```

package/docs/vi/intlayer_with_tanstack.md

@@ -241,11 +241,15 @@ import { intlayer } from "vite-intlayer";
 const config = defineConfig({
   plugins: [
     nitro(),
-    intlayer(),
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
     tanstackStart({
       router: {
         routeFileIgnorePattern:
-          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",
+          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5|md|mdx|yaml|yml)$",
       },
     }),
     viteReact(),
@@ -649,22 +653,25 @@ Bạn cũng có thể sử dụng `intlayerProxy` để thêm routing phía serv
 
 > Lưu ý rằng để sử dụng `intlayerProxy` trong môi trường production, bạn cần chuyển gói `vite-intlayer` từ `devDependencies` sang `dependencies`.
 
-```typescript {7,14-17} fileName="vite.config.ts"
+```typescript fileName="vite.config.ts"
 import { tanstackStart } from "@tanstack/react-start/plugin/vite";
 import viteReact from "@vitejs/plugin-react";
 import { nitro } from "nitro/vite";
 import { defineConfig } from "vite";
-import { intlayer, intlayerProxy } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 export default defineConfig({
   plugins: [
-    intlayerProxy(), // Proxy nên được đặt trước server nếu bạn sử dụng Nitro
     nitro(),
-    intlayer(),
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
     tanstackStart({
       router: {
         routeFileIgnorePattern:
-          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",
+          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5|md|mdx|yaml|yml)$",
       },
     }),
     viteReact(),
@@ -925,6 +932,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"
@@ -934,7 +943,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_vite+lit.md

@@ -205,7 +205,13 @@ import { intlayer } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [intlayer()],
+  plugins: [
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
+  ],
 });
 ```
 
@@ -474,7 +480,7 @@ export class MyElement extends LitElement {
 
 ```typescript {3,7} fileName="vite.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { defineConfig } from "vite";
-import { intlayer, intlayerProxy } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 export default defineConfig({
   plugins: [intlayer(), intlayerProxy()],

package/docs/vi/intlayer_with_vite+preact.md

@@ -832,6 +832,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"
@@ -841,7 +843,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_vite+react.md

@@ -514,14 +514,17 @@ Song song đó, bạn cũng có thể sử dụng `intlayerProxy` để thêm ro
 ```typescript {3,7} fileName="vite.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
-import { intlayer, intlayerProxy } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    intlayerProxy(), // should be placed first
     react(),
-    intlayer(),
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
   ],
 });
 ```
@@ -825,6 +828,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"
@@ -834,7 +839,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_vite+react_compiler.md

@@ -213,11 +213,18 @@ Thêm plugin intlayer vào cấu hình của bạn.
 ```typescript fileName="vite.config.ts"
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), intlayer(), intlayerCompiler()],
+  plugins: [
+    react(),
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
+  ],
 });
 ```
 

package/docs/vi/intlayer_with_vite+solid.md

@@ -596,6 +596,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"
@@ -605,7 +607,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_vite+svelte.md

@@ -458,14 +458,17 @@ Song song với đó, bạn cũng có thể sử dụng `intlayerProxy` để th
 ```typescript {3,7} fileName="vite.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { defineConfig } from "vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
-import { intlayer, intlayerProxy } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    intlayerProxy(), // should be placed first
     svelte(),
-    intlayer(),
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
   ],
 });
 ```
@@ -573,6 +576,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"
@@ -582,7 +587,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
   ],
 });
 ```