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

package/docs/uk/migration_from_vue-i18n_to_intlayer.md

@@ -0,0 +1,359 @@
+---
+createdAt: 2026-06-05
+updatedAt: 2026-06-05
+title: "Міграція з vue-i18n на Intlayer | Internationalisation (i18n)"
+description: "Дізнайтеся, як перенести вашу Vue або Nuxt програму з vue-i18n на Intlayer — крок за кроком, без порушення вашого існуючого коду. Використовуйте адаптер сумісності @intlayer/vue-i18n для безперебійного переходу."
+keywords:
+  - vue-i18n
+  - intlayer
+  - migration
+  - internationalization
+  - i18n
+  - Nuxt
+  - Vue
+  - JavaScript
+slugs:
+  - doc
+  - migration
+  - vue-i18n
+history:
+  - version: 9.0.0
+    date: 2026-06-05
+    changes: "Init history"
+author: aymericzip
+---
+
+# Перехід з vue-i18n на Intlayer
+
+## Чому перейти з vue-i18n на Intlayer?
+
+<AccordionGroup>
+
+<Accordion header="Розмір bundle">
+
+Замість завантаження масивних JSON файлів на ваші сторінки, завантажуйте лише необхідний контент. Intlayer допомагає **зменшити розмір вашого bundle та сторінок на 50%**.
+
+</Accordion>
+
+<Accordion header="Зручність обслуговування">
+
+Організація контенту вашої програми **полегшує обслуговування** великомасштабних додатків. Ви можете дублювати або видаляти окриму папку функцій без необхідності перегляду всього codebase контенту. Крім того, Intlayer **повністю типізований**, щоб забезпечити точність вашого контенту.
+
+Intlayer також є рішенням з **найбільш активним розробленням** в екосистемі i18n — проблеми вирішуються швидко, нові адаптери фреймворків надходять регулярно, а основний API постійно вдосконалюється на основі реального виробничого зворотного зв'язку.
+
+</Accordion>
+
+<Accordion header="AI Agent">
+
+Розташування контенту в одному місці **зменшує контекст, необхідний** для великих мовних моделей (LLMs). Intlayer також поставляється з набором інструментів, таких як **CLI** для тестування відсутніх перекладів, **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/mcp_server.md)** та **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/agent_skills.md)**, щоб зробити досвід розробника (DX) ще гладшим для AI агентів.
+
+</Accordion>
+
+<Accordion header="Автоматизація">
+
+Використовуйте автоматизацію для перекладу у вашому CI/CD pipeline, використовуючи LLM на ваш вибір за вартість вашого AI-провайдера. Intlayer також пропонує **компілятор** для автоматизації видобування контенту, а також [веб-платформу](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_CMS.md) для допомоги в **перекладі у фоновому режимі**.
+
+</Accordion>
+
+<Accordion header="Продуктивність">
+
+Підключення масивних JSON файлів до компонентів може призвести до проблем продуктивності та реактивності. Intlayer оптимізує завантаження вашого контенту під час збирання.
+
+</Accordion>
+
+<Accordion header="Масштабування з неробами">
+
+Більше ніж просто рішення i18n, Intlayer надає **самостійно розміщений [редактор з візуальним інтерфейсом](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_visual_editor.md)** та **[повноцінну CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_CMS.md)** для допомоги в керуванні вашим багатомовним контентом у **режимі реального часу**, що робить співпрацю з перекладачами, копірайтерами та іншими членами команди безперешкодною. Контент можна зберігати локально та/або віддалено.
+
+</Accordion>
+
+</AccordionGroup>
+
+---
+
+## Стратегії міграції
+
+Існує дві взаємодоповнюючі стратегії для міграції з `vue-i18n` на Intlayer:
+
+1. **Compat adapter (рекомендується для існуючих додатків)** — Встановіть `@intlayer/vue-i18n` (для Vue-компонентів). Цей пакет надає **абсолютно той самий API**, що й `vue-i18n`, але делегує всю роботу з перекладами Intlayer під капотом. Ви зберігаєте свої існуючі виклики `$t`, `useI18n()` та `<i18n-t>` — єдина зміна — це шлях імпорту та ініціалізація.
+
+2. **Повна міграція** — Поступово замініть API `vue-i18n` на нативні hook'и Intlayer (`useIntlayer`) та розташуйте контент у файлах `.content.ts` поруч з вашими компонентами.
+
+Цей посібник спочатку охоплює **Strategy 1** (drop-in compat adapter), а потім проходить через опціональну повну міграцію.
+
+---
+
+## Table of Contents
+
+<TOC/>
+
+---
+
+## Швидка міграція
+
+Наступні кроки є мінімально необхідними для запуску вашого існуючого `vue-i18n` застосунку на Intlayer без змін коду в ваших компонентах.
+
+<Steps>
+
+<Step number={1} title="Встановлення залежностей">
+
+Встановіть основні пакети Intlayer та адаптер сумісності:
+
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> прапор `--interactive` є опціональним. Використовуйте `intlayer-cli init`, якщо ви AI агент.
+
+> Ця команда виявить ваше середовище та встановить необхідні пакети. Наприклад:
+
+```bash packageManager="npm"
+npm install intlayer vue-intlayer @intlayer/vue-i18n @intlayer/sync-json-plugin
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer vue-intlayer @intlayer/vue-i18n @intlayer/sync-json-plugin
+```
+
+```bash packageManager="yarn"
+yarn add intlayer vue-intlayer @intlayer/vue-i18n @intlayer/sync-json-plugin
+```
+
+```bash packageManager="bun"
+bun add intlayer vue-intlayer @intlayer/vue-i18n @intlayer/sync-json-plugin
+```
+
+> Ви можете залишити встановленим `vue-i18n` — адаптер сумісності використовує його як `devDependency` / `peerDependency` для типів TypeScript.
+
+</Step>
+
+<Step number={2} title="Налаштування Intlayer">
+
+Команда `intlayer init` створює стартовий `intlayer.config.ts`. Оновіть його відповідно до ваших існуючих локалей та вкажіть плагіну `syncJSON` на ваші файли повідомлень:
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import { Locales, type IntlayerConfig } from "intlayer";
+import { syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // Додайте всі ваші існуючі локалі тут
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+  plugins: [
+    syncJSON({
+      // відповідає синтаксису заповнювачів vue-i18n: {name}
+      format: "icu",
+      source: ({ locale }) => `./src/locales/${locale}.json`,
+      location: "src/locales",
+    }),
+  ],
+};
+
+export default config;
+```
+
+> **`source`** відображає локаль на шлях до її JSON файла. **`location`** повідомляє спостерігачу Intlayer, яку папку слід контролювати на предмет змін. Опція `format: 'icu'` гарантує, що заповнювачі правильно розпарсюються для `vue-i18n`.
+
+</Step>
+
+<Step number={3} title="Додайте плагін Intlayer до вашого бундлера">
+
+Обгорніть вашу існуючу конфігурацію бундлера плагіном сумісності. Він складає основний плагін Intlayer, налаштовує спостереження вмісту та — критично — **впроваджує псевдонім модуля**, щоб ваші існуючі виклики `import … from 'vue-i18n'` були прозоро перенаправлені на `@intlayer/vue-i18n` під час збирання. Жодні змін файлів вихідного коду не потрібні.
+
+**Для Vite:**
+
+```typescript fileName="vite.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { vueI18nVitePlugin } from "@intlayer/vue-i18n/plugin";
+
+export default defineConfig({
+  plugins: [vue(), vueI18nVitePlugin()],
+});
+```
+
+> `vueI18nVitePlugin()` обгортає плагін `intlayer()` з `vite-intlayer` та додає псевдонім `vue-i18n`. Використання звичайного плагіна `intlayer()` з `vite-intlayer` компілює словники, але **не** додає псевдонім — тоді вам доведеться вручну перейменувати імпорти на `@intlayer/vue-i18n` (див. Крок 4).
+
+**Для Nuxt:**
+
+Якщо ви використовуєте `@nuxtjs/i18n` (інтеграція Nuxt), встановіть `nuxt-intlayer` та додайте його до вашого `nuxt.config.ts`:
+
+```bash packageManager="npm"
+npm install nuxt-intlayer
+```
+
+```typescript fileName="nuxt.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+export default defineNuxtConfig({
+  modules: ["nuxt-intlayer"],
+  // Ви можете безпечно видалити @nuxtjs/i18n з ваших модулів
+});
+```
+
+> **Вам більше не потрібні `createI18n()` або ручне завантаження провайдера.** Intlayer компілює всі словники під час **збирання**, тому немає етапу завантаження під час виконання. Псевдонімований провайдер обробляє ініціалізацію для вас.
+
+</Step>
+
+</Steps>
+
+На цьому швидка міграція завершена. Ваш застосунок тепер працює на Intlayer, при цьому зберігаючи кожен імпорт та API `vue-i18n`.
+
+> **Типізовані ключі перекладу — автоматично.** Після того як Intlayer скомпілює ваші словники, `useI18n` типізується відповідно до вашого фактичного вмісту, коли ви передаєте опцію `namespace`. Ключі автодоповнюються у вашому IDE, а невалідні шляхи спричиняють помилки TypeScript під час збирання — додатково налаштування не потрібно.
+>
+> ```ts
+> // 'about' — зареєстрований ключ словника
+> const { t } = useI18n({ namespace: "about" });
+> t("counter.label"); // ✓ автодоповнено
+> t("does.not.exist"); // ✗ помилка TypeScript
+> ```
+
+---
+
+## Повна міграція
+
+Наведені нижче кроки є необов'язковими і можуть бути виконані поступово. Вони розблоковують повний набір функцій Intlayer: візуальний редактор, CMS, типізовані файли контенту, автоматизований переклад на основі AI та інше.
+
+<Steps>
+
+<Step number={4} title="Явне перейменування імпортів (optional)" isOptional={true}>
+
+Плагіни Intlayer вже обробляють aliasing на рівні bundler. Якщо ви хочете зробити залежність явною у ваших файлах вихідного коду, ви можете вручну перейменувати імпорти:
+
+| Before                                  | After                                             |
+| --------------------------------------- | ------------------------------------------------- |
+| `import { useI18n } from 'vue-i18n'`    | `import { useI18n } from '@intlayer/vue-i18n'`    |
+| `import { createI18n } from 'vue-i18n'` | `import { createI18n } from '@intlayer/vue-i18n'` |
+
+Це **drop-in замінники** — змін у сигнатурах функцій, аргументах або типах повернення не потрібно.
+
+</Step>
+
+<Step number={5} title="Увімкніть автоматизацію перекладу на основі AI" isOptional={true}>
+
+Після того як Intlayer налаштовано, використовуйте його CLI для автоматичного заповнення відсутніх перекладів:
+
+```bash packageManager="npm"
+# Перевірка на відсутні переклади (додати до CI)
+npx intlayer test
+
+# Заповнення відсутніх перекладів за допомогою AI
+npx intlayer fill
+```
+
+```bash packageManager="pnpm"
+pnpm intlayer test
+pnpm intlayer fill
+```
+
+```bash packageManager="yarn"
+yarn intlayer test
+yarn intlayer fill
+```
+
+```bash packageManager="bun"
+bun x intlayer test
+bun x intlayer fill
+```
+
+Додайте конфігурацію AI до `intlayer.config.ts`:
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import { Locales, type IntlayerConfig } from "intlayer";
+import { syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  plugins: [
+    syncJSON({
+      format: "icu",
+      source: ({ locale }) => `./src/locales/${locale}.json`,
+      location: "src/locales",
+    }),
+  ],
+  ai: {
+    apiKey: process.env.OPENAI_API_KEY,
+    // provider: "openai",     // за замовчуванням
+    // model: "gpt-4o-mini",   // за замовчуванням
+  },
+};
+
+export default config;
+```
+
+> Перегляньте [документацію Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/cli/index.md) для всіх доступних опцій.
+
+</Step>
+
+</Steps>
+
+---
+
+## Що можна видалити після міграції
+
+Як тільки адаптери сумісності запущені, наступний boilerplate `vue-i18n` можна видалити:
+
+| Файл / шаблон                             | Чому він більше не потрібен                                                                                                                               |
+| ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `createI18n()` calls                      | Постачальник Intlayer ініціалізує все автоматично; немає кроку завантаження під час виконання.                                                            |
+| Vue plugin registration (`app.use(i18n)`) | Плагін Intlayer обробляє ін'єкцію та завантаження під капотом.                                                                                            |
+| JSON language bundles (`locales/*.json`)  | JSON bundles потрібні лише якщо ви все ще використовуєте плагін `syncJSON`. Як тільки ви перейдете на файли `.content.ts`, ви можете видалити папку JSON. |
+
+Коли ви будете готові йти далі, Intlayer **автоматично виявляє всі файли `.content.ts` та `.content.json` будь-де у вашому codebase** (за замовчуванням, будь-де всередині `./src`). Ви можете розмістити файл `my-component.content.ts` прямо поруч із вашим `MyComponent.vue`, і Intlayer підхопить його під час збірки без додаткової конфігурації — без імпортів, без реєстрації, без централізованого файлу індексу. Це робить розташування перекладів разом зі сторінками та компонентами повністю безпроблемним.
+
+---
+
+## Налаштування TypeScript
+
+Intlayer використовує module augmentation для надання повної TypeScript intellisense для ваших ключів перекладу. Переконайтеся, що ваш `tsconfig.json` включає автоматично генеровані типи:
+
+```json5 fileName="tsconfig.json"
+{
+  // ... Ваші існуючі конфігурації TypeScript
+  "include": [
+    // ... Ваші існуючі конфігурації TypeScript
+    ".intlayer/**/*.ts", // Включіть автоматично генеровані типи
+  ],
+}
+```
+
+---
+
+## Git конфігурація
+
+Додайте створену Intlayer директорію до вашого `.gitignore`:
+
+```plaintext fileName=".gitignore"
+# Ігнорувати файли, згенеровані Intlayer
+.intlayer
+```
+
+---
+
+## Йти далі
+
+- **Візуальний редактор** — Керуйте перекладами візуально у браузері: [Intlayer Visual Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_visual_editor.md)
+- **CMS** — Екстерналізуйте та керуйте контентом віддалено: [Intlayer CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_CMS.md)
+- **VS Code Extension** — Отримуйте автодоповнення та виявлення помилок перекладу в реальному часі: [Intlayer VS Code Extension](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/vs_code_extension.md)
+- **CLI Reference** — Повний список команд CLI: [Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/cli/index.md)
+- **Intlayer with Vue** — Повне керівництво налаштування для Vue: [intlayer_with_vite+vue.md](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_vite+vue.md)
+- **Intlayer with Nuxt** — Повне керівництво налаштування для Nuxt: [intlayer_with_nuxt.md](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_nuxt.md)

