@intlayer/docs 9.5.6 → 9.5.7

package/blog/uk/vue-i18n_vs_intlayer-vue-i18n.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "vue-i18n vs @intlayer/vue-i18n: Однаковий API, різний Bundle"
 description: Що змінюється, коли Vue 3 додаток зберігає свої виклики vue-i18n, але обслуговує їх через адаптер сумісності @intlayer/vue-i18n. JavaScript на сторінку, розмір runtime, розмір компонента та витоку вимірюються на тому самому коді Vite + Vue, плюс те, що адаптер зберігає, ігнорує та не може замінити.
 keywords:
@@ -25,17 +25,19 @@ author: aymericzip
 
 # vue-i18n VS @intlayer/vue-i18n | Однаковий API, різний Bundle
 
-`@intlayer/vue-i18n` — це адаптер сумісності: він надає API `vue-i18n` (`createI18n`, `useI18n`, `t()`, `d()`, `n()`, `$t`, `v-t`, `i18n.global.locale`...) та обслуговує його зі словників, скомпільованих Intlayer. Ваші файли `.vue` не змінюються. Змінюється лише те, до чого прив'язаний `t("footer.github")`.
+![Vue i18n library ecosystem](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
+`@intlayer/vue-i18n`, це адаптер сумісності: він надає API `vue-i18n` (`createI18n`, `useI18n`, `t()`, `d()`, `n()`, `$t`, `v-t`, `i18n.global.locale`...) та обслуговує його зі словників, скомпільованих Intlayer. Ваші файли `.vue` не змінюються. Змінюється лише те, до чого прив'язаний `t("footer.github")`.
 
 Ця стаття вимірює цей перехід на тій же програмі Vite + Vue 3, зібраній один раз з `vue-i18n` і один раз з адаптером. Цифри походять з [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom). Для порівняння `vue-i18n` та Intlayer як бібліотек прочитайте [vue-i18n vs Intlayer](https://intlayer.org/blog/vue-i18n-vs-intlayer) та [vue-i18n vs Intlayer benchmark](https://intlayer.org/blog/vue-i18n-vs-intlayer-benchmark). Ця стаття присвячена тому, які зміни адаптер вносить, коли ви зберігаєте компоненти такими, якими вони є.
 
 <TOC/>
 
-> **tl;dr**: На тому самому додатку Vite + Vue 3 заміна `vue-i18n` на `@intlayer/vue-i18n` зменшила JavaScript на сторінку з **134.9 KB до 47.0 KB** gzip (додаток без i18n важить 41.3 KB), runtime з **24.3 KB до 7.9 KB**, середній компонент з **196 KB до 8.4 KB** і витоком рядків іноземної сторінки з **90% до 0%**, без редагування жодного файлу `.vue`. `createI18n({ messages })` продовжує працювати як резервний варіант; видаліть імпорти JSON, щоб отримати наведені вище цифри. SFC блоки `<i18n>` та runtime `setLocaleMessage()` — це дві функції, які не переносяться.
+> **tl;dr**: На тому самому додатку Vite + Vue 3 заміна `vue-i18n` на `@intlayer/vue-i18n` зменшила JavaScript на сторінку з **134.9 KB до 47.0 KB** gzip (додаток без i18n важить 41.3 KB), runtime з **24.3 KB до 7.9 KB**, середній компонент з **196 KB до 8.4 KB** і витоком рядків іноземної сторінки з **90% до 0%**, без редагування жодного файлу `.vue`. `createI18n({ messages })` продовжує працювати як резервний варіант; видаліть імпорти JSON, щоб отримати наведені вище цифри. SFC блоки `<i18n>` та runtime `setLocaleMessage()`, це дві функції, які не переносяться.
 
 ## Що таке `@intlayer/vue-i18n`
 
-`vue-i18n` — це runtime. `createI18n({ messages: { en, fr, ... } })` будує глобальний екземпляр, який містить усі повідомлення кожної мови; `useI18n()` пов'язує кожний компонент з ним; `t("footer.github")` проходить деревом під час рендеру. Це дизайн робить можливими SFC блоки `<i18n>` та `setLocaleMessage()`, а також робить граф залежностей кожного компонента включеним у все дерево.
+`vue-i18n`, це runtime. `createI18n({ messages: { en, fr, ... } })` будує глобальний екземпляр, який містить усі повідомлення кожної мови; `useI18n()` пов'язує кожний компонент з ним; `t("footer.github")` проходить деревом під час рендеру. Це дизайн робить можливими SFC блоки `<i18n>` та `setLocaleMessage()`, а також робить граф залежностей кожного компонента включеним у все дерево.
 
 `@intlayer/vue-i18n` зберігає API та замінює дерево:
 
@@ -105,6 +107,10 @@ The [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) suite б
 
 ### Результати на Vite + Vue 3
 
+Виберіть метрики та бібліотеки, які вас цікавлять:
+
+<I18nBenchmark framework="vite-vue" vertical/>
+
 | Setup                    | Strategy | Lib size (gz) | Lib size (min) | Page JS avg (gz) | Locale leak | Page leak | Component avg (gz) | E2E reactivity |  Page load |
 | ------------------------ | -------- | ------------: | -------------: | ---------------: | ----------: | --------: | -----------------: | -------------: | ---------: |
 | **base** (no i18n)       | -        |        0.0 KB |         0.0 KB |          41.3 KB |        0.0% |         - |             1.1 KB |         1.8 ms |    10.8 ms |
@@ -117,18 +123,31 @@ The [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) suite б
 
 **Як це читати**
 
-- **88 KB менше на сторінку, ті ж компоненти.** `vue-i18n` бере програму 41.3 KB до **134.9 KB**. Адаптер збірка тих же компонентів приземляється на **47.0 KB**, 5.7 KB більше базової програми. Більшість різниці — це 74.9 KB з `src/locales`, яку `createI18n({ messages })` тягне на кожну сторінку, а адаптер ніколи не пакує як блок.
+- **88 KB менше на сторінку, ті ж компоненти.** `vue-i18n` бере програму 41.3 KB до **134.9 KB**. Адаптер збірка тих же компонентів приземляється на **47.0 KB**, 5.7 KB більше базової програми. Більшість різниці, це 74.9 KB з `src/locales`, яку `createI18n({ messages })` тягне на кожну сторінку, а адаптер ніколи не пакує як блок.
 - **Runtime зменшується в 3 рази.** Порожний компонент, який лише імпортує `vue-i18n`, коштує **24.3 KB gzip / 83.2 KB мініфіковано**: `@intlify/core-base`, компілятор повідомлень і runtime. Адаптер коштує **7.9 KB / 23.2 KB**, більшість з яких це core Intlayer плюс поверхня API `vue-i18n`.
 - **Компоненти: 23x менші.** Компонент `useI18n()`, скомпільований ізольовано, в середньому займає **196 KB**, тому що `t` пов'язана з екземпляром, який містить кожне повідомлення кожної локалізації. З адаптером той самий компонент в середньому займає **8.4 KB**: він досягає своїх власних словників.
-- **Витоку.** `vue-i18n` поставляє кожну локаль і рядки кожної сторінки на кожній сторінці: 50% витоку локалі (на двох відбитих локалях; з десятьма упакованими локалями реальні втрати вищі), 90% витоку сторінки. Адаптер знижує витік сторінки до **0%**, оскільки кожний компонент імпортує тільки свої словники. Витік локалі становить 15% у цьому запуску `static`; `importMode: 'dynamic'` — це параметр, який його видаляє, і ця конфігурація не була частиною цього запуску Vue.
+- **Витоку.** `vue-i18n` поставляє кожну локаль і рядки кожної сторінки на кожній сторінці: 50% витоку локалі (на двох відбитих локалях; з десятьма упакованими локалями реальні втрати вищі), 90% витоку сторінки. Адаптер знижує витік сторінки до **0%**, оскільки кожний компонент імпортує тільки свої словники. Витік локалі становить 15% у цьому запуску `static`; `importMode: 'dynamic'`, це параметр, який його видаляє, і ця конфігурація не була частиною цього запуску Vue.
 - **Реактивність та завантаження сторінки.** Перемикання локалі дешево для обох (1,5-2,8 мс); система реактивності Vue робить це можливим, коли повідомлення вже в пам'яті. Завантаження сторінки займає 13,6 мс до **9,3 мс**, що відповідає 88 КБ менше JavaScript для аналізу.
-- **Про природні рядки.** `vue-intlayer` у цьому запуску упаковував кожну локаль у режимі `static` і приземлився на 57.1 KB з рантайм 3.9 KB; синхронізовані словники адаптера містили менше іноземних рядків локалі, тому нижча цифра на сторінку. Нативний рантайм залишається найлегшим із трьох, а його модель `.content.ts` — це еквівалент блоків SFC `<i18n>`.
+- **Про природні рядки.** `vue-intlayer` у цьому запуску упаковував кожну локаль у режимі `static` і приземлився на 57.1 KB з рантайм 3.9 KB; синхронізовані словники адаптера містили менше іноземних рядків локалі, тому нижча цифра на сторінку. Нативний рантайм залишається найлегшим із трьох, а його модель `.content.ts`, це еквівалент блоків SFC `<i18n>`.
+
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Повна таблиця, кожна бібліотека та кожна стратегія, у [звіті про бенчмарк Vue](https://intlayer.org/uk/doc/benchmark/vue).
 
 ## Чому змінюються числа
 
+![The Intlayer compiler extracts content from components](https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.webp?raw=true)
+
 Нічого в `src/components/` не змінилося, тому прибутки походять від того, до чого прив'язаний `useI18n`.
 
-**З `vue-i18n`**, прив'язка — це глобальний екземпляр. `createI18n({ messages: { en, fr, ... } })` — це один імпорт, який містить все; кожен компонент, який викликає `useI18n()`, може отримати доступ до всього цього, тому бандлер не може розділити нижче екземпляра. Оптимізація означає, що _ви_ розділяєте `en.json` за маршрутом, викликаєте `setLocaleMessage()` в охоронцеві маршрутизатора й утримуєте карту маршруту до файлу в актуальному стані, коли компоненти переміщуються.
+**З `vue-i18n`**, прив'язка, це глобальний екземпляр. `createI18n({ messages: { en, fr, ... } })`, це один імпорт, який містить все; кожен компонент, який викликає `useI18n()`, може отримати доступ до всього цього, тому бандлер не може розділити нижче екземпляра. Оптимізація означає, що _ви_ розділяєте `en.json` за маршрутом, викликаєте `setLocaleMessage()` в охоронцеві маршрутизатора й утримуєте карту маршруту до файлу в актуальному стані, коли компоненти переміщуються. Витрати зростають за двома осями одночасно, сторінки та локалі:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
 
 ```bash
 .
@@ -142,7 +161,7 @@ The [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) suite б
         └── Footer.vue             # useI18n(); t("footer.github")
 ```
 
-**З `@intlayer/vue-i18n`**, binding — це словник. `syncJSON` перетворює кожен top-level ключ `en.json` у словник; оптимізаційний проход передає компоненту ті, чиї ключи він назначує, імпортуючи bundler відстежує та розділяє за сторінкою.
+**З `@intlayer/vue-i18n`**, binding, це словник. `syncJSON` перетворює кожен top-level ключ `en.json` у словник; оптимізаційний проход передає компоненту ті, чиї ключи він назначує, імпортуючи bundler відстежує та розділяє за сторінкою.
 
 ```bash
 .
@@ -251,20 +270,119 @@ export const i18n = createI18n({ locale: "en" });
 
 ### Що ви отримуєте крім економії байтів
 
-- **Типізовані ключі.** `t("footer.github")` має тип для скомпільованого словника `footer`; неправильний шлях — це помилка TypeScript замість ключа, відображеного як текст.
+- **Типізовані ключі.** `t("footer.github")` має тип для скомпільованого словника `footer`; неправильний шлях, це помилка TypeScript замість ключа, відображеного як текст.
 - **`npx intlayer test`** завершується помилкою CI для відсутнього ключа в будь-якій локалі. **`npx intlayer fill`** перекладає відсутні за допомогою вашого ключа постачальника (OpenAI, Anthropic, Mistral, Gemini...) і записує їх назад в `locales/{locale}.json`.
 - **Visual Editor і CMS** працюють з одним і тим самим JSON, тому розробники редагують через UI, а файли оновлюються.
 - **Поступовий перехід до `.content.ts`.** Будь-який компонент може перейти з `useI18n()` на `useIntlayer("footer")` з прив'язаним файлом контенту. JSON та `.content.ts` словники співіснують та об'єднуються.
 
 ## Обмеження, про які потрібно знати перед початком
 
-- **SFC `<i18n>` блоки не читаються.** Якщо ваші повідомлення знаходяться всередині компонентів, вони повинні перейти до файлів локалізації (або до `.content.ts`, що є тією ж ідеєю з типами).
-- **Завантаження повідомлень під час виконання відсутнє.** `setLocaleMessage()` та `mergeLocaleMessage()` видають попередження та повертаються. Переклади, отримані з CMS під час виконання, потребують CMS Intlayer або команд `intlayer pull` / `push`.
-- **`messages` є резервним варіантом, а не безплатним.** Збереження імпортів JSON у `createI18n()` зберігає 75 KB у bundle. Видаліть їх, коли `intlayer test` пройде.
-- **Адаптер - це не нативний runtime.** 7.9 KB проти 3.9 KB для `vue-intlayer`. Як тільки кожен компонент перейде на `useIntlayer`, можна його видалити.
+<AccordionGroup>
+<Accordion header="Блоки SFC <i18n> не читаються">
+
+Якщо ваші повідомлення розташовані всередині компонентів, їх потрібно перенести до файлів локалей або до `.content.ts`, що є тією ж ідеєю зі створеними типами.
+
+</Accordion>
+<Accordion header="Завантаження повідомлень під час виконання видалено">
+
+`setLocaleMessage()` та `mergeLocaleMessage()` видають попередження та завершують роботу. Переклади, отримані з CMS під час виконання, вимагають [Intlayer CMS](https://intlayer.org/uk/doc/concept/cms) або команд `intlayer pull` / `push`.
+
+</Accordion>
+<Accordion header="messages є запасним варіантом, але не безкоштовним">
+
+Збереження імпорту JSON у `createI18n()` залишає 75 КБ у бандлі. Видаліть їх, коли `intlayer test` завершиться успішно.
+
+</Accordion>
+<Accordion header="Адаптер не є нативним середовищем виконання">
+
+7.9 КБ проти 3.9 КБ у `vue-intlayer`. Як тільки кожен компонент перейде на `useIntlayer`, видаліть його.
+
+</Accordion>
+</AccordionGroup>
 
 ## Коли використовувати що?
 
-- **Залишайтеся на `vue-i18n`**, якщо ваш додаток залежить від SFC `<i18n>` блоків, від flows `setLocaleMessage()` під час виконання, або якщо 90 KB на сторінку - це не проблема для вашої аудиторії.
-- **Використовуйте `@intlayer/vue-i18n`**, якщо ви на `vue-i18n` і хочете зекономити 88 KB, мати компоненти в 23 рази менші, 0% витоків сторінки, типізовані ключі та CI перевірки без редагування `.vue` файлу. Це точка входу для існуючого `vue-i18n` codebase.
-- **Переходьте на native (`vue-intlayer`)** для нових проектів, або як тільки адаптер виконав свою роботу. Він має найлегший runtime (3.9 KB) та per-component `.content.ts` модель, яка замінює `<i18n>` блоки типізованим контентом.
+<AccordionGroup>
+<Accordion header="Залишитися на vue-i18n">
+
+Ваш додаток залежить від блоків SFC `<i18n>`, від робочих процесів `setLocaleMessage()` під час виконання, або 90 КБ на сторінку не є критичними для вашої аудиторії.
+
+</Accordion>
+<Accordion header="Використовувати @intlayer/vue-i18n">
+
+Ви використовуєте `vue-i18n` і хочете отримати 88 КБ економії, у 23 рази менші компоненти, 0% витоку сторінок, типізовані ключі та перевірки CI без редагування файлів `.vue`. Це відправна точка для існуючої кодової бази `vue-i18n`.
+
+</Accordion>
+<Accordion header="Перейти на нативний (vue-intlayer)">
+
+Для нових проєктів або коли адаптер виконав своє завдання. Він має найлегший рантайм (3.9 КБ) та модель `.content.ts` для кожного компонента, яка замінює блоки `<i18n>` типізованим вмістом. Почніть з [Intlayer з Vue](https://intlayer.org/uk/doc/environment/vite-and-vue) або [з Nuxt](https://intlayer.org/uk/doc/environment/nuxt-and-vue).
+
+</Accordion>
+</AccordionGroup>
+
+## Часті запитання
+
+<FAQ>
+
+<Question title="Чи потрібно мені редагувати мої файли .vue?">
+
+Ні. Збірка бенчмарка змінила лише `vite.config.ts`, `intlayer.config.ts` та один рядок у `src/i18n.ts`, імпорт `messages`. Кожен виклик `useI18n()`, `$t`, `v-t` та Options API залишився без змін.
+
+</Question>
+
+<Question title="Чому розмір компонента у 23 рази менший?">
+
+Тому що `useI18n()` більше не звертається до глобального екземпляра. `createI18n({ messages })` містить усі повідомлення кожної локалі, тому компонент, зібраний ізольовано, підтягує 196 КБ. З адаптером він звертається лише до власного словника: 8.4 КБ.
+
+</Question>
+
+<Question title="Що щодо форматування за допомогою d() та n()?">
+
+Збережено. Конфігурації `datetimeFormats` та `numberFormats`, передані в `createI18n()`, враховуються та підтримуються нативним `Intl`. Див. [форматування дати, часу та чисел](https://intlayer.org/uk/blog/date-time-number-formatting-locales).
+
+</Question>
+
+<Question title="Чи працює це з Nuxt?">
+
+`@intlayer/vue-i18n` орієнтований на Vite + Vue. Для `@nuxtjs/i18n` використовуйте [адаптер сумісності Nuxt i18n](https://intlayer.org/uk/doc/compatibility/nuxtjs-i18n) та дивіться [Intlayer з Nuxt](https://intlayer.org/uk/doc/environment/nuxt-and-vue) для нативного налаштування.
+
+</Question>
+
+<Question title="Чи можу я мігрувати компонент за компонентом?">
+
+Так. Будь-який компонент може перейти з `useI18n()` на `useIntlayer("footer")` з розташованим поруч файлом вмісту. Словники JSON та `.content.ts` співіснують і об'єднуються.
+
+</Question>
+
+</FAQ>
+
+## Пов'язані порівняння
+
+Та ж серія адаптерів:
+
+- [next-intl vs @intlayer/next-intl](https://intlayer.org/uk/blog/next-intl-vs-intlayer-next-intl)
+- [i18next vs @intlayer/i18next](https://intlayer.org/uk/blog/i18next-vs-intlayer-i18next)
+- [Lingui vs @intlayer/lingui](https://intlayer.org/uk/blog/lingui-vs-intlayer-lingui)
+
+Пряме порівняння бібліотек:
+
+- [vue-i18n vs Intlayer](https://intlayer.org/uk/blog/vue-i18n-vs-intlayer), features and DX
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/uk/blog/vue-i18n-vs-intlayer-benchmark)
+- [Is vue-i18n outdated?](https://intlayer.org/uk/blog/is-vue-i18n-outdated)
+- [How to pick a Vue i18n library](https://intlayer.org/uk/blog/how-to-pick-vue-i18n-library)
+
+Довідкова документація:
+
+- [Compat adapter: vue-i18n](https://intlayer.org/uk/doc/compatibility/vue-i18n) and [Nuxt i18n](https://intlayer.org/uk/doc/compatibility/nuxtjs-i18n)
+- [Посібник з міграції: vue-i18n на Intlayer](https://intlayer.org/uk/doc/migration/vue-i18n)
+- [Звіт про бенчмарк Vue](https://intlayer.org/uk/doc/benchmark/vue)
+- [Оптимізація бандла](https://intlayer.org/uk/doc/concept/bundle-optimization) та [компілятор Intlayer](https://intlayer.org/uk/doc/compiler)
+- [Візуальний редактор](https://intlayer.org/uk/doc/concept/editor), [CMS](https://intlayer.org/uk/doc/concept/cms) та [переклад за допомогою ШІ](https://intlayer.org/uk/doc/concept/auto-fill)
+
+## Висновок
+
+`@intlayer/vue-i18n` змінює те, до чого прив'язаний `useI18n()`: від глобального екземпляра, що містить усі повідомлення кожної локалі, до словника, скомпільованого для цього компонента. На тому ж додатку Vite + Vue 3 це дає **на 88 KB менше на сторінку**, у **3 рази менший runtime**, у **23 рази менші компоненти** та **0% витоку сторінок** за рахунок конфігураційного файлу, одного рядка плагіна та одного видаленого імпорту. SFC блоки `<i18n>` та завантаження повідомлень під час виконання, це дві речі, які він не переносить, а нативний runtime `vue-intlayer` залишається вдвічі меншим за нього.
+
+Всі вихідні дані, тестові додатки та скрипти знаходяться в [репозиторії Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom). Запустіть його самі.
+
+Зверніться до [документації 'Чому Intlayer?'](https://intlayer.org/uk/doc/why) для отримання детальнішої інформації.

package/blog/uk/vue-i18n_vs_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-11
-updatedAt: 2025-08-23
+updatedAt: 2026-09-22
 title: vue-i18n проти Intlayer
 description: Порівняння vue-i18n та Intlayer для інтернаціоналізації (i18n) у додатках Vue/Nuxt
 keywords:
@@ -20,6 +20,8 @@ author: aymericzip
 
 # vue-i18n VS Intlayer | Інтернаціоналізація Vue (i18n)
 
+![Vue i18n library ecosystem](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
 Цей посібник порівнює два популярні варіанти i18n для **Vue 3** (і **Nuxt**): **vue-i18n** та **Intlayer**.
 Ми фокусуємося на сучасному інструментарії Vue (Vite, Composition API) і оцінюємо:
 
@@ -40,6 +42,30 @@ author: aymericzip
 - **vue-i18n** - де-факто бібліотека i18n для Vue. Гнучке форматування повідомлень (ICU-стиль), SFC `<i18n>` блоки для локальних повідомлень і велика екосистема. Безпека та підтримка у великих проєктах переважно залежать від вас.
 - **Intlayer** - Модель контенту, орієнтована на компоненти, для Vue/Vite/Nuxt з **строгими TS типами**, **перевірками під час збірки**, **tree-shaking**, **помічниками для маршрутизатора та SEO**, опціональним **Visual Editor/CMS** і **AI‑підтримкою перекладів**.
 
+## Скільки це коштує під час збірки
+
+Перед таблицями функцій, виміряна частина. [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) збирає один і той самий додаток Vite + Vue 3 (10 сторінок, 10 локалей) з кожною бібліотекою та фіксує завантаження браузером:
+
+<I18nBenchmark framework="vite-vue" vertical/>
+
+| Setup                | Lib size (gz) | Page JS avg (gz) | Page leak | Component avg (gz) |
+| -------------------- | ------------: | ---------------: | --------: | -----------------: |
+| **base** (no i18n)   |        0.0 KB |          41.3 KB |         - |             1.1 KB |
+| `vue-i18n`           |       24.3 KB |         134.9 KB |     90.0% |           196.0 KB |
+| `@intlayer/vue-i18n` |        7.9 KB |          47.0 KB |      0.0% |             8.4 KB |
+| **`vue-intlayer`**   |    **3.9 KB** |      **57.1 KB** |  **0.0%** |         **7.7 KB** |
+
+Один лише рантайм `vue-i18n` важить **у 6 разів** більше Intlayer, кожна сторінка містить **90% рядків чужих сторінок**, а ізольовано скомпільований компонент тягне **196 КБ**, оскільки `useI18n()` зв'язує його з усім деревом повідомлень. Повний звіт з показниками реактивності та завантаження сторінок дивіться у [бенчмарку vue-i18n vs Intlayer](https://intlayer.org/uk/blog/vue-i18n-vs-intlayer-benchmark).
+
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Повна таблиця у [звіті про бенчмарк Vue](https://intlayer.org/uk/doc/benchmark/vue).
+
 ## Порівняння можливостей бок-о-бок (орієнтовано на Vue)
 
 | Функція                                       | **Intlayer**                                                                               | **vue-i18n**                                                                                             |
@@ -65,59 +91,74 @@ author: aymericzip
 
 ## Поглиблене порівняння
 
-### 1) Архітектура та масштабованість
+<AccordionGroup>
+<Accordion header="1) Архітектура та масштабованість">
 
-- **vue-i18n**: Загальні налаштування використовують **централізовані каталоги** для кожної локалі (за потреби розбиті на файли/неймспейси). SFC `<i18n>` блоки дозволяють локальні повідомлення, але з розвитком проекту команди часто повертаються до спільних каталогів.
+- **vue-i18n**: Загальні налаштування використовують **централізовані каталоги** для кожної локалі (за потреби розбиті на файли/неймспейси). SFC `<i18n>` блоки дозволяють локальні повідомлення, але з розвитком проекту команди часто повертаються до спільних каталогів. Див. [i18n для кожного компонента проти централізованого](https://intlayer.org/uk/blog/per-component-vs-centralized-i18n).
 - **Intlayer**: Заохочує **словники для кожного компонента**, що зберігаються поруч із компонентом, який вони обслуговують. Це зменшує конфлікти між командами, робить контент більш помітним і природно обмежує дрейф/невикористані ключі.
 
 **Чому це важливо:** У великих Vue-додатках або дизайн-системах **модульний контент** масштабується краще за монолітні каталоги.
 
-### 2) TypeScript та безпека
+</Accordion>
+<Accordion header="2) TypeScript та безпека">
 
 - **vue-i18n**: Хороша підтримка TS; **строге типізування ключів** зазвичай потребує кастомних схем/генериків та ретельних конвенцій.
 - **Intlayer**: **Генерує строгі типи** з вашого контенту, забезпечуючи **автодоповнення в IDE** та **помилки під час компіляції** для опечаток/відсутніх ключів.
 
 **Чому це важливо:** Сильна типізація виявляє проблеми ще до виконання (runtime).
 
-### 3) Обробка відсутніх перекладів
+</Accordion>
+<Accordion header="3) Обробка відсутніх перекладів">
 
-- **vue-i18n**: **Runtime** попередження/резервні варіанти (наприклад, резервна локаль або ключ).
-- **Intlayer**: **Build-time** виявлення з попередженнями/помилками по всіх локалях і ключах.
+- **vue-i18n**: **Runtime** попередження/резервні варіанти (наприклад, резервна локаль або ключ). Див. [виявлення відсутніх перекладів](https://intlayer.org/uk/blog/detecting-missing-translations).
+- **Intlayer**: **Build-time** виявлення з попередженнями/помилками по всіх локалях і ключах., плюс `npx intlayer test` в CI.
 
 **Чому це важливо:** Контроль під час збірки забезпечує чистий і узгоджений UI у production.
 
-### 4) Маршрутизація та стратегія URL (Vue Router/Nuxt)
+</Accordion>
+<Accordion header="4) Стратегія маршрутизації та URL (Vue Router/Nuxt)">
 
-- **Обидва** можуть працювати з локалізованими маршрутами.
+- **Обидва** можуть працювати з локалізованими маршрутами. Див. [посібник з hreflang](https://intlayer.org/uk/blog/hreflang-guide-multilingual-seo).
 - **Intlayer** надає допоміжні засоби для **генерації локалізованих шляхів**, **керування префіксами локалей** та виведення **`<link rel="alternate" hreflang>`** для SEO. У Nuxt він доповнює маршрутизацію фреймворку.
 
 **Чому це важливо:** Менше додаткової glue-логіки та **чистіше SEO** між локалями.
 
-### 5) Продуктивність та поведінка завантаження
+</Accordion>
+<Accordion header="5) Продуктивність та поведінка завантаження">
 
-- **vue-i18n**: Підтримує асинхронні повідомлення локалей; уникнення надмірного бандлінгу, на вашому боці (ретельно розділяйте каталоги).
+- **vue-i18n**: Підтримує асинхронні повідомлення локалей; уникнення надмірного бандлінгу, на вашому боці (ретельно розділяйте каталоги). Бенчмарк вище підтверджує це цифрами: 134.9 КБ проти 57.1 КБ на сторінку.
 - **Intlayer**: **Tree-shakes** під час збірки та **ліниво завантажує по кожному словнику/локалі**. Невикористовуваний контент не потрапляє в бандл.
 
 **Чому це важливо:** Менші бандли та швидший старт для багатомовних Vue-додатків.
 
-### 6) Досвід розробника та інструменти
+</Accordion>
+<Accordion header="6) Досвід розробника та інструменти">
 
 - **vue-i18n**: Містить зрілу документацію та спільноту; зазвичай ви покладатиметесь на **зовнішні платформи локалізації** для редакційних робочих процесів.
-- **Intlayer**: Постачає **безкоштовний Visual Editor**, опційний **CMS** (дружній до Git або зовнішній), розширення для **VSCode**, утиліти **CLI/CI** та **AI-допоміжні переклади**, що використовують ваші ключі провайдера.
+- **Intlayer**: Постачає **безкоштовний Visual Editor**, опційний **CMS** (дружній до Git або зовнішній), розширення для **VSCode**, утиліти **CLI/CI** та **AI-допоміжні переклади**, що використовують ваші ключі провайдера., **сервер MCP**
 
 **Чому це важливо:** Нижчі операційні витрати та коротший цикл між розробкою та контентом.
 
-### 7) SEO, SSR & SSG
+</Accordion>
+<Accordion header="7) SEO, SSR та SSG">
 
-- **Обидва** працюють з Vue SSR та Nuxt.
+- **Обидва** працюють з Vue SSR та Nuxt. Див. [інтернаціоналізація та SEO](https://intlayer.org/uk/blog/SEO-and-i18n).
 - **Intlayer**: Додає **SEO-помічники** (sitemaps/metadata/`hreflang`), які незалежні від фреймворку та добре працюють із збірками Vue/Nuxt.
 
 **Чому це важливо:** Міжнародне SEO без необхідності писати індивідуальний зв'язувальний код.
 
+</Accordion>
+</AccordionGroup>
+
 ## Чому Intlayer? (Проблема та підхід)
 
+![Centralized catalogs versus per-component dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/assets/project_stucture_18n_vs_intlayer.png?raw=true)
+
 Більшість i18n стеків (включно з **vue-i18n**) починаються з **централізованих каталогів**:
 
+<Tabs defaultTab="per-locale" group="catalog">
+<Tab label="Один файл на локаль" value="per-locale">
+
 ```bash
 .
 ├── locales
@@ -129,7 +170,8 @@ author: aymericzip
         └── MyComponent.vue
 ```
 
-Або з папками для кожної локалі:
+</Tab>
+<Tab label="Одна папка на локаль" value="per-folder">
 
 ```bash
 .
@@ -148,6 +190,34 @@ author: aymericzip
         └── MyComponent.vue
 ```
 
+</Tab>
+</Tabs>
+
+Ця папка постійно зростає, по простору імен для кожної функції в кожній локалі:
+
+```txt
+locales
+├── EN
+│   ├── blog.json
+│   ├── about.json
+│   ├── auth.json
+│   ├── blog.json
+│   ├── cart.json
+│   ├── categories.json
+│   ├── contact.json
+│   ├── dashboard.json
+│   ├── errors.json
+│   ├── faq.json
+│   ├── footer.json
+│   ├── form.json
+│   ├── home.json
+│   ├── language.json
+│   ├── navbar.json
+│   ├── ... 65 files
+│   └── validation.json
+└── ES
+```
+
 Це часто уповільнює розробку в міру зростання додатків:
 
 1. **Для нового компонента** ви створюєте/редагуєте віддалені каталоги, підключаєте неймспейси та перекладаєте (часто вручну копіюючи/вставляючи з AI-інструментів).
@@ -163,7 +233,33 @@ author: aymericzip
         └── MyComponent.vue
 ```
 
-**Оголошення контенту** (для кожного компонента):
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="vue-i18n" value="vue-i18n">
+
+```json fileName="./locales/en.json"
+{
+  "componentExample": {
+    "greeting": "Hello World"
+  }
+}
+```
+
+```vue fileName="./components/MyComponent.vue"
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <span>{{ t("componentExample.greeting") }}</span>
+</template>
+```
+
+Кожен файл локалі доводиться редагувати вручну, а ключ є звичайним рядком: одруківка відобразиться в продакшені як `componentExample.greting`.
+
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="./components/MyComponent/myComponent.content.ts"
 import { t, type Dictionary } from "intlayer";
@@ -172,10 +268,9 @@ const componentExampleContent = {
   key: "component-example",
   content: {
     greeting: t({
-      uk: "Привіт, світ",
       en: "Hello World",
-      es: "Hola Mundo",
       fr: "Bonjour le monde",
+      es: "Hola Mundo",
     }),
   },
 } satisfies Dictionary;
@@ -183,11 +278,10 @@ const componentExampleContent = {
 export default componentExampleContent;
 ```
 
-**Використання у Vue** (Composition API):
-
 ```vue fileName="./components/MyComponent/MyComponent.vue"
 <script setup lang="ts">
-import { useIntlayer } from "vue-intlayer"; // Інтеграція з Vue
+import { useIntlayer } from "vue-intlayer"; // Vue integration
+
 const { greeting } = useIntlayer("component-example");
 </script>
 
@@ -196,6 +290,11 @@ const { greeting } = useIntlayer("component-example");
 </template>
 ```
 
+Всі локалі знаходяться в одному типізованому файлі поруч із компонентом.
+
+</Tab>
+</Tabs>
+
 Цей підхід:
 
 - **Швидша розробка** (задекларувати один раз; IDE/AI автодоповнення).
@@ -223,20 +322,71 @@ const { greeting } = useIntlayer("component-example");
 
 ## Коли вибирати який варіант?
 
-- **Оберіть vue-i18n**, якщо ви хочете **стандартний підхід у Vue**, вам зручно самостійно керувати каталогами/просторами імен, і ваш додаток **малого або середнього розміру** (або ви вже покладаєтесь на Nuxt i18n).
-- **Оберіть Intlayer**, якщо ви цінуєте **контент, прив'язаний до компонентів**, **строгий TypeScript**, **гарантії на етапі збірки**, **tree-shaking** та **batteries-included** інструменти для роутингу/SEO/редагування, особливо для **великих модульних кодових баз Vue/Nuxt**, дизайн-систем тощо.
+<AccordionGroup>
+<Accordion header="Обрати vue-i18n">
+
+Вам потрібен **стандартний підхід Vue**, вам зручно керувати каталогами та просторами імен самостійно, а ваш додаток **невеликого або середнього розміру** (або ви вже використовуєте Nuxt i18n). Блоки SFC `<i18n>` та рантайм `setLocaleMessage()`, це функції, які Intlayer свідомо не відтворює.
+
+</Accordion>
+<Accordion header="Обрати Intlayer">
+
+Ви цінуєте **контент, прив'язаний до компонентів**, **суворий TypeScript**, **гарантії на етапі збірки**, **tree-shaking** та вбудовані інструменти для маршрутизації, SEO та редагування, особливо для **великих модульних кодових баз Vue/Nuxt** та дизайн-систем. Почніть з [Intlayer з Vue](https://intlayer.org/uk/doc/environment/vite-and-vue) або [з Nuxt](https://intlayer.org/uk/doc/environment/nuxt-and-vue).
+
+</Accordion>
+<Accordion header="Обрати @intlayer/vue-i18n">
+
+Ви використовуєте `vue-i18n` сьогодні та хочете зменшити розмір бандла без редагування файлів `.vue`. [Адаптер сумісності](https://intlayer.org/uk/doc/compatibility/vue-i18n) зберігає `createI18n`, `useI18n`, `t()`, `d()`, `n()`, `$t` та `v-t`, обслуговуючи їх зі скомпільованих словників. Пряме порівняння дивіться у [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/uk/blog/vue-i18n-vs-intlayer-vue-i18n).
+
+</Accordion>
+</AccordionGroup>
 
 ## Сумісність з vue-i18n
 
 `intlayer` також може допомогти керувати вашими неймспейсами `vue-i18n`.
 
-Використовуючи `intlayer`, ви можете задавати контент у форматі вашої улюбленої i18n-бібліотеки, і intlayer згенерує ваші неймспейси в обраному місці (наприклад: `/messages/{{locale}}/{{namespace}}.json`).
+Використовуючи `intlayer`, ви можете задавати контент у форматі вашої улюбленої i18n-бібліотеки, і intlayer згенерує ваші неймспейси в обраному місці (наприклад: `/messages/{{locale}}/{{namespace}}.json`). Див. [документацію щодо сумісності з vue-i18n](https://intlayer.org/uk/doc/compatibility/vue-i18n) та [адаптер Nuxt i18n](https://intlayer.org/uk/doc/compatibility/nuxtjs-i18n).
+
+## Часті запитання
+
+<FAQ>
+
+<Question title="Intlayer, це заміна vue-i18n чи надбудова над ним?">
+
+І те, й інше, залежно від обраного підходу. `vue-intlayer`, це нативний рантайм з власним компонованим методом `useIntlayer()`. `@intlayer/vue-i18n`, це адаптер сумісності, який зберігає API `vue-i18n` та замінює його джерело даних, що дозволяє мігрувати без зміни компонентів і потім поступово оновлювати файл за файлом.
+
+</Question>
+
+<Question title="Що станеться з моїми блоками SFC <i18n>?">
+
+Адаптер їх не зчитує. Перенесіть ці повідомлення до JSON-файлів локалей або до файлу `.content.ts` поруч із компонентом, що є аналогічною ідеєю зі створеними типами. Це єдина функція `vue-i18n`, яка не переноситься.
+
+</Question>
+
+<Question title="Чи працює Intlayer з Nuxt?">
+
+Так. [Intlayer з Nuxt](https://intlayer.org/uk/doc/environment/nuxt-and-vue) охоплює багатомовну маршрутизацію, middleware для визначення локалі та генерацію карти сайту. Якщо ви використовуєте `@nuxtjs/i18n`, [адаптер сумісності Nuxt i18n](https://intlayer.org/uk/doc/compatibility/nuxtjs-i18n) є шляхом міграції.
+
+</Question>
+
+<Question title="Чи можу я зберегти свої locales/{locale}.json як джерело правди?">
+
+Так. [Плагін синхронізації JSON](https://intlayer.org/uk/doc/compatibility/vue-i18n) зчитує їх з діалектом `vue-i18n` (`{name}`, `{0}`, форми множини через вертикальну риску `"car | cars"`) і записує переклади назад при оновленні через CLI або CMS.
+
+</Question>
+
+<Question title="Чи працює ICU з Intlayer у Vue?">
+
+Нативна підтримка ICU знаходиться в розробці. Адаптер `@intlayer/vue-i18n` підтримує власний синтаксис повідомлень `vue-i18n`, включаючи форми множини та іменовану/спискову інтерполяцію. Про модель плюралізації Intlayer див. [контент перерахування](https://intlayer.org/uk/doc/concept/content/enumeration).
+
+</Question>
+
+</FAQ>
 
 ## Зірки GitHub
 
 GitHub-зірки, це вагомий індикатор популярності проєкту, довіри спільноти та його довгострокової релевантності. Хоча вони не є прямим показником технічної якості, вони відображають, скільки розробників вважають проєкт корисним, слідкують за його розвитком і, ймовірно, впровадять його. При оцінці вартості проєкту зірки допомагають порівняти динаміку прийняття між альтернативами та дають уявлення про зростання екосистеми.
 
-[![Графік історії зірок](https://api.star-history.com/svg?repos=intlify/vue-i18n&repos=aymericzip/intlayer&type=Date)](https://star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
+[![Графік історії зірок](https://api.star-history.com/chart?repos=intlify%2Fvue-i18n%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
 
 ## Висновок
 
@@ -245,4 +395,15 @@ GitHub-зірки, це вагомий індикатор популярност
 - За допомогою **Intlayer** **модульний контент**, **strict TS**, **build-time safety**, **tree-shaken bundles** та **router/SEO/editor tooling** доступні **з коробки**.
 - Якщо ваша команда надає пріоритет **підтримуваності та швидкості** у багатомовному, компонентно-орієнтованому Vue/Nuxt додатку, Intlayer сьогодні пропонує **найповніший** досвід.
 
-Див. документ ['Why Intlayer?' doc](https://intlayer.org/doc/why) для детальнішої інформації.
+## Додаткові матеріали
+
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/uk/blog/vue-i18n-vs-intlayer-benchmark), the measured run behind the table above
+- [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/uk/blog/vue-i18n-vs-intlayer-vue-i18n), the adapter on the same app
+- [Is vue-i18n outdated?](https://intlayer.org/uk/blog/is-vue-i18n-outdated)
+- [How to pick a Vue i18n library](https://intlayer.org/uk/blog/how-to-pick-vue-i18n-library)
+- [Using Intlayer with vue-i18n](https://intlayer.org/uk/blog/intlayer-with-vue-i18n)
+- [Vue benchmark report](https://intlayer.org/uk/doc/benchmark/vue)
+- [Migration guide: vue-i18n to Intlayer](https://intlayer.org/uk/doc/migration/vue-i18n)
+- [Bundle optimization](https://intlayer.org/uk/doc/concept/bundle-optimization) and [the Intlayer compiler](https://intlayer.org/uk/doc/compiler)
+
+Refer to ['Why Intlayer?' doc](https://intlayer.org/uk/doc/why) for more details.