Skip to content

Демо

Папка demo/ содержит готовое к запуску приложение Vue 3, демонстрирующее ключевые возможности vue-i18n-kit: ленивую загрузку локалей, множественное число ICU, локале-зависимое форматирование и редактор перевода в контексте.

Что включает демо:

  • Три локали — английская (полная), русская (полная, с формами one/few/many/other), немецкая (намеренно неполная — не хватает 8 ключей для демонстрации редактора)
  • EN загружается синхронно, RU/DE — лениво по требованию; Vite разбивает их на отдельные чанки
  • useT / tm() со слайдерами множественного числа ICU — двигайте слайдер, чтобы наблюдать изменение форм в реальном времени
  • Форматирование useFormat — числа, валюта и даты, отрендеренные через Intl и активную локаль
  • Переключатель локали useLocale с индикатором загрузки, пока идёт получение нового чанка локали
  • Dev-оверлей — наведите курсор на любой переведённый текст, чтобы увидеть значок карандаша; клик по нему открывает встроенный редактор ключа. Работает только с npm run demo:full (значки карандаша не внедряются в обычном npm run demo)
  • Кнопка Editor UI — при запуске demo:full в правом верхнем углу NavBar появляется фиолетовая кнопка «Editor UI ↗»; клик по ней открывает полный редактор словаря по адресу http://localhost:4173

Запуск из корня репозитория:

bash
# Собрать пакет, установить зависимости демо, запустить dev-сервер Vite
npm run demo           # приложение → http://localhost:5173

# То же самое + запускает полный UI редактора словаря
npm run demo:full      # приложение → http://localhost:5173  |  редактор → http://localhost:4173

npm run demo:full использует vue-i18n-kit dev внутри, который запускает сервер приложения Vite и сервер UI редактора параллельно и автоматически связывает их между собой.

Примечание: оба скрипта сначала пересобирают пакет, чтобы бандл dev-оверлея всегда был актуальным.