package/docs/uk/packages/react-intlayer/useDictionary.md

@@ -24,105 +24,6 @@ history:
 author: aymericzip
 ---
 
-# Інтеграція з React: Документація хуку `useDictionary`
-
-У цьому розділі наведено докладні вказівки щодо використання хуку `useDictionary` у React-застосунках, що дозволяє ефективно працювати з локалізованим контентом без використання візуального редактора.
-
-## Імпорт `useDictionary` у React
-
-Хук `useDictionary` можна інтегрувати в React‑додатки, імпортуючи його відповідно до контексту:
-
-- **Клієнтський компонент:**
-
-  ```typescript codeFormat="typescript"
-  import { useDictionary } from "react-intlayer"; // Використовується в клієнтських React-компонентах
-  ```
-
-  ```javascript codeFormat="esm"
-  import { useDictionary } from "react-intlayer"; // Використовується в клієнтських React-компонентах
-  ```
-
-  ```javascript codeFormat="commonjs"
-  const { useDictionary } = require("react-intlayer"); // Використовується в клієнтських React-компонентах
-  ```
-
-- **Серверний компонент:**
-
-  ```typescript codeFormat="typescript"
-  import { useDictionary } from "react-intlayer/server"; // Використовується в серверних React-компонентах
-  ```
-
-  ```javascript codeFormat="esm"
-  import { useDictionary } from "react-intlayer/server"; // Використовується в серверних React-компонентах
-  ```
-
-  ```javascript codeFormat="commonjs"
-  const { useDictionary } = require("react-intlayer/server"); // Використовується в серверних React-компонентах
-  ```
-
-## Параметри
-
-Хук приймає два параметри:
-
-1. **`dictionary`**: Оголошений об'єкт словника, що містить локалізований вміст для конкретних ключів.
-2. **`locale`** (необов'язково): Бажана локаль. За замовчуванням використовується локаль поточного контексту, якщо не вказано.
-
-## Словник
-
-Усі об'єкти словника повинні бути оголошені у структурованих файлах вмісту, щоб забезпечити типобезпеку та запобігти помилкам під час виконання. Інструкції з налаштування можна знайти [тут](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md). Ось приклад декларації вмісту:
-
-```typescript fileName="./component.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { t, type Dictionary } from "intlayer";
-
-const componentContent = {
-  key: "component-example",
-  content: {
-    title: t({
-      uk: "Приклад клієнтського компонента",
-      en: "Client Component Example",
-      fr: "Exemple de composant client",
-      es: "Ejemplo de componente cliente",
-    }),
-    content: t({
-      uk: "Це вміст прикладу клієнтського компонента",
-      en: "This is the content of a client component example",
-      fr: "Ceci est le contenu d'un exemple de composant client",
-      uk: "Це вміст прикладу клієнтського компонента",
-      es: "Este es el contenido de un ejemplo de componente cliente",
-    }),
-  },
-} satisfies Dictionary;
-
-export default componentContent;
-```
-
-```json fileName="./component.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "component-example",
-  "content": {
-    "title": {
-      "nodeType": "translation",
-      "translation": {
-        "uk": "Приклад клієнтського компонента",
-        "en": "Client Component Example",
-        "fr": "Exemple de composant client",
-        "es": "Ejemplo de componente cliente"
-      }
-    },
-    "content": {
-      "nodeType": "translation",
-      "translation": {
-        "uk": "Це вміст прикладу клієнтського компонента",
-        "en": "This is the content of a client component example",
-        "fr": "Ceci est le contenu d'un exemple de composant client",
-        "es": "Este es el contenido de un ejemplo de componente cliente"
-      }
-    }
-  }
-}
-```
-
 ## Приклад використання в React
 
 Нижче наведено приклад того, як використовувати хук `useDictionary` у React-компоненті:
@@ -165,14 +66,6 @@ const ServerComponentExample: FC<{ locale: string }> = ({ locale }) => {
 };
 ```
 
-## Примітки щодо атрибутів
-
-На відміну від інтеграцій з візуальними редакторами, атрибути на кшталт `buttonTitle.value` тут не застосовуються. Натомість безпосередньо звертайтеся до локалізованих рядків, як оголошено у вашому контенті.
-
-```jsx
-<button title={content.title}>{content.content}</button>
-```
-
 ## Додаткові поради
 
 - **Type Safety**: Завжди використовуйте `Dictionary` для визначення ваших словників, щоб забезпечити Type Safety.

package/docs/uk/packages/react-intlayer/useIntlayer.md

@@ -29,49 +29,6 @@ author: aymericzip
 
 У цьому розділі наведено докладні вказівки щодо використання хука `useIntlayer` у React-застосунках, що дозволяє ефективно локалізувати вміст.
 
-## Імпорт хуку `useIntlayer` у React
-
-Хук `useIntlayer` можна інтегрувати в React-застосунки, імпортуючи його залежно від контексту:
-
-- **Клієнтський компонент:**
-
-  ```typescript codeFormat="typescript"
-  import { useIntlayer } from "react-intlayer"; // Використовується в клієнтських React компонентах
-  ```
-
-  ```javascript codeFormat="esm"
-  import { useIntlayer } from "react-intlayer"; // Використовується в клієнтських React компонентах
-  ```
-
-  ```javascript codeFormat="commonjs"
-  const { useIntlayer } = require("react-intlayer"); // Використовується в клієнтських React компонентах
-  ```
-
-- **Серверний компонент:**
-
-  ```typescript codeFormat="commonjs"
-  import { useIntlayer } from "react-intlayer/server"; // Використовується в серверних React компонентах
-  ```
-
-  ```javascript codeFormat="esm"
-  import { useIntlayer } from "react-intlayer/server"; // Використовується в серверних React-компонентах
-  ```
-
-  ```javascript codeFormat="commonjs"
-  const { useIntlayer } = require("react-intlayer/server"); // Використовується в серверних React-компонентах
-  ```
-
-## Параметри
-
-Хук приймає два параметри:
-
-1. **`key`**: Ключ словника для отримання локалізованого вмісту.
-2. **`locale`** (необов'язковий): Бажана локаль. За замовчуванням використовується локаль контексту, якщо не вказано.
-
-## Словник
-
-Усі ключі словника повинні бути оголошені у файлах декларації контенту, щоб підвищити безпеку типів і уникнути помилок. Інструкцію з налаштування можна знайти [тут](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md).
-
 ## Приклад використання в React
 
 Приклад використання хука `useIntlayer` у React-компоненті:
@@ -131,14 +88,6 @@ const ServerComponentExample = () => {
 };
 ```
 
-## Обробка атрибутів
-
-При локалізації атрибутів звертайтеся до значень контенту відповідним чином:
-
-```jsx
-<button title={content.buttonTitle.value}>{content.buttonText}</button>
-```
-
 ## Додаткові ресурси
 
 - **Intlayer Visual Editor**: Для інтуїтивнішого управління контентом зверніться до документації візуального редактора [тут](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_visual_editor.md).

package/docs/uk/releases/v6.md

@@ -25,6 +25,10 @@ author: aymericzip
 
 Ласкаво просимо в Intlayer v6! У цьому релізі акцент зроблено на продуктивності, developer experience та надійності. Нижче наведено основні моменти, нотатки щодо міграції та приклади, які можна копіювати й вставляти.
 
+## Зміст
+
+<TOC levels={[2]} maxDepth={1} />
+
 ## Основні зміни
 
 - Нова команда: `npx intlayer content test` для виявлення відсутніх перекладів

package/docs/uk/releases/v7.md

@@ -25,6 +25,10 @@ author: aymericzip
 
 Ласкаво просимо до Intlayer v7! Це велике оновлення вводить суттєві покращення продуктивності, type safety і developer experience. Нижче наведено основні зміни, нотатки щодо міграції та практичні приклади.
 
+## Зміст
+
+<TOC levels={[2]} maxDepth={1} />
+
 ## Основні моменти
 
 - Підтримка Next.js 16

package/docs/uk/releases/v9.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-06-14
-updatedAt: 2026-06-14
+updatedAt: 2026-06-23
 title: Новий Intlayer v9 - Що нового?
 description: Дізнайтеся, що нового в Intlayer v9. Представляємо сумісні пакети швидкої заміни (drop-in) для популярних бібліотек i18n та підтримку Collections, Variants та Dynamic Records.
 keywords:
@@ -216,6 +216,42 @@ export default {
 
 ---
 
+## Vite Plugin: Bundled Compiler & Proxy
+
+Плагін Vite `intlayer()` тепер об'єднує **компілятор** та **проксі для маршрутизації локалей** безпосередньо, тому більшості проектів потрібен лише один плагін у `vite.config.ts`:
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayer } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [intlayer()],
+});
+```
+
+- **Compiler**: Активується автоматично, коли встановлено `compiler.enabled` та налаштована шлях `compiler.output`. Вам більше не потрібно реєструвати `intlayerCompiler()` окремо.
+- **Proxy**: Активується автоматично на основі нового параметра `routing.enableProxy` (`true` за замовчуванням). Він підключає middleware виявлення локалей / перенаправлення / переписування в режимі розробки, попереднього перегляду та production SSR. Вам більше не потрібно реєструвати `intlayerProxy()` окремо.
+
+### Опція `routing.enableProxy`
+
+Нова опція `routing.enableProxy` контролює, чи підключений проксі маршрутизації локалі. За замовчуванням встановлено значення `true`. Вимкніть її, якщо ви хочете самостійно обробляти маршрутизацію локалі:
+
+```ts fileName="intlayer.config.ts"
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  routing: {
+    enableProxy: false, // За замовчуванням: true
+  },
+};
+
+export default config;
+```
+
+Автономні плагіни `intlayerCompiler()` та `intlayerProxy()` залишаються експортованими для складних налаштувань. Реєстрація їх разом з `intlayer()` безпечна — кожен плагін автоматично дедублює себе і запускається лише один раз.
+
+---
+
 ## Примітки щодо міграції з v8
 
 Якщо ви оновлюєтеся з v8, зверніть увагу, що v9 не містить критичних змін (breaking changes). Проте ось ключові зміни:

package/docs/vi/autoFill.md

@@ -35,6 +35,26 @@ author: aymericzip
 
 **Các tệp khai báo nội dung tự động điền** trong CI của bạn là một cách để tăng tốc quy trình phát triển.
 
+## Hiểu về hành vi
+
+Lệnh `fill` bao gồm hai chế độ:
+
+- **Complete**: Tự động điền tất cả nội dung bị thiếu cho mỗi locale và chỉnh sửa tệp hiện tại hoặc tệp khác nếu được chỉ định. Nói cách khác, chế độ complete sẽ bỏ qua việc dịch nội dung hiện có nếu đã được dịch.
+- **Review**: Tự động điền **tất cả** nội dung cho mỗi locale và tạo cho một tệp cụ thể hoặc tệp khác nếu được chỉ định.
+
+Lệnh `fill` sẽ xử lý tất cả các tệp khai báo nội dung locale của bạn. Nói cách khác, nó sẽ không xử lý nội dung từ xa của bạn từ CMS. CMS bao gồm hệ thống quản lý bản dịch của riêng nó.
+Nếu bạn sử dụng các plugin như `@intlayer/sync-json-plugin`, Intlayer sẽ chuyển đổi các tệp JSON thành các tệp khai báo nội dung locale. Nói cách khác, chúng sẽ được xử lý bởi lệnh `fill`.
+
+Các tệp được tạo mới bao gồm một hướng dẫn `filled` như siêu dữ liệu từ điển. Hướng dẫn này sẽ được Intlayer sử dụng để biết liệu tệp đã được điền tự động hay không, và bỏ qua tệp này khỏi việc dịch lại nếu có.
+
+Intlayer cũng sẽ xem xét hướng dẫn sau để điền tự động:
+
+- Từ `.content.{ts|js|json}` của bạn → hướng dẫn `fill`
+- Từ tệp cấu hình `.intlayer.config.ts` của bạn → hướng dẫn `dictionary.fill`
+- Sẽ được đặt thành `true` theo mặc định nếu không có
+
+Đối với các tệp khai báo nội dung theo locale, hướng dẫn `true` sẽ được thay thế bằng `./{{fileName}}.fill.content.json`. Điều này là vì một tệp khai báo nội dung theo locale không thể nhận nội dung bản địa hóa bổ sung. Vì vậy, nó sẽ tạo một tệp mới để không ghi đè tệp hiện có.
+
 ## Hành Vi Mặc Định
 
 Theo mặc định, `fill` được đặt là `true` toàn cục, có nghĩa là Intlayer sẽ tự động điền tất cả các tệp nội dung và chỉnh sửa chính tệp đó. Hành vi này có thể được tùy chỉnh theo nhiều cách: