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

package/docs/zh/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 - 翻译你的应用的完整指南"
 description: "告别 i18next。2026 年构建多语言 (i18n) Expo + React Native 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 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: "直接从 react-native-intlayer 导入 provider 和 hook；react-intlayer 不再需要作为直接依赖项"
   - version: 8.9.0
     date: 2026-05-04
     changes: "更新 Solid useIntlayer API 用法以直接访问属性"
@@ -29,7 +32,7 @@ history:
 author: aymericzip
 ---
 
-# 翻译您的 Expo and React Native 应用 | 国际化(i18n)
+# 翻译您的 Expo and React Native 应用 | 国际化（i18n）
 
 <Tabs defaultTab="code">
   <Tab label="代码" value="code">
@@ -37,7 +40,7 @@ author: aymericzip
 <iframe
   src="https://ide.intlayer.org/aymericzip/intlayer-react-native-template?file=intlayer.config.ts"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo CodeSandbox - Intlayer"
+  title="Demo CodeSandbox - 如何使用 Intlayer 国际化您的应用"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -56,24 +59,66 @@ author: aymericzip
   </Tab>
 </Tabs>
 
-请参阅 GitHub 上的[应用模板](https://github.com/aymericzip/intlayer-react-native-template)。
+## 目录
 
-### 套餐
+<TOC/>
 
-- **内层**  
-  用于配置、字典内容、类型生成和 CLI 命令的核心 i18n 工具包。
+## 为什么选择 Intlayer 而非其他方案？
 
-- **反应内层**  
-  React 集成提供了上下文提供程序和 React 挂钩，您将在 React Native 中使用它们来获取和切换语言环境。
+与 `react-native-localize` 或 `i18next` 等主流方案相比，Intlayer 是一个集成了以下优化功能的解决方案：
 
-- **react-native-intlayer**  
-  React Native 集成提供了 Metro 插件，用于将 Intlayer 与 React Native 捆绑器集成。
+<AccordionGroup>
 
----
+<Accordion header="完整的 React Native 覆盖">
+
+Intlayer 经过优化，可与 React Native 和 Expo 完美配合，提供**组件级内容作用域**、**TypeScript 支持**以及在移动应用中扩展国际化 (i18n) 所需的所有功能。
+
+</Accordion>
+
+<Accordion header="可维护性">
+
+将应用内容限定作用域**有助于维护**大规模应用程序。您可以复制或删除单个功能文件夹，而无需承受审查整个内容代码库的心理负担。此外，Intlayer **具有完整的类型支持**，确保内容的准确性。
+
+</Accordion>
+
+<Accordion header="AI 代理">
+
+内容共置**减少了大型语言模型 (LLM) 所需的上下文**。Intlayer 还附带了一套工具，例如用于检测缺失翻译的 **CLI**、**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**、**[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** 和 **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**，使 AI 代理的开发者体验 (DX) 更加顺畅。
+
+</Accordion>
+
+<Accordion header="自动化">
+
+使用您选择的 LLM，以 AI 提供商的成本在 CI/CD 管道中自动进行翻译。Intlayer 还提供**编译器**来自动提取内容，以及[网络平台](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)来帮助**在后台进行翻译**。
+
+</Accordion>
+
+<Accordion header="性能">
+
+将大型 JSON 文件连接到组件可能会导致性能和响应性问题。Intlayer 在构建时优化内容加载。
+
+</Accordion>
+
+<Accordion header="非开发者扩展">
+
+Intlayer 不仅仅是一个 i18n 解决方案，它还提供**自托管的[可视化编辑器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)**和**[完整 CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**，帮助您**实时**管理多语言内容，使翻译人员、文案人员和其他团队成员的协作更加无缝。内容可以本地和/或远程存储。
+
+</Accordion>
 
-## 第一步：安装依赖
+<Accordion header="包体积">
 
-在你的 React Native 项目中，安装以下包：
+无需将大型 JSON 文件加载到页面中，只需加载必要的内容。Intlayer 帮助**将包体积和视图大小减少多达 50%**。
+
+</Accordion>
+</AccordionGroup>
+
+<Steps>
+
+<Step number={1} title="安装依赖">
+
+请参阅 GitHub 上的[应用模板](https://github.com/aymericzip/intlayer-react-native-template)。
+
+在您的 React Native 项目中，安装以下包：
 
 ```bash packageManager="npm"
 npx intlayer-cli init --interactive
@@ -96,55 +141,101 @@ bunx intlayer-cli init --interactive
 > 该命令将检测您的环境并安装所需的软件包。例如：
 
 ```bash packageManager="npm"
-npm install intlayer react-intlayer
-npm install --save-dev react-native-intlayer
+npm install intlayer react-native-intlayer
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer react-intlayer
-pnpm add --save-dev react-native-intlayer
+pnpm add intlayer react-native-intlayer
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer react-intlayer
-yarn add --save-dev react-native-intlayer
+yarn add intlayer react-native-intlayer
 ```
 
 ```bash packageManager="bun"
-bun add intlayer react-intlayer
-bun add --dev react-native-intlayer
+bun add intlayer react-native-intlayer
 ```
 
-## 第4步：添加 Intlayer 提供者
+### 套餐
 
-为了在您的应用程序中保持用户语言的同步，您需要使用来自 `react-intlayer-native` 的 `IntlayerProvider` 组件包裹您的根组件。
+- **intlayer**  
+  用于配置、字典内容、类型生成和 CLI 命令的核心 i18n 工具包。
 
-> 请确保使用来自 `react-native-intlayer` 而不是 `react-intlayer` 的提供者。来自 `react-native-intlayer` 的导出包含了 web API 的 polyfills。
+- **react-native-intlayer**  
+  React Native 集成，提供您将用于获取和切换语言环境的上下文 provider 和 React hook、React Native polyfill，以及将 Intlayer 与 React Native 打包器集成的 Metro 插件。它重新导出 `react-intlayer` 的所有内容，因此在 React Native 应用中只需要这一个包。
 
-````tsx fileName="app/_layout.tsx" codeFormat={["typescript", "esm"]}
-import { Stack } from "expo-router";
-import { getLocales } from "expo-localization";
-import { IntlayerProvider } from "react-native-intlayer";
-import { type FC } from "react";
+---
 
+</Step>
 
-const getDeviceLocale = () => getLocales()[0]?.languageTag;
+<Step number={2} title="创建 Intlayer 配置">
+
+在您的项目根目录（或任何方便的位置）创建一个 **Intlayer 配置**文件。它可能如下所示：
+
+```ts fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+/**
+ * 如果 Locales 类型不可用，请尝试在 tsconfig.json 中将 moduleResolution 设置为 "bundler"
+ */
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // ... 添加您需要的其他语言环境
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
 
-const RootLayout: FC = () => {
-  return (
-    <IntlayerProvider defaultLocale={getDeviceLocale()}>
-      <Stack>
-为了在您的应用程序中保持用户语言的同步，您需要使用来自 `react-intlayer` 的 `IntlayerProvider` 组件包裹您的根组件。
+export default config;
+```
+
+在此配置中，您可以：
+
+- 配置**支持的语言环境列表**。
+- 设置**默认**语言环境。
+- 以后，您可以添加更多高级选项（例如日志、自定义内容目录等）。
+- 请参阅 [Intlayer 配置文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md) 了解更多信息。
+
+</Step>
+
+<Step number={3} title="添加 Metro 插件">
+
+Metro 是 React Native 的打包器。它是使用 `react-native init` 命令创建的 React Native 项目的默认打包器。要在 Metro 中使用 Intlayer，您需要将插件添加到 `metro.config.js` 文件中：
+
+```js fileName="metro.config.js"
+const { getDefaultConfig } = require("expo/metro-config");
+const { configMetroIntlayer } = require("react-native-intlayer/metro");
+
+module.exports = (async () => {
+  const defaultConfig = getDefaultConfig(__dirname);
+
+  return await configMetroIntlayer(defaultConfig);
+})();
+```
+
+> 注意：`configMetroIntlayer` 是一个 Promise 函数。如果您想同步使用它，请改用 `configMetroIntlayerSync`，或避免使用 IFFE（立即调用函数表达式）。
+> 注意：`configMetroIntlayerSync` 不允许在服务器启动时构建 intlayer 字典
+
+</Step>
+
+<Step number={4} title="添加 Intlayer provider">
+
+为了在您的应用程序中保持用户语言的同步，您需要使用来自 `react-native-intlayer` 的 `IntlayerProvider` 组件包裹您的根组件。
+
+> 始终从 `react-native-intlayer` 导入。其 `IntlayerProvider` 包含 Intlayer 使用的 web API 的 polyfill，该包重新导出了 `react-intlayer` 中的所有 hook 和工具。
 
 此外，您需要在 `index.js` 文件中添加 `intlayerPolyfill` 函数，以确保 Intlayer 能够正常工作。
 
-```tsx fileName="app/_layout.tsx" codeFormat="typescript"
+```tsx fileName="app/_layout.tsx" codeFormat={["typescript", "esm"]}
 import { Stack } from "expo-router";
 import { getLocales } from "expo-localization";
 import { IntlayerProvider } from "react-native-intlayer";
 import { type FC } from "react";
 
-
 const getDeviceLocale = () => getLocales()[0]?.languageTag;
 
 const RootLayout: FC = () => {
@@ -158,9 +249,29 @@ const RootLayout: FC = () => {
 };
 
 export default RootLayout;
-````
+```
+
+</Step>
 
-## 第5步：声明您的内容
+<Step number={5} title="声明您的内容">
+
+在项目中任意位置（通常在 `src/` 目录中）创建**内容声明**文件，使用 Intlayer 支持的任何扩展格式：
+
+- `.content.json`
+- `.content.jsonc`
+- `.content.json5`
+- `.content.ts`
+- `.content.tsx`
+- `.content.js`
+- `.content.jsx`
+- `.content.mjs`
+- `.content.mjx`
+- `.content.cjs`
+- `.content.md`
+- `.content.mdx`
+- `.content.yaml`
+- `.content.yml`
+- 等等
 
 > **Expo Router (web): 请将 `.content.*` 文件保留在 `app/` 目录之外。** Expo Router 会将 `app/` 内的每个 JavaScript/TypeScript 文件视为一个路由。在 web 上，它的路由发现会直接扫描文件系统，并且 **不** 遵循 Metro 的 `resolver.blockList`，因此同位置的 `*.content.ts` 会被注册为一个路由。像 `app/(tabs)/_layout.content.ts` 这样的文件甚至会被解析为布局（`.content` 部分被读取为平台后缀），这会与实际的 `_layout.tsx` 发生冲突并抛出错误：
 >
@@ -170,35 +281,63 @@ export default RootLayout;
 >
 > 请将您的声明放置在 `app/` 之外的目录中（例如 `content/` 或 `src/content/`）。Intlayer 会发现项目中任意位置的 `.content.*` 文件，字典通过它们的 `key` 进行引用，因此不需要进行任何导入更改。在原生端这不是必需的（Metro 的 `blockList` 已经隐藏了它们），但使用非 `app/` 目录可确保这两个平台都能正常工作。
 
-````
+示例（带有 React Native TSX 节点的 TypeScript）：
+
+```tsx fileName="src/app.content.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { t, type Dictionary } from "intlayer";
+import type { ReactNode } from "react";
+
+/**
+ * 我们"app"域的内容字典
+ */
+import { t, type Dictionary } from "intlayer";
+
+const homeScreenContent = {
+  key: "home-screen",
+  content: {
+    title: t({
+      en: "Welcome!",
+      fr: "Bienvenue!",
+      es: "¡Bienvenido!",
+    }),
+  },
+} satisfies Dictionary;
 
-```jsx fileName="app/_layout.cjx" codeFormat="commonjs"
-const { Stack } = require("expo-router");
-const { getLocales } = require("expo-localization");
-const { IntlayerProvider } = require("react-native-intlayer");
+export default homeScreenContent;
+```
 
+```json fileName="src/app.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "app",
+  "content": {
+    "title": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "Welcome!",
+        "fr": "Bienvenue!",
+        "es": "¡Bienvenido!"
+      }
+    }
+  }
+}
+```
 
-// 获取设备的语言环境
-const getDeviceLocale = () => getLocales()[0]?.languageTag;
+> 有关内容声明的详细信息，请参阅 [Intlayer 内容文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md)。
 
-const RootLayout = () => {
-  return (
-    <IntlayerProvider defaultLocale={getDeviceLocale()}>
-      <Stack>
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-      </Stack>
-    </IntlayerProvider>
-  );
-};
+---
 
-module.exports = RootLayout;
-````
+</Step>
+
+<Step number={6} title="在组件中使用 Intlayer">
+
+在子组件中使用 `useIntlayer` hook 获取本地化内容。
 
 ### 示例
 
 ```tsx fileName="app/(tabs)/index.tsx" codeFormat={["typescript", "esm"]}
 import { Image, StyleSheet, Platform } from "react-native";
-import { useIntlayer } from "intlayer";
+import { useIntlayer } from "react-native-intlayer";
 import { HelloWave } from "@/components/HelloWave";
 import ParallaxScrollView from "@/components/ParallaxScrollView";
 import { ThemedText } from "@/components/ThemedText";
@@ -228,9 +367,9 @@ const HomeScreen = (): FC => {
 
 const styles = StyleSheet.create({
   titleContainer: {
-    flexDirection: "row", // 横向排列
-    alignItems: "center", // 垂直居中对齐
-    gap: 8, // 元素间距为8
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
   },
 });
 
@@ -239,21 +378,21 @@ export default HomeScreen;
 
 > 当在基于字符串的属性中使用 `content.someKey`（例如按钮的 `title` 或 `Text` 组件的 `children`）时，**请调用 `content.someKey.value`** 来获取实际的字符串。
 
-> 如果您的应用程序已经存在，您可以结合使用 [Intlayer 编译器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/compiler.md) 和 [提取命令](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/cli/extract.md) 在一秒钟内转换成干个组件。
+> 如果您的应用程序已经存在，您可以结合使用 [Intlayer 编译器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/compiler.md) 和 [提取命令](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/cli/extract.md) 在一秒钟内转换数千个组件。
 
 ---
 
-<Steps>
+</Step>
 
-<Step number={1} title="更改应用程序语言环境" isOptional={true}>
+<Step number={7} title="更改应用程序语言环境" isOptional={true}>
 
-要在组件内部切换语言环境，可以使用 `useLocale` 钩子的 `setLocale` 方法：
+要在组件内部切换语言环境，可以使用 `useLocale` hook 的 `setLocale` 方法：
 
 ```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat={["typescript", "esm"]}
 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();
@@ -275,28 +414,28 @@ export const LocaleSwitcher: FC = () => {
 
 const styles = StyleSheet.create({
   container: {
-    flexDirection: "row", // 容器内元素横向排列
-    justifyContent: "center", // 水平居中对齐
-    alignItems: "center", // 垂直居中对齐
-    gap: 8, // 元素间距为8
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: 8,
   },
   button: {
-    paddingVertical: 6, // 垂直内边距6
-    paddingHorizontal: 12, // 水平内边距12
-    borderRadius: 6, // 边角圆角半径6
-    backgroundColor: "#ddd", // 背景颜色为浅灰色
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    borderRadius: 6,
+    backgroundColor: "#ddd",
   },
   text: {
-    fontSize: 14, // 字体大小14
-    fontWeight: "500", // 字体粗细500
-    color: "#333", // 文字颜色深灰
+    fontSize: 14,
+    fontWeight: "500",
+    color: "#333",
   },
 });
 ```
 
 这会触发所有使用 Intlayer 内容的组件重新渲染，现在显示新语言环境的翻译内容。
 
-> 详情请参见 [`useLocale` 文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/react-intlayer/useLocale.md)。
+> 详情请参见 [`useLocale` 文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useLocale.md)。
 
 </Step>
 
@@ -367,13 +506,13 @@ Intlayer 会在一个隐藏文件夹中（默认是 `.intlayer`）生成类型
 
 React Native 的稳定性不如 React Web，因此要特别注意版本对齐。
 
-Intlayer 主要针对 Web Intl API；在 React Native 上，你必须包含适当的 polyfills。
+Intlayer 主要针对 Web Intl API；在 React Native 上，你必须包含适当的 polyfill。
 
 检查清单：
 
-- 使用最新版本的 `intlayer`、`react-intlayer` 和 `react-native-intlayer`。
+- 使用最新版本的 `intlayer` 和 `react-native-intlayer`。
 - 启用 Intlayer polyfill。
-- 如果你使用 `getLocaleName` 或其他基于 Intl-API 的工具，请提前导入这些 polyfills（例如在 `index.js` 或 `App.tsx` 中）：
+- 如果你使用 `getLocaleName` 或其他基于 Intl-API 的工具，请提前导入这些 polyfill（例如在 `index.js` 或 `App.tsx` 中）：
 
 ```ts
 import "intl";

package/docs/zh/intlayer_with_react_router_v7.md

@@ -339,6 +339,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel 编译器'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 更新您的 `vite.config.ts` 以包含 `intlayerCompiler` 插件：
 
 ```ts fileName="vite.config.ts"
@@ -348,7 +350,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // 添加编译器插件
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```

package/docs/zh/intlayer_with_react_router_v7_fs_routes.md

@@ -294,6 +294,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel 编译器'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 更新您的 `vite.config.ts` 以包含 `intlayerCompiler` 插件：
 
 ```ts fileName="vite.config.ts"
@@ -303,7 +305,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // 添加编译器插件
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```

package/docs/zh/intlayer_with_storybook.md

@@ -103,7 +103,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/zh/intlayer_with_svelte_kit.md

@@ -229,14 +229,17 @@ goto(localizedPath); // 根据语言环境导航到 /en/about 或 /fr/about
 
 ```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(),
   ],],
 });
