@intlayer/docs 7.5.11 → 7.5.13

package/blog/uk/react-i18next_vs_react-intl_vs_intlayer.md

@@ -0,0 +1,164 @@
+---
+createdAt: 2025-01-02
+updatedAt: 2025-06-29
+title: react-i18next vs react-intl vs Intlayer
+description: Інтеграція react-i18next з next-intl та Intlayer для інтернаціоналізації (i18n) React-додатка
+keywords:
+  - next-intl
+  - react-i18next
+  - Intlayer
+  - Інтернаціоналізація
+  - Блог
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - blog
+  - react-i18next-vs-react-intl-vs-intlayer
+---
+
+# react-Intl VS react-i18next VS intlayer | Інтернаціоналізація React (i18n)
+
+Цей посібник порівнює три визнані варіанти i18n для **React**: **react-intl** (FormatJS), **react-i18next** (i18next) та **Intlayer**.
+Ми зосереджені на **plain React** додатках (наприклад, Vite, CRA, SPA). Якщо ви використовуєте Next.js, див. наше окреме порівняння для Next.js.
+
+Ми оцінюємо:
+
+- Архітектура та організація контенту
+- TypeScript і безпека
+- Обробка відсутніх перекладів
+- Можливості для багатого контенту та форматування
+- Продуктивність та поведінка завантаження
+- Досвід розробника (DX), інструменти та супровід
+- SEO/маршрутизація (залежить від фреймворку)
+
+<TOC/>
+
+> **tl;dr**: Усі три можуть локалізувати React-додаток. Якщо ви хочете **контент, прив'язаний до компонентів**, **суворі TypeScript-типи**, **перевірки відсутніх ключів під час збірки**, **tree-shaken словники**, та вбудовані редакційні інструменти (Visual Editor/CMS + необов'язковий AI-переклад), **Intlayer** є найповнішим вибором для модульних React-кодових баз.
+
+---
+
+## Високорівневе позиціонування
+
+- **react-intl** - орієнтований на ICU, форматування, узгоджене зі стандартами (дати/числа/множини), зі зрілим API. Каталоги зазвичай централізовані; безпека ключів і перевірки на етапі збірки в основному на вас.
+- **react-i18next** - надзвичайно популярний і гнучкий; namespaces, detectors і багато плагінів (ICU, backends). Потужний, але конфігурація може розростатися зі збільшенням проєкту.
+- **Intlayer** - модель контенту, орієнтована на компоненти для React, зі **строгим типізуванням TS**, **перевірками на етапі збірки**, **tree-shaking**, а також **Visual Editor/CMS** і **AI‑асистованими перекладами**. Працює з React Router, Vite, CRA тощо.
+
+---
+
+## Матриця функцій (фокус на React)
+
+| Особливість                                                     | `react-intlayer` (Intlayer)                                                                                                                  | `react-i18next` (i18next)                                                                                                    | `react-intl` (FormatJS)                                                                                   |
+| --------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| **Translations Near Components**                                | ✅ Так, контент розміщено поруч із кожним компонентом                                                                                        | ❌ Ні                                                                                                                        | ❌ Ні                                                                                                     |
+| **TypeScript Integration**                                      | ✅ Розвинена інтеграція, автоматично згенеровані строгі типи                                                                                 | ⚠️ Базова; потрібна додаткова конфігурація для безпеки                                                                       | ✅ Добра інтеграція, але менш сувора                                                                      |
+| **Виявлення відсутніх перекладів**                              | ✅ Підсвітка помилок TypeScript та помилки/попередження під час збірки                                                                       | ⚠️ Переважно використовуються запасні рядки під час виконання                                                                | ⚠️ Запасні рядки                                                                                          |
+| **Багатий вміст (JSX/Markdown/компоненти)**                     | ✅ Пряма підтримка                                                                                                                           | ⚠️ Обмежено / лише інтерполяція                                                                                              | ⚠️ Синтаксис ICU, не справжній JSX                                                                        |
+| **AI-переклад**                                                 | ✅ Так, підтримує кількох AI-провайдерів. Можна використовувати власні API-ключі. Бере до уваги контекст вашого застосунку та обсяг контенту | ❌ Ні                                                                                                                        | ❌ Ні                                                                                                     |
+| **Візуальний редактор**                                         | ✅ Так, локальний Visual Editor + опційна CMS; може винести контент із codebase; вбудовуваний                                                | ❌ Ні / доступно через зовнішні платформи локалізації                                                                        | ❌ Ні / доступно через зовнішні платформи локалізації                                                     |
+| **Локалізована маршрутизація**                                  | ✅ Так, підтримує локалізовані шляхи "з коробки" (працює з Next.js & Vite)                                                                   | ⚠️ Немає вбудованої підтримки, потребує плагінів (наприклад `next-i18next`) або налаштування власного роутера                | ❌ Ні, лише форматування повідомлень; маршрутизацію потрібно робити вручну                                |
+| **Динамічна генерація маршрутів**                               | ✅ Так                                                                                                                                       | ⚠️ Плагіни/екосистема або ручне налаштування                                                                                 | ❌ Не надається                                                                                           |
+| **Плюралізація**                                                | ✅ Шаблони на основі переліку                                                                                                                | ✅ Налаштовується (плагіни, наприклад i18next-icu)                                                                           | ✅ (ICU)                                                                                                  |
+| **Форматування (дат, чисел, валют)**                            | ✅ Оптимізовані форматери (Intl під капотом)                                                                                                 | ⚠️ Через плагіни або кастомне використання Intl                                                                              | ✅ Форматери ICU                                                                                          |
+| **Формат контенту**                                             | ✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml WIP)                                                                                             | ⚠️ .json                                                                                                                     | ✅ .json, .js                                                                                             |
+| **Підтримка ICU**                                               | ⚠️ WIP                                                                                                                                       | ⚠️ Через плагін (i18next-icu)                                                                                                | ✅ Так                                                                                                    |
+| **Інструменти SEO (hreflang, sitemap)**                         | ✅ Вбудовані інструменти: помічники для sitemap, robots.txt, метаданих                                                                       | ⚠️ Плагіни спільноти/ручні рішення                                                                                           | ❌ Не є частиною ядра                                                                                     |
+| **Екосистема / Спільнота**                                      | ⚠️ Менша, але швидко зростає та оперативна                                                                                                   | ✅ Найбільша та зріла                                                                                                        | ✅ Велика                                                                                                 |
+| **Server-side Rendering та Server Components**                  | ✅ Так, оптимізовано для SSR / React Server Components                                                                                       | ⚠️ Підтримується на рівні сторінки, але потрібно передавати t-functions по дереву компонентів для дочірніх Server Components | ❌ Не підтримується, потрібно передавати t-functions по дереву компонентів для дочірніх Server Components |
+| **Tree-shaking (завантаження лише використовуваного контенту)** | ✅ Так, на рівні компонентів під час збірки через плагіни Babel/SWC                                                                          | ⚠️ Зазвичай завантажує все (можна покращити через namespaces/code-splitting)                                                 | ⚠️ Зазвичай завантажує все                                                                                |
+| **Ліниве завантаження**                                         | ✅ Так, для кожної локалі / кожного словника                                                                                                 | ✅ Так (наприклад, бекенди/неймспейси за запитом)                                                                            | ✅ Так (розбиття бандлів за локалями)                                                                     |
+| **Очищення невикористовуваного контенту**                       | ✅ Так, для кожного словника під час збірки                                                                                                  | ❌ Ні, лише через ручну сегментацію неймспейсів                                                                              | ❌ Ні, усі оголошені повідомлення включені в бандл                                                        |
+| **Управління великими проєктами**                               | ✅ Заохочує модульність, підходить для design-system                                                                                         | ⚠️ Потребує доброї дисципліни в організації файлів                                                                           | ⚠️ Центральні каталоги можуть стати великими                                                              |
+
+---
+
+## Поглиблене порівняння
+
+### 1) Архітектура та масштабованість
+
+- **react-intl / react-i18next**: Більшість налаштувань використовують **централізовані папки локалей** для кожної мови, іноді розділені на **namespaces** (i18next). Добре працює на початку, але стає спільною зоною відповідальності у міру зростання додатків.
+- **Intlayer**: Заохочує використання **словників на рівні компонента (або фічі)**, **розміщених разом** з UI, якому вони служать. Це зберігає чітку відповідальність, полегшує дублювання/міграцію компонентів і зменшує кількість змін ключів між командами. Невикористовуваний контент легше виявити та видалити.
+
+**Чому це важливо:** Модульний контент відображає модульний UI. Великі React codebases залишаються чистішими, коли переклади живуть разом із компонентами, яким вони належать.
+
+---
+
+### 2) TypeScript & безпека
+
+- **react-intl**: Надійна типізація, але **немає автоматичної типізації ключів**; вам доводиться самостійно запроваджувати патерни для забезпечення безпеки.
+- **react-i18next**: Сильна типізація для hooks; **строга типізація ключів** зазвичай вимагає додаткової конфігурації або генераторів.
+- **Intlayer**: **Автоматично генерує строгі типи** з вашого контенту. Автодоповнення IDE та **помилки на етапі компіляції** виявляють опечатки та відсутні ключі до запуску.
+
+**Чому це важливо:** Перенесення помилок **вліво** (на етап збірки/CI) зменшує проблеми в продакшені та пришвидшує цикл зворотного зв’язку для розробників.
+
+---
+
+### 3) Обробка відсутніх перекладів
+
+- **react-intl / react-i18next**: За замовчуванням використовують **запасні варіанти під час виконання** (відображення ключа або локаль за замовчуванням). Можна додати лінтери/плагіни, але це не гарантується на етапі збірки.
+- **Intlayer**: **Виявлення під час збірки** з попередженнями або помилками, коли відсутні потрібні локалі/ключі.
+
+**Чому це важливо:** Якщо CI падає через відсутні рядки, це запобігає витоку «таємної англійської» в інтерфейси іншими мовами.
+
+---
+
+### 4) Багатий контент і форматування
+
+- **react-intl**: Відмінна підтримка **ICU** для plurals, selects, дат/чисел та композиції повідомлень. Можна використовувати JSX, але ментальна модель залишається орієнтованою на повідомлення.
+- **react-i18next**: Гнучка інтерполяція та **`<Trans>`** для вбудовування елементів/компонентів; ICU доступне через плагін.
+- **Intlayer**: Файли контенту можуть містити **rich nodes** (JSX/Markdown/components) та **metadata**. Форматування використовує Intl під капотом; шаблони множини зручні.
+
+**Чому це важливо:** Складні тексти інтерфейсу (посилання, виділені фрагменти, інлайнові компоненти) простіше реалізовувати, коли бібліотека природно працює з React-нодами.
+
+---
+
+### 5) Продуктивність і поведінка завантаження
+
+- **react-intl / react-i18next**: Зазвичай ви вручну керуєте **розбиттям каталогів (catalog splitting)** та **ледачим завантаженням (lazy loading)** (namespaces/dynamic imports). Ефективно, але вимагає дисципліни.
+- **Intlayer**: **Tree-shakes** непотрібні словники і підтримує **per-dictionary/per-locale lazy loading** з коробки.
+
+**Чому це важливо:** Менші бандли і менше невикористаних рядків покращують час запуску та продуктивність навігації.
+
+---
+
+### 6) DX, інструменти та супровід
+
+- **react-intl / react-i18next**: Широка екосистема спільноти; для редакційних робочих процесів ви зазвичай використовуєте зовнішні платформи локалізації.
+- **Intlayer**: Надає **безкоштовний візуальний редактор** та **опційний CMS** (зберігайте контент у Git або зовнішньо). Також пропонує **розширення для VSCode** для створення контенту та **переклад із допомогою ШІ** з використанням ваших власних ключів провайдера.
+
+**Чому це важливо:** Вбудовані інструменти скорочують цикл між розробниками та авторами контенту — менше допоміжного коду, менше залежностей від постачальників.
+
+---
+
+## Коли обирати який варіант?
+
+- **Оберіть react-intl** якщо ви хочете **форматування повідомлень, орієнтоване на ICU**, з простим, відповідним стандартам API, і ваша команда комфортно підтримує каталоги та перевірки вручну.
+- **Оберіть react-i18next** якщо вам потрібна **широта екосистеми i18next** (детектори, бекенди, плагін ICU, інтеграції) і ви готові до більшої конфігурації заради гнучкості.
+- **Обирайте Intlayer** якщо ви цінуєте **component-scoped content**, **strict TypeScript**, **build-time guarantees**, **tree-shaking** та **batteries-included** редакторські інструменти — особливо для **large, modular** React-додатків, design-systems тощо.
+
+---
+
+## Сумісність з `react-intl` та `react-i18next`
+
+`intlayer` також може допомогти керувати вашими неймспейсами `react-intl` і `react-i18next`.
+
+Використовуючи `intlayer`, ви можете оголошувати ваш контент у форматі улюбленої i18n-бібліотеки, і intlayer згенерує ваші неймспейси у вибраному місці (приклад: `/messages/{{locale}}/{{namespace}}.json`).
+
+Дивіться опції [`dictionaryOutput` and `i18nextResourcesDir`](https://intlayer.org/doc/concept/configuration#content-configuration) для детальнішої інформації.
+
+---
+
+## Зірки GitHub
+
+GitHub-зірки — це вагомий індикатор популярності проєкту, довіри спільноти та його довгострокової релевантності. Хоча вони не є прямим показником технічної якості, вони відображають, скільки розробників вважають проєкт корисним, стежать за його розвитком і ймовірно його приймуть. Для оцінки цінності проєкту зірки допомагають порівнювати популярність між альтернативами та дають уявлення про зростання екосистеми.
+
+## [![Діаграма історії зірок](https://api.star-history.com/svg?repos=formatjs/formatjs&repos=i18next/react-i18next&repos=aymericzip/intlayer&type=Date)](https://www.star-history.com/#formatjs/formatjs&i18next/react-i18next&aymericzip/intlayer)
+
+## Висновок
+
+Усі три бібліотеки ефективно локалізують React. Відмінність — у тому, скільки **infrastructure** вам потрібно побудувати, щоб досягти **safe, scalable** setup:
+
+- З **Intlayer** **модульний контент**, **сувора типізація TS**, **безпека на етапі збірки**, **tree-shaken bundles** та **редакційні інструменти** — це налаштування за замовчуванням, а не рутинні завдання.
+- Якщо ваша команда цінує **підтримуваність і швидкість** у multi-locale, компонентно-орієнтованих React-додатках, Intlayer сьогодні пропонує **найповніший** робочий процес для розробників і контенту.
+
+Дивіться документ [«Чому Intlayer?»](https://intlayer.org/doc/why) для детальнішої інформації.

package/blog/uk/vue-i18n_vs_intlayer.md

@@ -0,0 +1,279 @@
+---
+createdAt: 2024-08-11
+updatedAt: 2025-08-23
+title: vue-i18n проти Intlayer
+description: Порівняння vue-i18n та Intlayer для інтернаціоналізації (i18n) у додатках Vue/Nuxt
+keywords:
+  - vue-i18n
+  - Intlayer
+  - Інтернаціоналізація
+  - i18n
+  - Блог
+  - Vue
+  - Nuxt
+  - JavaScript
+slugs:
+  - blog
+  - vue-i18n-vs-intlayer
+---
+
+# vue-i18n VS Intlayer | Інтернаціоналізація Vue (i18n)
+
+Цей посібник порівнює два популярні варіанти i18n для **Vue 3** (і **Nuxt**): **vue-i18n** та **Intlayer**.
+Ми фокусуємося на сучасному інструментарії Vue (Vite, Composition API) і оцінюємо:
+
+1. **Архітектура та організація контенту**
+2. **TypeScript та безпека**
+3. **Обробка відсутніх перекладів**
+4. **Маршрутизація та стратегія URL**
+5. **Продуктивність та поведінка завантаження**
+6. **Досвід розробника (DX), інструменти та підтримка**
+7. **SEO та масштабованість для великих проєктів**
+
+<TOC/>
+
+> **коротко**: Обидва можуть локалізувати Vue-додатки. Якщо вам потрібен **контент у межах компонента**, **строга типізація TypeScript**, **перевірки відсутніх ключів на етапі збірки**, **словники, оптимізовані для tree-shaking**, та вбудовані **помічники для роутера/SEO**, а також **Візуальний редактор та AI-переклади**, **Intlayer** — більш повне та сучасне рішення.
+
+---
+
+## Загальне позиціонування
+
+- **vue-i18n** - де-факто бібліотека i18n для Vue. Гнучке форматування повідомлень (ICU-стиль), SFC `<i18n>` блоки для локальних повідомлень і велика екосистема. Безпека та підтримка у великих проєктах переважно залежать від вас.
+- **Intlayer** - Модель контенту, орієнтована на компоненти, для Vue/Vite/Nuxt з **строгими TS типами**, **перевірками під час збірки**, **tree-shaking**, **помічниками для маршрутизатора та SEO**, опціональним **Visual Editor/CMS** і **AI‑підтримкою перекладів**.
+
+---
+
+## Порівняння можливостей бок-о-бок (орієнтовано на Vue)
+
+| Функція                                       | **Intlayer**                                                                               | **vue-i18n**                                                                                             |
+| --------------------------------------------- | ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------- |
+| **Переклади поруч із компонентами**           | ✅ Так, вміст розташований поруч із компонентом (наприклад, `MyComp.content.ts`)           | ✅ Так, через SFC-блоки `<i18n>` (необов'язково)                                                         |
+| **Інтеграція TypeScript**                     | ✅ Просунута: автоматично згенеровані **строгі** типи та автозаповнення ключів             | ✅ Добра типізація; для забезпечення **строгої безпеки ключів** потрібні додаткові налаштування/практики |
+| **Виявлення відсутніх перекладів**            | ✅ Попередження/помилки під час збірки (**build-time**) і відображення в TS                | ⚠️ Підміни/попередження під час виконання (runtime)                                                      |
+| **Багатий контент (компоненти/Markdown)**     | ✅ Пряма підтримка багатих вузлів та файлів з вмістом у Markdown                           | ⚠️ Обмежено (компоненти через `<i18n-t>`, Markdown через зовнішні плагіни)                               |
+| **AI-підтримуваний переклад**                 | ✅ Вбудовані робочі процеси з використанням власних ключів постачальника AI                | ❌ Не вбудовано                                                                                          |
+| **Візуальний редактор / CMS**                 | ✅ Безкоштовний візуальний редактор і опційний CMS                                         | ❌ Не вбудовано (використовуйте зовнішні платформи)                                                      |
+| **Локалізоване маршрутизування**              | ✅ Хелпери для Vue Router/Nuxt для генерації локалізованих шляхів, URL-адрес та `hreflang` | ⚠️ Не є частиною ядра (використовуйте Nuxt i18n або власну конфігурацію Vue Router)                      |
+| **Динамічна генерація маршрутів**             | ✅ Так                                                                                     | ❌ Не надається (реалізовано в Nuxt i18n)                                                                |
+| **Плюралізація та форматування**              | ✅ Шаблони перерахування; форматери на основі Intl                                         | ✅ Повідомлення у стилі ICU; форматери Intl                                                              |
+| **Формати контенту**                          | ✅ `.ts`, `.js`, `.json`, `.md`, `.txt` (YAML WIP)                                         | ✅ `.json`, `.js` (плюс SFC-блоки `<i18n>`)                                                              |
+| **Підтримка ICU**                             | ⚠️ WIP                                                                                     | ✅ Так                                                                                                   |
+| **SEO-помічники (sitemap, robots, metadata)** | ✅ Вбудовані помічники (незалежні від фреймворку)                                          | ❌ Не є ядром (Nuxt i18n/спільнота)                                                                      |
+| **SSR/SSG**                                   | ✅ Працює з Vue SSR та Nuxt; не блокує статичне рендерення                                 | ✅ Працює з Vue SSR/Nuxt                                                                                 |
+| **Tree-shaking (ship only used content)**     | ✅ На рівні компонентів під час збірки                                                     | ⚠️ Частково; потребує ручного code-splitting та асинхронних повідомлень                                  |
+| **Lazy loading**                              | ✅ На рівні локалі / словника                                                              | ✅ Підтримуються асинхронні повідомлення локалі                                                          |
+| **Очищення невикористовуваного контенту**     | ✅ Так (під час збірки)                                                                    | ❌ Не вбудовано                                                                                          |
+| **Підтримуваність у великих проєктах**        | ✅ Заохочує модульну структуру, сумісну з design system                                    | ✅ Можливо, але потребує суворої дисципліни щодо файлів/просторів імен                                   |
+| **Екосистема / спільнота**                    | ⚠️ Менша, але швидко зростає                                                               | ✅ Велика та зріла в екосистемі Vue                                                                      |
+
+---
+
+## Поглиблене порівняння
+
+### 1) Архітектура та масштабованість
+
+- **vue-i18n**: Загальні налаштування використовують **централізовані каталоги** для кожної локалі (за потреби розбиті на файли/неймспейси). SFC `<i18n>` блоки дозволяють локальні повідомлення, але з розвитком проекту команди часто повертаються до спільних каталогів.
+- **Intlayer**: Заохочує **словники для кожного компонента**, що зберігаються поруч із компонентом, який вони обслуговують. Це зменшує конфлікти між командами, робить контент більш помітним і природно обмежує дрейф/невикористані ключі.
+
+**Чому це важливо:** У великих Vue-додатках або дизайн-системах **модульний контент** масштабується краще за монолітні каталоги.
+
+---
+
+### 2) TypeScript та безпека
+
+- **vue-i18n**: Хороша підтримка TS; **строге типізування ключів** зазвичай потребує кастомних схем/генериків та ретельних конвенцій.
+- **Intlayer**: **Генерує строгі типи** з вашого контенту, забезпечуючи **автодоповнення в IDE** та **помилки під час компіляції** для опечаток/відсутніх ключів.
+
+**Чому це важливо:** Сильна типізація виявляє проблеми ще до виконання (runtime).
+
+---
+
+### 3) Обробка відсутніх перекладів
+
+- **vue-i18n**: **Runtime** попередження/резервні варіанти (наприклад, резервна локаль або ключ).
+- **Intlayer**: **Build-time** виявлення з попередженнями/помилками по всіх локалях і ключах.
+
+**Чому це важливо:** Контроль під час збірки забезпечує чистий і узгоджений UI у production.
+
+---
+
+### 4) Маршрутизація та стратегія URL (Vue Router/Nuxt)
+
+- **Обидва** можуть працювати з локалізованими маршрутами.
+- **Intlayer** надає допоміжні засоби для **генерації локалізованих шляхів**, **керування префіксами локалей** та виведення **`<link rel="alternate" hreflang>`** для SEO. У Nuxt він доповнює маршрутизацію фреймворку.
+
+**Чому це важливо:** Менше додаткової glue-логіки та **чистіше SEO** між локалями.
+
+---
+
+### 5) Продуктивність та поведінка завантаження
+
+- **vue-i18n**: Підтримує асинхронні повідомлення локалей; уникнення надмірного бандлінгу — на вашому боці (ретельно розділяйте каталоги).
+- **Intlayer**: **Tree-shakes** під час збірки та **ліниво завантажує по кожному словнику/локалі**. Невикористовуваний контент не потрапляє в бандл.
+
+**Чому це важливо:** Менші бандли та швидший старт для багатомовних Vue-додатків.
+
+---
+
+### 6) Досвід розробника та інструменти
+
+- **vue-i18n**: Містить зрілу документацію та спільноту; зазвичай ви покладатиметесь на **зовнішні платформи локалізації** для редакційних робочих процесів.
+- **Intlayer**: Постачає **безкоштовний Visual Editor**, опційний **CMS** (дружній до Git або зовнішній), розширення для **VSCode**, утиліти **CLI/CI** та **AI-допоміжні переклади**, що використовують ваші ключі провайдера.
+
+**Чому це важливо:** Нижчі операційні витрати та коротший цикл між розробкою та контентом.
+
+---
+
+### 7) SEO, SSR & SSG
+
+- **Обидва** працюють з Vue SSR та Nuxt.
+- **Intlayer**: Додає **SEO-помічники** (sitemaps/metadata/`hreflang`), які незалежні від фреймворку та добре працюють із збірками Vue/Nuxt.
+
+**Чому це важливо:** Міжнародне SEO без необхідності писати індивідуальний зв'язувальний код.
+
+---
+
+## Чому Intlayer? (Проблема та підхід)
+
+Більшість i18n стеків (включно з **vue-i18n**) починаються з **централізованих каталогів**:
+
+```bash
+.
+├── locales
+│   ├── en.json
+│   ├── es.json
+│   └── fr.json
+└── src
+    └── components
+        └── MyComponent.vue
+```
+
+Або з папками для кожної локалі:
+
+```bash
+.
+├── locales
+│   ├── en
+│   │  ├── footer.json
+│   │  └── navbar.json
+│   ├── fr
+│   │  ├── footer.json
+│   │  └── navbar.json
+│   └── es
+│      ├── footer.json
+│      └── navbar.json
+└── src
+    └── components
+        └── MyComponent.vue
+```
+
+Це часто уповільнює розробку в міру зростання додатків:
+
+1. **Для нового компонента** ви створюєте/редагуєте віддалені каталоги, підключаєте неймспейси та перекладаєте (часто вручну копіюючи/вставляючи з AI-інструментів).
+2. **При зміні компонентів** ви шукаєте спільні ключі, перекладаєте, підтримуєте локалі синхронізованими, видаляєте неактивні ключі та узгоджуєте структури JSON.
+
+**Intlayer** розміщує вміст **для кожного компонента** і тримає його **поряд із кодом**, як ми вже робимо з CSS, stories, tests та docs:
+
+```bash
+.
+└── components
+    └── MyComponent
+        ├── MyComponent.content.ts
+        └── MyComponent.vue
+```
+
+**Оголошення контенту** (для кожного компонента):
+
+```ts fileName="./components/MyComponent/MyComponent.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    greeting: t({
+      uk: "Привіт, світ",
+      en: "Hello World",
+      es: "Hola Mundo",
+      fr: "Bonjour le monde",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentExampleContent;
+```
+
+**Використання у Vue** (Composition API):
+
+```vue fileName="./components/MyComponent/MyComponent.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer"; // Інтеграція з Vue
+const { greeting } = useIntlayer("component-example");
+</script>
+
+<template>
+  <span>{{ greeting }}</span>
+</template>
+```
+
+Цей підхід:
+
+- **Швидша розробка** (задекларувати один раз; IDE/AI автодоповнення).
+- **Очищує кодову базу** (1 компонент = 1 словник).
+- **Полегшує дублювання/міграцію** (копіюйте компонент і його контент разом).
+- **Запобігає «мертвим» ключам** (невикористовувані компоненти не імпортують контент).
+- **Оптимізує завантаження** (лениво завантажувані компоненти підвантажують свій контент разом).
+
+---
+
+## Додаткові можливості Intlayer (для Vue)
+
+- **Підтримка різних фреймворків**: Працює з Vue, Nuxt, Vite, React, Express та іншими.
+- **Управління контентом на базі JavaScript**: Оголошуйте в коді з повною гнучкістю.
+- **Файл декларацій для кожної локалі**: Ініціалізуйте всі локалі та дозвольте інструментам згенерувати решту.
+- **Типобезпечне середовище**: Потужна конфігурація TS з автозаповненням.
+- **Спрощене отримання контенту**: Єдиний хук/composable для отримання всього вмісту словника.
+- **Організована кодова база**: 1 компонент = 1 словник у тій же папці.
+- **Покращена маршрутизація**: Хелпери для **Vue Router/Nuxt** — локалізовані шляхи та метадані.
+- **Підтримка Markdown**: Імпорт віддалених/локальних Markdown-файлів для кожної локалі; робить frontmatter доступним у коді.
+- **Безкоштовний Visual Editor & опційний CMS**: Створення контенту без платної платформи локалізації; синхронізація, дружня до Git.
+- **Tree-shakable контент**: Постачається лише те, що використовується; підтримує lazy loading.
+- **Дружнє до статичної рендерингу**: Не блокує SSG.
+- **AI-powered translations**: Перекладіть на 231 мову, використовуючи вашого власного AI-провайдера/ключ API.
+- **MCP server & VSCode extension**: Автоматизуйте i18n робочі процеси та авторинг всередині вашого IDE.
+- **Interoperability**: Забезпечує інтеграцію з **vue-i18n**, **react-i18next** та **react-intl** за потреби.
+
+---
+
+## Коли вибирати який варіант?
+
+- **Оберіть vue-i18n**, якщо ви хочете **стандартний підхід у Vue**, вам зручно самостійно керувати каталогами/просторами імен, і ваш додаток **малого або середнього розміру** (або ви вже покладаєтесь на Nuxt i18n).
+- **Оберіть Intlayer**, якщо ви цінуєте **контент, прив'язаний до компонентів**, **строгий TypeScript**, **гарантії на етапі збірки**, **tree-shaking** та **batteries-included** інструменти для роутингу/SEO/редагування — особливо для **великих модульних кодових баз Vue/Nuxt**, дизайн-систем тощо.
+
+---
+
+## Сумісність з vue-i18n
+
+`intlayer` також може допомогти керувати вашими неймспейсами `vue-i18n`.
+
+Використовуючи `intlayer`, ви можете задавати контент у форматі вашої улюбленої i18n-бібліотеки, і intlayer згенерує ваші неймспейси в обраному місці (наприклад: `/messages/{{locale}}/{{namespace}}.json`).
+
+Див. опції [`dictionaryOutput` та `i18nextResourcesDir`](https://intlayer.org/doc/concept/configuration#content-configuration) для детальнішої інформації.
+
+---
+
+## Зірки GitHub
+
+GitHub-зірки — це вагомий індикатор популярності проєкту, довіри спільноти та його довгострокової релевантності. Хоча вони не є прямим показником технічної якості, вони відображають, скільки розробників вважають проєкт корисним, слідкують за його розвитком і, ймовірно, впровадять його. При оцінці вартості проєкту зірки допомагають порівняти динаміку прийняття між альтернативами та дають уявлення про зростання екосистеми.
+
+[![Графік історії зірок](https://api.star-history.com/svg?repos=intlify/vue-i18n&repos=aymericzip/intlayer&type=Date)](https://www.star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
+
+---
+
+## Висновок
+
+І **vue-i18n**, і **Intlayer** добре локалізують Vue-застосунки. Різниця в тому, **скільки вам доведеться реалізувати самостійно**, щоб досягти надійної, масштабованої конфігурації:
+
+- За допомогою **Intlayer** **модульний контент**, **strict TS**, **build-time safety**, **tree-shaken bundles** та **router/SEO/editor tooling** доступні **з коробки**.
+- Якщо ваша команда надає пріоритет **підтримуваності та швидкості** у багатомовному, компонентно-орієнтованому Vue/Nuxt додатку, Intlayer сьогодні пропонує **найповніший** досвід.
+
+Див. документ ['Why Intlayer?' doc](https://intlayer.org/doc/why) для детальнішої інформації.