@intlayer/docs 8.11.2 → 8.11.3

package/docs/ru/intlayer_with_vite+vanilla.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-23
-updatedAt: 2026-05-06
-title: i18n Vite + Vanilla JS - Как перевести приложение на Vanilla JS в 2026 году
-description: Узнайте, как сделать ваш сайт на Vite и Vanilla JS многоязычным. Следуйте документации для интернационализации (i18n) и перевода.
+updatedAt: 2026-05-31
+title: i18n Vite + Vanilla JS - Полное руководство по переводу Vanilla JS
+description: Лучшее решение для размера бандла, SEO, производительности & поддерживаемости. Сделайте Vite and Vanilla JS приложение многоязычным в 2026, перевод LLM, Agent Skills & MCP.
 keywords:
   - Интернационализация
   - Документация
@@ -58,22 +58,55 @@ history:
 
 <TOC/>
 
-## Что такое Intlayer?
+## Почему Intlayer лучше альтернатив?
 
-**Intlayer** - это инновационная библиотека интернационализации (i18n) с открытым исходным кодом, упрощающая поддержку многоязычности в современных веб-приложениях.
+По сравнению с основными решениями, такими как i18next или i18n.js, Intlayer — это решение, которое включает в себя встроенные оптимизации, такие как:
 
-С Intlayer вы можете:
+<AccordionGroup>
+<Accordion header="Полное покрытие Vite">
 
