@intlayer/docs 8.12.5-canary.0 → 9.0.0-canary.10

package/docs/uk/compat/svelte-i18n.md

@@ -0,0 +1,47 @@
+---
+createdAt: 2026-06-13
+updatedAt: 2026-06-13
+title: "Міграція з Svelte I18n на Intlayer"
+description: "Дізнайтеся, як мігрувати вашу Svelte-програму з svelte-i18n на Intlayer за допомогою адаптера сумісності."
+keywords:
+  - svelte-i18n
+  - svelte
+  - intlayer
+  - migration
+  - compat
+slugs:
+  - doc
+  - compatibility
+  - svelte-i18n
+history:
+  - version: 9.0.0
+    date: 2026-06-13
+    changes: "Init history"
+author: aymericzip
+---
+
+# Міграція з Svelte I18n на Intlayer
+
+Перенесення вашого Svelte додатку з `svelte-i18n` на Intlayer займає всього кілька хвилин за допомогою адаптера сумісності.
+
+## Що робити
+
+Просто запустіть команду ініціалізації в вашому проекті:
+
+```bash
+npx intlayer init
+```
+
+Це генерує `intlayer.config.ts`. Переконайтеся, що ваші плагіни SvelteKit / Vite обгорнуті плагіном alias від Intlayer, щоб безперебійно відобразити `svelte-i18n` на `@intlayer/svelte-i18n`.
+
+## Як це працює під капотом
+
+Svelte-i18n покладається на широко використовувані store (`$_`, `$t`, `$format` тощо) та ICU MessageFormat.
+
+Під капотом:
+
+- **Store:** Intlayer проксує store `svelte-i18n`. `$_` стає derived store поточної локалі, яка повертає Intlayer resolver.
+- **Ключі:** Ваші плоскі ключі (наприклад, `$_('home.title')`) обчислюються так, що перший сегмент шляху представляє словник Intlayer.
+- **ICU Syntax:** Повністю обробляється спільним ICU resolver (аналіз еквівалента `intl-messageformat`).
+- **Форматери:** Виклики `$date`, `$time`, `$number` безпечно перенаправляються на вбудовані форматери Intlayer.
+- **Babel/SWC Analysis:** Аналізатор Intlayer читає виклики Svelte store (`$_`) всередині ваших файлів `.svelte` перед компіляцією, щоб автоматично побудувати відповідні фрагменти словника.

package/docs/uk/compat/transloco.md

@@ -0,0 +1,45 @@
+---
+createdAt: 2026-06-13
+updatedAt: 2026-06-13
+title: "Мігрувати з Transloco на Intlayer"
+description: "Дізнайтеся, як мігрувати свій Angular додаток з Transloco на Intlayer за допомогою compat адаптера."
+keywords:
+  - transloco
+  - angular
+  - intlayer
+  - migration
+  - compat
+slugs:
+  - doc
+  - compatibility
+  - transloco
+history:
+  - version: 9.0.0
+    date: 2026-06-13
+    changes: "Init history"
+author: aymericzip
+---
+
+# Міграція з Transloco на Intlayer
+
+Якщо ваш Angular додаток наразі використовує `@jsverse/transloco`, ви можете перенести його на Intlayer, використовуючи наш адаптер сумісності. Цей перехід дозволяє вам зберегти існуючий синтаксис шаблонів, одночасно використовуючи потужну структуру словників Intlayer.
+
+## Що робити
+
+Просто запустіть команду ініціалізації у вашому проекті:
+
+```bash
+npx intlayer init
+```
+
+Це створить необхідний конфігураційний файл `intlayer.config.ts`. Далі ви замінюєте свої імпорти Transloco на модулі `@intlayer/transloco` або покладаєтесь на build aliases.
+
+## Що він робить під капотом
+
+Transloco використовує scopes та `TranslocoService` (`translate`, `selectTranslate`), поряд зі structural directives (`*transloco="let t"`) та pipes (`| transloco`).
+
+Під капотом:
+
+- **Scopes:** Природно відображаються на ключі словників Intlayer, забезпечуючи чудову історію pruning для оптимізації bundle.
+- **Service & Directives:** Angular adapter Intlayer безпроблемно замінює providers, дозволяючи вашим існуючим template pipes та directives розв'язувати рядки від словників Intlayer.
+- **Build time parsing:** TypeScript analyzer розпізнає виклики `instant/get` та fallback pruning забезпечує коректність навіть коли використання template не можна статично відстежити.

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

