How to localize a Vue app

i18n in Vue

The usual setup uses vue-i18n. vue-i18n loads a messages object keyed by locale, resolves keys (nested with dot notation) at runtime, and re-renders on locale change. Named interpolation uses single-brace {name} syntax.

import { createI18n } from 'vue-i18n'
import en from './locales/en.json'
import de from './locales/de.json'

export const i18n = createI18n({
  legacy: false,
  locale: 'en',
  fallbackLocale: 'en',
  messages: { en, de },
})

<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>

<template>
  <h1>{{ t('greeting', { name: 'Sam' }) }}</h1>
</template>
<!-- locales/en.json → { "greeting": "Hello, {name}!" } -->

Translate it with nlit

1. 1Add your source-language strings to nlit as keys (import your existing files, or start fresh).
2. 2Run AI auto-translate into every target language — the credit cost is shown before each run, and your glossary keeps brand terms intact.
3. 3Review and approve, then pull the files into your repo with the CLI.

# .nlit.yaml
format: json-nested
output_dir: src/locales
platform: web
languages:
  - de
  - fr
  - ja

src/locales/
  de/
    messages.json
  fr/
    messages.json
  ja/
    messages.json

Format for Vue: json-nested. See the CLI docs for every format and flag.

Things to watch for

• vue-i18n uses single-brace {name} interpolation — configure your nlit keys to match.
• Use vue-i18n’s pluralization with nlit’s plural keys so each language gets correct CLDR forms.
• Group messages into modules so the project scales beyond one giant locale file.

FAQ