@@ -334,6 +337,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel 编译器'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 更新您的 `vite.config.ts` 以包含 `intlayerCompiler` 插件：
 
 ```ts fileName="vite.config.ts"
@@ -343,7 +348,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // 添加编译器插件
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```

package/docs/zh/intlayer_with_vite+preact.md

@@ -495,6 +495,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel 编译器'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 更新您的 `vite.config.ts` 以包含 `intlayerCompiler` 插件：
 
 ```ts fileName="vite.config.ts"
@@ -504,7 +506,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // 添加编译器插件
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```

package/docs/zh/intlayer_with_vite+react.md

@@ -225,14 +225,17 @@ const App: FC = () => (
 ```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"),
+      },
+    }),
   ],
 });
 ```
@@ -536,6 +539,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel 编译器'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 更新您的 `vite.config.ts` 以包含 `intlayerCompiler` 插件：
 
 ```ts fileName="vite.config.ts"
@@ -545,7 +550,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // 添加编译器插件
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```

package/docs/zh/intlayer_with_vite+svelte.md

@@ -460,14 +460,17 @@ $: content = useIntlayer('app', locale);
 ```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"),
+      },
+    }),
   ],
 });
 ```
@@ -598,6 +601,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel 编译器'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 更新您的 `vite.config.ts` 以包含 `intlayerCompiler` 插件：
 
 ```ts fileName="vite.config.ts"
@@ -607,7 +612,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // 添加编译器插件
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```

package/docs/zh/intlayer_with_vite+vue.md

@@ -636,14 +636,17 @@ import LocaleSwitcher from "@components/LocaleSwitcher.vue";
 ```typescript {3,7} fileName="vite.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
-import { intlayer, intlayerProxy } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    intlayerProxy(), // should be placed first
     vue(),
-    intlayer(),
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
   ],
 });
 ```
@@ -967,6 +970,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel 编译器'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 更新您的 `vite.config.ts` 以包含 `intlayerCompiler` 插件：
 
 ```ts fileName="vite.config.ts"
@@ -976,7 +981,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // 添加编译器插件
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```