@@ -0,0 +1,58 @@
+---
+createdAt: 2026-06-13
+updatedAt: 2026-06-13
+title: "Міграція з Vue I18n на Intlayer"
+description: "Дізнайтеся, як мігрувати вашу Vue-програму з vue-i18n на Intlayer, використовуючи адаптер сумісності."
+keywords:
+  - vue-i18n
+  - vue
+  - intlayer
+  - migration
+  - compat
+slugs:
+  - doc
+  - compatibility
+  - vue-i18n
+history:
+  - version: 9.0.0
+    date: 2026-06-13
+    changes: "Init history"
+author: aymericzip
+---
+
+# Міграція з Vue I18n на Intlayer
+
+Якщо ваш Vue додаток наразі використовує `vue-i18n`, ви можете мігрувати на Intlayer без перепису компонентів або трансляції хуків. Intlayer надає адаптер сумісності, який ідеально віддзеркалює API `vue-i18n` під час використання потужних функцій Intlayer під капотом.
+
+## Що робити
+
+Щоб почати роботу, просто запустіть команду ініціалізації у вашому проєкті:
+
+```bash
+npx intlayer init
+```
+
+Під час ініціалізації Intlayer налаштує ваш файл конфігурації (`intlayer.config.ts`) і підготує ваш проєкт до міграції. Вам потрібно буде додати плагін Intlayer до конфігурації Vite, щоб автоматично створити псевдоніми для імпортів `vue-i18n`.
+
+```typescript fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vueI18nVitePlugin from "@intlayer/vue-i18n/plugin";
+
+export default defineConfig({
+  plugins: [vue(), vueI18nVitePlugin()],
+});
+```
+
+## Що це робить під капотом
+
+`vueI18nVitePlugin` впроваджує псевдонім модуля в ваш bundler. Будь-який імпорт `vue-i18n` у вашій кодовій базі буде прозоро перенаправлений на `@intlayer/vue-i18n`.
+
+**Під капотом адаптер обробляє складний синтаксис `vue-i18n` нативно:**
+
+- **Інтерполяція та множина:** Розв'язує `{name}` та списковану `{0}` інтерполяцію. Pipe множини (`"car | cars"`) конвертуються у вузли перерахування/множини Intlayer на основі позиційної семантики.
+- **Формати:** Функції як `d()` та `n()` обгортають `Intl` під капотом, дотримуючись `datetimeFormats` та `numberFormats`, визначених у ваших опціях.
+- **Глобальний та локальний стан:** `global.locale` відображається на `WritableComputedRef`, підкріплений Intlayer client, тому реактивність працює саме так як очікується (напр. `locale.value = 'fr'`).
+- **Директиви:** Директива `v-t` реєструється та функціонує нормально.
+
+Ваша програма продовжує рендеритися точно так само, як раніше, але вміст забезпечується вашими словниками Intlayer, надаючи вам типобезпеку, кращу оптимізацію bundle та безперебійну інтеграцію CMS.

package/docs/uk/compiler.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-03-12
+updatedAt: 2026-06-23
 title: Intlayer Compiler | Автоматизоване витягування контенту для i18n
 description: Автоматизуйте процес інтернаціоналізації за допомогою Intlayer Compiler. Витягуйте контент безпосередньо з ваших компонентів для швидшого та ефективнішого i18n у Vite, Next.js та інших.
 keywords:
