VueCraft NPM

In-Context Translation Editor ​

vueI18nDevPlugin injects a floating editor overlay into your running application during development. Translated strings can be wrapped with the <I18nInspect> component to show a pencil icon on hover; clicking it opens an inline popup for editing that key.

The plugin is a complete no-op during production builds.

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

export default defineConfig({
  plugins: [
    vue(),
    vueI18nDevPlugin(), // uiUrl is set automatically by vue-i18n-kit dev
  ],
})

Start both servers with one command:

bash
npx vue-i18n-kit dev

This auto-detects scripts.dev from package.json, starts both Vite and the locale editor UI in parallel, and passes I18N_KIT_UI_URL to vueI18nDevPlugin automatically. See the dev command for its flags.

Auto-wrap (default) ​

By default vueI18nDevPlugin automatically rewrites Vue SFC templates at dev time. Every {{ t('key') }}, {{ tm('key') }}, and {{ $t('key') }} interpolation is wrapped with <I18nInspect> — no manual markup needed.

vue
<!-- Source as written -->
<template>
  <p>{{ t('nav.home') }}</p>
</template>

<!-- What Vite actually compiles in dev mode -->
<template>
  <p>
    <I18nInspect i18n-key="nav.home">{{ t('nav.home') }}</I18nInspect>
  </p>
</template>

Set autoWrap: false to use explicit <I18nInspect i18n-key="…"> markup or the v-i18n-inspect directive instead.

Dynamic keys (v-i18n-inspect directive) ​

For runtime keys (variables, computed values, loop indices) use the directive which attaches hover behaviour to the existing element without adding a wrapper node:

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

Options ​

uiUrl ​

string · default: I18N_KIT_UI_URL env or 'http://localhost:4173'. URL of the running vue-i18n-kit ui server.

autoWrap ​

boolean · default: true. Automatically wrap t() / tm() / $t() interpolations with <I18nInspect> at dev time.

wrapFunctions ​

string[] · default: ['t', 'tm', '$t']. Function names to look for when autoWrap is enabled.

iframeWidth ​

string · default: '100vw'. Width of the right-side iframe editor panel.