VueCraft NPM

Locale Editor UI ​

A browser-based editor for viewing and editing locale files directly in your project — no external service, runs entirely on your machine.

This page covers launching the editor and its dashboard. For the main editing table, toolbar, and filters, see Editor Table & Advanced Features.

Setup ​

json
// package.json
"i18n:ui": "vue-i18n-kit auto-config && vue-i18n-kit ui"
bash
npm run i18n:ui

The editor opens at http://localhost:4173. auto-config reads your createVueI18nPlugin(...) call as the single source of truth — only the locales explicitly registered there are included.

Or start everything together (Vite + editor):

bash
vue-i18n-kit dev

Dashboard ​

  • Coverage overview — overall coverage bar, per-locale progress with missing key count
  • Namespace cards — coverage percentage per namespace
  • Unused keys — keys with no t()/tm()/$t() usages found in source files
  • Phantom keys — keys referenced in code but absent from all locale files; highlighted in red
  • Duplicate values — keys where all locales share the same non-empty value (likely untranslated)