@@ -60,6 +60,8 @@ author: aymericzip
 
 ## Використання
 
+> The quickest way to wire the compiler in is the interactive setup: run `npx intlayer init --interactive` and select **Compiler**. On Vite there is nothing to configure — the compiler is plugged in directly through the `intlayerCompiler()` plugin. On Next.js the command scaffolds the `babel.config.js` shown below. The non-interactive `intlayer init` leaves the compiler setup untouched.
+
 <Tabs>
  <Tab value='vite'>
 
@@ -79,12 +81,15 @@ npm install vite-intlayer
 
 ```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(), // Додає плагін компілятора
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
   ],
 });
 ```

package/docs/uk/configuration.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-05-12
+updatedAt: 2026-06-23
 title: Конфігурація
 description: Дізнайтеся, як налаштувати Intlayer для вашого додатка. Зрозумійте різні налаштування та параметри, доступні для адаптації Intlayer під ваші потреби.
 keywords:
@@ -14,6 +14,12 @@ slugs:
   - concept
   - configuration
 history:
+  - version: 9.0.0
+    date: 2026-06-24
+    changes: "Add `enableProxy` option to the routing configuration"
+  - version: 8.10.0
+    date: 2026-06-17
+    changes: "Додано опцію `format` до конфігурації словника"
   - version: 8.9.4
     date: 2026-05-12
     changes: "Додано підтримку провайдера LM Studio"
@@ -135,6 +141,7 @@ Intlayer приймає формати конфігураційних файлі
 ````typescript fileName="intlayer.config.ts" codeFormat="typescript"
 import { Locales, type IntlayerConfig } from "intlayer";
 import { nextjsRewrite } from "intlayer/routing";
+import { syncJSON } from "@intlayer/sync-json-plugin";
 import { z } from "zod";
 
 /**
@@ -582,10 +589,38 @@ const config: IntlayerConfig = {
     }),
   },
 
+  /**
+   * Конфігурація словника.
+   */
+  dictionary: {
+    /**
+     * Керує способом імпорту словників.
+     * - "static": Статично імпортується під час збірки.
+     * - "dynamic": Динамічно імпортується за допомогою Suspense.
+     * - "fetch": Динамічно завантажується через API живої синхронізації.
+     */
+    importMode: "static",
+
+    /**
+     * Формат повідомлень за замовчуванням для всіх словників у проекті.
+     * - 'intlayer': Власний формат intlayer (за замовчуванням).
+     * - 'icu': Формат повідомлень ICU.
+     * - 'i18next': Формат i18next.
+     * - 'vue-i18n': Формат Vue I18n.
+     * - 'po': Формат GNU Gettext PO.
+     */
+    format: "icu",
+  },
+
   /**
    * Конфігурація плагінів.
    */
-  plugins: [],
+  plugins: [
+    syncJSON({
+      format: "icu",
+      source: ({ locale }) => `./messages/${locale}.json`,
+    }),
+  ],
 };
 
 export default config;
@@ -850,6 +885,21 @@ export default config;
 
 ---
 
