VueCraft NPM

Контекстный редактор переводов ​

vueI18nDevPlugin внедряет плавающий оверлей редактора в работающее приложение во время разработки. Переведённые строки можно обернуть компонентом <I18nInspect>, чтобы показывать значок карандаша при наведении; клик по нему открывает встроенный попап для редактирования этого ключа.

Плагин полностью не действует при продакшен-сборках.

ts
// vite.config.ts
import { vueI18nDevPlugin } from 'vue-i18n-kit/vite'

export default defineConfig({
  plugins: [
    vue(),
    vueI18nDevPlugin(), // uiUrl устанавливается автоматически через vue-i18n-kit dev
  ],
})

Запустите оба сервера одной командой:

bash
npx vue-i18n-kit dev

Это автоматически определяет scripts.dev из package.json, запускает Vite и UI редактора локалей параллельно и передаёт I18N_KIT_UI_URL процессу приложения автоматически. См. команду dev для её флагов.

Автообёртка (по умолчанию) ​

По умолчанию vueI18nDevPlugin автоматически переписывает шаблоны Vue SFC во время разработки. Каждая интерполяция {{ t('key') }}, {{ tm('key') }} и {{ $t('key') }} оборачивается в <I18nInspect> — ручная разметка не нужна.

vue
<!-- Исходный код как написан -->
<template>
  <p>{{ t('nav.home') }}</p>
</template>

<!-- Что реально компилирует Vite в dev-режиме -->
<template>
  <p>
    <I18nInspect i18n-key="nav.home">{{ t('nav.home') }}</I18nInspect>
  </p>
</template>

Установите autoWrap: false, чтобы вместо этого использовать явную разметку <I18nInspect i18n-key="…"> или директиву v-i18n-inspect.

Динамические ключи (директива v-i18n-inspect) ​

Для runtime-ключей (переменные, вычисляемые значения, индексы циклов) используйте директиву, которая прикрепляет поведение при наведении к существующему элементу без добавления обёрточного узла:

vue
<span v-i18n-inspect="activeKey">{{ t(activeKey) }}</span>
<span v-i18n-inspect="`items.${item.id}`">{{ t(`items.${item.id}`) }}</span>

Опции ​

uiUrl ​

string · по умолчанию: env I18N_KIT_UI_URL или 'http://localhost:4173'. URL работающего сервера vue-i18n-kit ui.

autoWrap ​

boolean · по умолчанию: true. Автоматически оборачивать интерполяции t() / tm() / $t() в <I18nInspect> во время разработки.

wrapFunctions ​

string[] · по умолчанию: ['t', 'tm', '$t']. Имена функций для поиска, когда autoWrap включён.

iframeWidth ​

string · по умолчанию: '100vw'. Ширина правой панели iframe-редактора.