-- **Легко управлять переводами**, используя декларативные словари на уровне компонентов.
-- **Динамически локализовать метаданные**, маршруты и контент.
-- **Обеспечить поддержку TypeScript** с автогенерируемыми типами, улучшая автодополнение и обнаружение ошибок.
-- **Пользоваться расширенными функциями**, такими как динамическое определение и переключение языка.
+Intlayer оптимизирован для идеальной работы с Vite, предлагая **независимое от платформы управление контентом**, **поддержку TypeScript** и все функции, необходимые для масштабирования интернационализации (i18n).
+
+</Accordion>
+<Accordion header="Размер бандла">
+
+Вместо загрузки огромных файлов JSON на свои страницы загружайте только необходимый контент. Intlayer помогает **уменьшить размер бандла и страниц до 50 %**.
+
+</Accordion>
+<Accordion header="Удобство обслуживания">
+
+Определение области содержимого вашего приложения **облегчает обслуживание** крупномасштабных приложений. Вы можете дублировать или удалить отдельную папку функций, не утруждав себя мысленным бременем проверки всей кодовой базы контента. Кроме того, Intlayer **полностью типизирован**, что обеспечивает точность вашего контента.
+
+</Accordion>
+<Accordion header="Агент ИИ">
+
+Совместное размещение контента **уменьшает контекст, необходимый** для моделей большого языка (LLM). Intlayer также поставляется с набором инструментов, таких как **CLI** для проверки отсутствия переводов,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)**, и **[навыки агента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, чтобы сделать работу разработчика (DX) еще более удобной для агентов ИИ.
+
+</Accordion>
+<Accordion header="Автоматизация">
+
+Используйте автоматизацию для перевода в своем конвейере CI/CD, используя LLM по вашему выбору за счет вашего поставщика ИИ. Intlayer также предлагает **компилятор** для автоматизации извлечения контента, а также [веб-платформу](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md), которая помогает **переводить в фоновом режиме**.
+
+</Accordion>
+<Accordion header="Производительность">
+
+Подключение больших файлов JSON к компонентам может привести к проблемам с производительностью и реактивностью. Intlayer оптимизирует загрузку контента во время сборки (build time).
+
+</Accordion>
+<Accordion header="Масштабирование с помощью не-разработчиками">
+
+Intlayer — это больше, чем просто решение i18n. Он предоставляет **автономный [визуальный редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** и **[полный CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**, чтобы помочь вам управлять многоязычным контентом в **реальном времени**, упрощая сотрудничество с переводчиками, копирайтерами и другими членами команды. Контент может храниться локально и/или удаленно.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
 ## Пошаговое руководство по настройке Intlayer в приложении на Vite и Vanilla JS
 
-### Шаг 1: Установка зависимостей
+<Steps>
+
+<Step number={1} title="Установка зависимостей">
 
 Установите необходимые пакеты с помощью npm:
 
@@ -110,7 +143,9 @@ bun x intlayer init
 - **vite-intlayer**
   Включает плагин Vite для интеграции Intlayer с [бандлером Vite](https://vite.dev/guide/why.html#why-bundle-for-production), а также посредник (middleware) для определения предпочтительного языка пользователя, управления куки и обработки перенаправления URL.
 
-### Шаг 2: Конфигурация вашего проекта
+</Step>
+
+<Step number={2} title="Конфигурация вашего проекта">
 
 Создайте файл конфигурации для настройки языков вашего приложения:
 
@@ -134,7 +169,9 @@ export default config;
 
 > Через этот файл конфигурации вы можете настроить локализованные URL, перенаправление посредника, имена куки, местоположение и расширение ваших объявлений контента, отключить логи Intlayer в консоли и многое другое. Полный список доступных параметров см. в [документации по конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/configuration.md).
 
-### Шаг 3: Интеграция Intlayer в конфигурацию Vite
+</Step>
+
+<Step number={3} title="Интеграция Intlayer в конфигурацию Vite">
 
 Добавьте плагин intlayer в вашу конфигурацию.
 
@@ -150,7 +187,9 @@ export default defineConfig({
 
 > Плагин Vite `intlayer()` используется для интеграции Intlayer с Vite. Он обеспечивает сборку файлов объявления контента и отслеживает их изменения в режиме разработки. Он определяет переменные окружения Intlayer внутри приложения Vite. Кроме того, он предоставляет псевдонимы (aliases) для оптимизации производительности.
 
-### Шаг 4: Инициализация Intlayer в точке входа
+</Step>
+
+<Step number={4} title="Инициализация Intlayer в точке входа">
 
 Вызовите `installIntlayer()` **перед** рендерингом любого контента, чтобы глобальный синглтон языка был готов.
 
@@ -175,7 +214,9 @@ installIntlayerMarkdown();
 import "./app.js";
 ```
 
-### Шаг 5: Объявление вашего контента
+</Step>
+
+<Step number={5} title="Объявление вашего контента">
 
 Создавайте объявления контента для хранения переводов и управляйте ими:
 
@@ -253,7 +294,9 @@ export default appContent;
 >
 > Дополнительную информацию см. в [документации по объявлению контента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/content_file.md).
 
-### Шаг 6: Использование Intlayer в вашем JavaScript
+</Step>
+
+<Step number={6} title="Использование Intlayer в вашем JavaScript">
 
 `vanilla-intlayer` повторяет поверхностный API `react-intlayer`: `useIntlayer(key, locale?)` возвращает переведенный контент напрямую. Добавьте `.onChange()` к результату, чтобы подписаться на изменения языка - это явный эквивалент ререндеринга в React.
 
@@ -289,7 +332,9 @@ document.querySelector<HTMLParagraphElement>(".read-the-docs")!.textContent =
 > img.alt = content.viteLogoLabel.value;
 > ```
 
-### (Опционально) Шаг 7: Изменение языка вашего контента
+</Step>
+
+<Step number={7} title="Изменение языка вашего контента" isOptional={true}>
 
 Чтобы изменить язык вашего контента, используйте функцию `setLocale`, предоставляемую `useLocale`.
 
@@ -324,7 +369,9 @@ export function setupLocaleSwitcher(container: HTMLElement): () => void {
 }
 ```
 
-### (Опционально) Шаг 8: Рендеринг контента Markdown и HTML
+</Step>
+
+<Step number={8} title="Рендеринг контента Markdown и HTML" isOptional={true}>
 
 Intlayer поддерживает объявления контента `md()` и `html()`. В чистом JS скомпилированный результат вставляется как необработанный HTML через `innerHTML`.
 
@@ -383,7 +430,9 @@ document.querySelector<HTMLDivElement>(".edit-note")!.innerHTML =
 > });
 > ```
 
-### (Опционально) Шаг 9: Добавление локализованной маршрутизации в ваше приложение
+</Step>
+
+<Step number={9} title="Добавление локализованной маршрутизации в ваше приложение" isOptional={true}>
 
 Чтобы создать уникальные маршруты для каждого языка (полезно для SEO), вы можете использовать `intlayerProxy` в вашей конфигурации Vite для определения языка на стороне сервера.
 
@@ -403,7 +452,9 @@ export default defineConfig({
 });
 ```
 
-### (Опционально) Шаг 10: Изменение URL при смене языка
+</Step>
+
+<Step number={10} title="Изменение URL при смене языка" isOptional={true}>
 
 Чтобы обновлять URL браузера при смене языка, вызовите `useRewriteURL()` после установки Intlayer:
 
@@ -417,7 +468,9 @@ installIntlayer();
 const stopRewriteURL = useRewriteURL();
 ```
 
-### (Опционально) Шаг 11: Переключение атрибутов языка и направления текста HTML
+</Step>
+
+<Step number={11} title="Переключение атрибутов языка и направления текста HTML" isOptional={true}>
 
 Обновляйте атрибуты `lang` и `dir` тега `<html>` в соответствии с текущим языком для обеспечения доступности и SEO.
 
@@ -435,7 +488,9 @@ useLocale({
 });
 ```
 
-### (Опционально) Шаг 12: Ленивая загрузка словарей по языкам
+</Step>
+
+<Step number={12} title="Ленивая загрузка словарей по языкам" isOptional={true}>
 
 Для больших приложений вы можете разделить словари по языкам на отдельные чанки. Используйте `useDictionaryDynamic` вместе с динамическим `import()` от Vite:
 
@@ -458,7 +513,9 @@ const unsubscribe = useDictionaryDynamic(
 
 > Бандл каждого языка запрашивается только тогда, когда этот язык становится активным, и результат кэшируется - последующие переключения на тот же язык происходят мгновенно.
 
-### (Опционально) Шаг 13: Извлечение контента из ваших компонентов
+</Step>
+
+<Step number={13} title="Извлечение контента из ваших компонентов" isOptional={true}>
 
 Если у вас уже есть кодовая база, преобразование тысяч файлов может занять много времени.
 
@@ -673,3 +730,7 @@ console.log("SEO files generated successfully.");
 ### Что дальше?
 
 Для более глубокого погружения вы можете внедрить [визуальный редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_visual_editor.md) или вынести ваш контент во внешнюю [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_CMS.md).
+
+</Step>
+
+</Steps>

package/docs/ru/intlayer_with_vite+vue.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-06
-title: Vite + Vue i18n - Как перевести приложение Vue в 2026
-description: Узнайте, как сделать ваш сайт на Vite и Vue многоязычным. Следуйте документации для интернационализации (i18n) и перевода.
+updatedAt: 2026-05-31
+title: Vite + Vue i18n - Полное руководство по переводу Vue
+description: Лучшее решение для размера бандла, SEO, производительности & поддерживаемости. Сделайте Vite and Vue приложение многоязычным в 2026, перевод LLM, Agent Skills & MCP.
 keywords:
   - Интернационализация
   - Документация
@@ -33,16 +33,47 @@ history:
 
 Смотрите [Шаблон приложения](https://github.com/aymericzip/intlayer-vite-vue-template) на GitHub.
 
-## Что такое Intlayer?
+## Почему Intlayer лучше альтернатив?
 
-**Intlayer** - это инновационная, с открытым исходным кодом библиотека интернационализации (i18n), созданная для упрощения поддержки многоязычности в современных веб-приложениях.
+По сравнению с основными решениями, такими как vue-i18n или i18next, Intlayer — это решение со встроенными оптимизациями, такими как:
 
-С помощью Intlayer вы можете:
+<AccordionGroup>
+<Accordion header="Полное покрытие Vue">
 
-- **Легко управлять переводами** с использованием декларативных словарей на уровне компонентов.
-- **Динамически локализовать метаданные**, маршруты и контент.
-- **Обеспечить поддержку TypeScript** с помощью автогенерируемых типов, улучшая автодополнение и обнаружение ошибок.
-- **Воспользоваться расширенными возможностями**, такими как динамическое определение и переключение локали.
+Intlayer оптимизирован для идеальной работы с Vue, предлагая **охват контента на уровне компонентов**, **реактивные переводы** и все функции, необходимые для масштабирования интернационализации (i18n).
+
+</Accordion>
+<Accordion header="Размер бандла">
+
+Вместо загрузки огромных файлов JSON на свои страницы загружайте только необходимый контент. Intlayer помогает **уменьшить размер бандла и страниц до 50 %**.
+
+</Accordion>
+<Accordion header="Удобство обслуживания">
+
+Определение области содержимого вашего приложения **облегчает обслуживание** крупномасштабных приложений. Вы можете дублировать или удалить отдельную папку функций, не утруждав себя мысленным бременем проверки всей кодовой базы контента. Кроме того, Intlayer **полностью типизирован**, что обеспечивает точность вашего контента.
+
+</Accordion>
+<Accordion header="Агент ИИ">
+
+Совместное размещение контента **уменьшает контекст, необходимый** для моделей большого языка (LLM). Intlayer также поставляется с набором инструментов, таких как **CLI** для проверки отсутствия переводов,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)**, и **[навыки агента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, чтобы сделать работу разработчика (DX) еще более удобной для агентов ИИ.
+
+</Accordion>
+<Accordion header="Автоматизация">
+
+Используйте автоматизацию для перевода в своем конвейере CI/CD, используя LLM по вашему выбору за счет вашего поставщика ИИ. Intlayer также предлагает **компилятор** для автоматизации извлечения контента, а также [веб-платформу](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md), которая помогает **переводить в фоновом режиме**.
+
+</Accordion>
+<Accordion header="Производительность">
+
+Подключение больших файлов JSON к компонентам может привести к проблемам с производительностью и реактивностью. Intlayer оптимизирует загрузку контента во время сборки (build time).
+
+</Accordion>
+<Accordion header="Масштабирование с помощью не-разработчиками">
+
+Intlayer — это больше, чем просто решение i18n. Он предоставляет **автономный [визуальный редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** и **[полный CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**, чтобы помочь вам управлять многоязычным контентом в **реальном времени**, упрощая сотрудничество с переводчиками, копирайтерами и другими членами команды. Контент может храниться локально и/или удаленно.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -80,7 +111,9 @@ history:
 
 Смотрите [Шаблон приложения](https://github.com/aymericzip/intlayer-vite-vue-template) на GitHub.
 
-### Шаг 1: Установка зависимостей
+<Steps>
+
+<Step number={1} title="Установка зависимостей">
 
 Установите необходимые пакеты с помощью npm:
 
@@ -118,7 +151,9 @@ bun x intlayer init
 - **vite-intlayer**
   Включает плагин Vite для интеграции Intlayer с [сборщиком Vite](https://vite.dev/guide/why.html#why-bundle-for-production), а также промежуточное ПО для определения предпочтительной локали пользователя, управления cookie и обработки перенаправления URL.
 
-### Шаг 2: Конфигурация вашего проекта
+</Step>
+
+<Step number={2} title="Конфигурация вашего проекта">
 
 Создайте файл конфигурации для настройки языков вашего приложения:
 
@@ -142,7 +177,9 @@ export default config;
 
 > С помощью этого файла конфигурации вы можете настроить локализованные URL, перенаправление через middleware, имена cookie, расположение и расширение ваших деклараций контента, отключить логи Intlayer в консоли и многое другое. Для полного списка доступных параметров обратитесь к [документации по конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/configuration.md).
 
-### Шаг 3: Интеграция Intlayer в вашу конфигурацию Vite
+</Step>
+
+<Step number={3} title="Интеграция Intlayer в вашу конфигурацию Vite">
 
 Добавьте плагин intlayer в вашу конфигурацию.
 
@@ -159,7 +196,9 @@ export default defineConfig({
 
 > Плагин Vite `intlayer()` используется для интеграции Intlayer с Vite. Он обеспечивает создание файлов деклараций контента и отслеживает их в режиме разработки. Он определяет переменные окружения Intlayer внутри приложения Vite. Кроме того, он предоставляет алиасы для оптимизации производительности.
 
-### Шаг 4: Объявите Ваш Контент
+</Step>
+
+<Step number={4} title="Объявите Ваш Контент">
 
 Создайте и управляйте декларациями контента для хранения переводов:
 
@@ -281,7 +320,9 @@ export default helloWorldContent;
 
 > Для получения дополнительной информации обратитесь к [документации по объявлениям контента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/content_file.md).
 
-### Шаг 5: Использование Intlayer в вашем коде
+</Step>
+
+<Step number={5} title="Использование Intlayer в вашем коде">
 
 Чтобы использовать функции интернационализации Intlayer во всём вашем приложении на Vue, сначала необходимо зарегистрировать синглтон-экземпляр Intlayer в вашем основном файле. Этот шаг важен, так как он предоставляет контекст интернационализации для всех компонентов вашего приложения, делая переводы доступными в любом месте дерева компонентов.
 
@@ -373,7 +414,9 @@ Intlayer предлагает различные API для доступа к в
 
 > Если ваше приложение уже существует, вы можете использовать [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/compiler.md) в сочетании с [командой extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/cli/extract.md), чтобы преобразовать тысячи компонентов за одну секунду.
 
-### (Необязательно) Шаг 6: Изменение языка вашего содержимого
+</Step>
+
+<Step number={6} title="Изменение языка вашего содержимого" isOptional={true}>
 
 Для изменения языка вашего содержимого вы можете использовать функцию `setLocale`, предоставляемую композицией `useLocale`. Эта функция позволяет установить локаль приложения и обновить содержимое соответственно.
 
@@ -440,7 +483,9 @@ const content = useIntlayer("app"); // Создайте связанный фа
 </template>
 ```
 
-### (Необязательно) Шаг 7: Добавьте локализованную маршрутизацию в ваше приложение
+</Step>
+
+<Step number={7} title="Добавьте локализованную маршрутизацию в ваше приложение" isOptional={true}>
 
 Добавление локализованной маршрутизации в приложение Vue обычно включает использование Vue Router с префиксами локали. Это создает уникальные маршруты для каждого языка, что полезно для SEO и удобных для SEO URL.
 
@@ -573,7 +618,9 @@ export default defineConfig({
 });
 ```
 
-### (Необязательно) Шаг 8: Изменение URL при смене локали
+</Step>
+
+<Step number={8} title="Изменение URL при смене локали" isOptional={true}>
 
 Чтобы автоматически обновлять URL при смене языка пользователем, вы можете изменить компонент `LocaleSwitcher`, чтобы использовать Vue Router:
 
@@ -663,7 +710,9 @@ watch(
 </ol>
 ```
 
-### (Необязательно) Шаг 9: Переключение атрибутов языка и направления в HTML
+</Step>
+
+<Step number={9} title="Переключение атрибутов языка и направления в HTML" isOptional={true}>
 
 Когда ваше приложение поддерживает несколько языков, крайне важно обновлять атрибуты `lang` и `dir` тега `<html>`, чтобы они соответствовали текущей локали. Это обеспечивает:
 
@@ -723,7 +772,9 @@ useI18nHTMLAttributes();
 </template>
 ```
 
-### (Необязательно) Шаг 10: Создание локализованного компонента Link
+</Step>
+
+<Step number={10} title="Создание локализованного компонента Link" isOptional={true}>
 
 Чтобы обеспечить навигацию вашего приложения с учётом текущей локали, вы можете создать пользовательский компонент `Link`. Этот компонент автоматически добавляет префикс текущего языка к внутренним URL, например, когда франкоязычный пользователь нажимает на ссылку на страницу "О нас", его перенаправляет на `/fr/about` вместо `/about`.
 
@@ -822,7 +873,9 @@ import RouterLink from "@components/RouterLink.vue";
 </script>
 ```
 
-### (Необязательно) Шаг 11: Рендеринг Markdown
+</Step>
+
+<Step number={11} title="Рендеринг Markdown" isOptional={true}>
 
 Intlayer поддерживает рендеринг Markdown-контента непосредственно в вашем Vue-приложении. По умолчанию Markdown обрабатывается как простой текст. Чтобы преобразовать Markdown в насыщенный HTML, вы можете интегрировать [markdown-it](https://github.com/markdown-it/markdown-it) - парсер Markdown.
 
@@ -918,7 +971,9 @@ Intlayer использует расширение модулей (module augmen
 
 ---
 
-### (Опционально) Шаг 1 : Извлечение содержимого ваших компонентов
+</Step>
+
+<Step number={1} title="Извлечение содержимого ваших компонентов" isOptional={true}>
 
 Если у вас есть существующая кодовая база, преобразование тысяч файлов может занять много времени.
 
@@ -1093,3 +1148,7 @@ console.log("SEO files generated successfully.");
 Для расширения возможностей вы можете реализовать [визуальный редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_visual_editor.md) или вынести ваш контент во внешний [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_CMS.md).
 
 ---
+
+</Step>
+
+</Steps>