+### Конфігурація системи
+
+Параметри, пов'язані з внутрішніми шляхами та результатами виведення Intlayer. Ці параметри зазвичай є внутрішніми і не повинні потребувати змін користувачем.
+
+| Field                     | Description                                                                            | Type     | Default                           | Example              | Note                                                        |
+| ------------------------- | -------------------------------------------------------------------------------------- | -------- | --------------------------------- | -------------------- | ----------------------------------------------------------- |
+| `baseDir`                 | Базова директорія проекту.                                                             | `string` | `process.cwd()`                   | `'/path/to/project'` | Використовується для розпізнавання всіх каталогів Intlayer. |
+| `dictionariesDir`         | Шлях директорії для зберігання словників локалізації.                                  | `string` | `'.intlayer/dictionary'`          |                      |                                                             |
+| `moduleAugmentationDir`   | Директорія для розширення модулю, що дозволяє краще пропозиції IDE та перевірку типів. | `string` | `'.intlayer/types'`               | `'intlayer-types'`   | Переконайтеся, що це включено в `tsconfig.json`.            |
+| `unmergedDictionariesDir` | Директорія для зберігання об'єднаних словників.                                        | `string` | `'.intlayer/unmerged_dictionary'` |                      |                                                             |
+| `typesDir`                | Директорія для зберігання типів словників.                                             | `string` | `'.intlayer/types'`               |                      |                                                             |
+| `mainDir`                 | Директорія, де зберігаються основні файли додатку.                                     | `string` | `'.intlayer/main'`                |                      |                                                             |
+| `configDir`               | Директорія, де зберігаються файли конфігурації.                                        | `string` | `'.intlayer/config'`              |                      |                                                             |
+| `cacheDir`                | Директорія, де зберігаються файли кешу.                                                | `string` | `'.intlayer/cache'`               |                      |                                                             |
+
 ### Конфігурація словника (Dictionary)
 
 Параметри для контролю операцій зі словниками, включаючи поведінку автоматичного заповнення та генерацію контенту.
@@ -862,6 +912,7 @@ export default config;
 | `contentAutoTransformation` | Чи слід автоматично перетворювати рядки контенту в типізовані вузли (Markdown, HTML або вставки).                                              | `boolean` &#124; <br/> `{ markdown?: boolean; html?: boolean; insertion?: boolean }`                            | `false`          | `true`                                                                                      | • Markdown : `### Title` → `md('### Title')` .<br/>• HTML : `<div>Title</div>` → `html('<div>Title</div>')` .<br/>• Вставки : `Hello {{name}}` → `insert('Hello {{name}}')` .                                                                                                                                                                                                                                       |
 | `location`                  | Вказує на місце зберігання файлів словників та спосіб їх синхронізації з CMS.                                                                  | `'local'` &#124; <br/> `'remote'` &#124; <br/> `'hybrid'` &#124; <br/> `'plugin'` &#124; <br/> `string`         | `'local'`        | `'hybrid'`                                                                                  | • `'local'`: Тільки локальне керування.<br/>• `'remote'`: Тільки віддалене керування (CMS).<br/>• `'hybrid'`: І локальне, і віддалене керування.<br/>• `'plugin'` або власні рядки: Керування через плагін або власне джерело.                                                                                                                                                                                      |
 | `importMode`                | Керує способом імпорту словників.                                                                                                              | `'static'` &#124; <br/> `'dynamic'` &#124; <br/> `'fetch'`                                                      | `'static'`       | `'dynamic'`                                                                                 | • `'static'`: Статичний імпорт.<br/>• `'dynamic'`: Динамічний імпорт через Suspense.<br/>• `'fetch'`: Отримання через Live Sync API; резервний варіант `'dynamic'` у разі помилки.<br/>• Потрібні плагіни `@intlayer/babel` та `@intlayer/swc`.<br/>• Ключі мають бути оголошені статично.<br/>• Ігнорується, якщо `optimize` вимкнено.<br/>• Не впливає на `getIntlayer`, `getDictionary` тощо.                    |
+| `format`                    | Формат повідомлень за замовчуванням для всіх словників у проекті.                                                                              | `'intlayer'` &#124; <br/> `'icu'` &#124; <br/> `'i18next'` &#124; <br/> `'vue-i18n'` &#124; <br/> `'po'`        | `'intlayer'`     | `'icu'`                                                                                     | • `'intlayer'`: Власний формат intlayer.<br/>• `'icu'`: Формат повідомлень ICU.<br/>• `'i18next'`: Формат i18next.<br/>• `'vue-i18n'`: Формат Vue I18n.<br/>• `'po'`: Формат GNU Gettext PO.                                                                                                                                                                                                                        |
 | `priority`                  | Пріоритет словника. При вирішенні конфліктів між словниками вище значення має перевагу перед нижчим.                                           | `number`                                                                                                        | `undefined`      | `1`                                                                                         |                                                                                                                                                                                                                                                                                                                                                                                                                     |
 | `live`                      | ЗАСТАРІЛО - використовуйте `importMode: 'fetch'`. Раніше вказувало, чи слід отримувати контент словника динамічно через Live Sync API.         | `boolean`                                                                                                       | `undefined`      |                                                                                             | Перейменовано на `importMode: 'fetch'` у v8.0.0.                                                                                                                                                                                                                                                                                                                                                                    |
 | `schema`                    | Генерується автоматично Intlayer для валідації JSON-схеми.                                                                                     | `'https://intlayer.org/schema.json'`                                                                            | Генерується      |                                                                                             | Не редагуйте вручну.                                                                                                                                                                                                                                                                                                                                                                                                |
@@ -957,22 +1008,6 @@ Intlayer підтримує широкий спектр провайдерів A
 
 ---
 
-### Системна конфігурація (System)
-
-Ці налаштування призначені для просунутих користувачів та внутрішньої конфігурації Intlayer.
-
-| Поле                      | Опис                                              | Тип      | За замовчуванням                  | Приклад | Примітки |
-| ------------------------- | ------------------------------------------------- | -------- | --------------------------------- | ------- | -------- |
-| `dictionariesDir`         | Директорія для скомпільованих словників.          | `string` | `'.intlayer/dictionary'`          |         |          |
-| `moduleAugmentationDir`   | Директорія для module augmentation TypeScript.    | `string` | `'.intlayer/types'`               |         |          |
-| `unmergedDictionariesDir` | Директорія для незлитих словників.                | `string` | `'.intlayer/unmerged_dictionary'` |         |          |
-| `typesDir`                | Директорія для згенерованих типів.                | `string` | `'.intlayer/types'`               |         |          |
-| `mainDir`                 | Директорія основних файлів Intlayer.              | `string` | `'.intlayer/main'`                |         |          |
-| `configDir`               | Директорія скомпільованих конфігураційних файлів. | `string` | `'.intlayer/config'`              |         |          |
-| `cacheDir`                | Директорія кеш-файлів.                            | `string` | `'.intlayer/cache'`               |         |          |
-
----
-
 ### Конфігурація компілятора (Compiler)
 
 Керує налаштуваннями компілятора Intlayer, який збирає словники безпосередньо з ваших компонентів.

package/docs/uk/custom_domains.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-02
-updatedAt: 2026-04-02
+updatedAt: 2026-06-23
 title: Власні домени
 description: Дізнайтеся, як налаштувати маршрутизацію локалей на основі доменів в Intlayer для обслуговування різних локалей з виділених імен хостів.
 keywords:
@@ -172,10 +172,16 @@ GET intlayer.zh/about
 
 ```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/uk/custom_url_rewrites.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-01-26
+updatedAt: 2026-06-23
 title: Користувацькі правила переписування URL
 description: Дізнайтеся, як налаштувати та використовувати користувацькі правила переписування URL в Intlayer для визначення шляхів, специфічних для локалі.
 keywords:
@@ -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/uk/dictionary/condition.md

@@ -71,7 +71,10 @@ export default myConditionalContent;
 
 ## Використання умовного контенту в React Intlayer
 
-Щоб використовувати умовний контент у React-компоненті, імпортуйте та використовуйте хук `useIntlayer` з пакета `react-intlayer`. Цей хук отримує контент для зазначеного ключа і дозволяє передати умову для вибору відповідного виводу.
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+To utilize conditional content within a React component, import and use the `useIntlayer` hook from the `react-intlayer` package. This hook fetches the content for the specified key and allows you to pass in a condition to select the appropriate output.
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
@@ -84,25 +87,25 @@ const ConditionalComponent: FC = () => {
     <div>
       <p>
         {
-          /* Вивід: мій контент, коли це true */
+          /* Output: my content when it's true */
           myCondition(true)
         }
       </p>
       <p>
         {
-          /* Вивід: мій контент, коли це false */
+          /* Output: my content when it's false */
           myCondition(false)
         }
       </p>
       <p>
         {
-          /* Вивід: мій контент, коли умова не виконується */
+          /* Output: my content when the condition fails */
           myCondition("")
         }
       </p>
       <p>
         {
-          /* Вивід: мій контент, коли умова не виконується */
+          /* Output: my content when the condition fails */
           myCondition(undefined)
         }
       </p>
@@ -113,6 +116,165 @@ const ConditionalComponent: FC = () => {
 export default ConditionalComponent;
 ```
 
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+To utilize conditional content in Next.js Client Components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+"use client";
+
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+
+const ConditionalComponent: FC = () => {
+  const { myCondition } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{myCondition(true)}</p>
+      <p>{myCondition(false)}</p>
+    </div>
+  );
+};
+
+export default ConditionalComponent;
+```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+To utilize conditional content in Vue components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```vue fileName="**/*.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+const { myCondition } = useIntlayer("my_key");
+</script>
+
+<template>
+  <div>
+    <p>{{ myCondition(true) }}</p>
+    <p>{{ myCondition(false) }}</p>
+  </div>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+To utilize conditional content in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:
+
+```svelte fileName="**/*.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+const content = useIntlayer("my_key");
+</script>
+
+<div>
+  <p>{$content.myCondition(true)}</p>
+  <p>{$content.myCondition(false)}</p>
+</div>
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+To utilize conditional content in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "preact";
+import { useIntlayer } from "preact-intlayer";
+
+const ConditionalComponent: FC = () => {
+  const { myCondition } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{myCondition(true)}</p>
+      <p>{myCondition(false)}</p>
+    </div>
+  );
+};
+
+export default ConditionalComponent;
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+To utilize conditional content in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { Component } from "solid-js";
+import { useIntlayer } from "solid-intlayer";
+
+const ConditionalComponent: Component = () => {
+  const { myCondition } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{myCondition(true)}</p>
+      <p>{myCondition(false)}</p>
+    </div>
+  );
+};
+
+export default ConditionalComponent;
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+To utilize conditional content in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```typescript fileName="app.component.ts" codeFormat="typescript"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-conditional",
+  template: `
+    <div>
+      <p>{{ content().myCondition(true) }}</p>
+      <p>{{ content().myCondition(false) }}</p>
+    </div>
+  `,
+})
+export class ConditionalComponent {
+  content = useIntlayer("my_key");
+}
+```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+To utilize conditional content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
+import { installIntlayer, useIntlayer } from "vanilla-intlayer";
+
+installIntlayer();
+
+const content = useIntlayer("my_key").onChange((newContent) => {
+  document.getElementById("true-content")!.textContent =
+    newContent.myCondition(true);
+  document.getElementById("false-content")!.textContent =
+    newContent.myCondition(false);
+});
+
+// Initial render
+document.getElementById("true-content")!.textContent =
+  content.myCondition(true);
+document.getElementById("false-content")!.textContent =
+  content.myCondition(false);
+```
+
+  </Tab>
+</Tabs>
+
 ## Додаткові ресурси
 
 Для детальнішої інформації щодо конфігурації та використання зверніться до наведених ресурсів:

package/docs/uk/dictionary/content_file.md

@@ -612,13 +612,6 @@ JSON-схема, що використовується для валідації
 
 Вказує, чи словник був автоматично заповнений з зовнішніх джерел. У разі конфліктів базові словники матимуть пріоритет над автоматично заповненими словниками.
 
-##### `location` ('distant' | 'locale')
-
-Вказує місцезнаходження словника:
-
-- `'locale'`: Локальний словник (з файлів контенту)
-- `'distant'`: Віддалений словник (із зовнішнього джерела)
-
 ## Типи вузлів контенту
 
 Intlayer надає кілька спеціалізованих типів вузлів вмісту, які розширюють базові примітивні значення: