Automate Nuxt i18n Translations with AI
Babely translates your Nuxt locale JSON files while preserving linked keys, interpolation, and layout namespaces — the only Vue stack example in the Babely repo.
Why teams automate this
Vue i18n JSON files grow fast
Nuxt apps accumulate locale keys across layouts, pages, and components. Maintaining es.json, fr.json, and de.json by hand blocks every release.
Linked keys and arrays break easily
Nuxt i18n supports linked messages and array values. Generic translation tools flatten or corrupt these structures.
No CI sync with English source
When en.json changes, target locale files fall behind unless translation is part of your deploy pipeline.
Nuxt i18n example: a complete localization setup
Here is a full Nuxt 3 and Nuxt 4 internationalization walkthrough using @nuxtjs/i18n — installing the module, configuring locales, creating translation files, and adding a language switcher. Once your multi language setup works, the last step shows how to keep every locale translated automatically.
1. Install Nuxt i18n
Add the official @nuxtjs/i18n module to your Nuxt project. It handles locale routing, lazy loading, and the translation runtime.
npm install @nuxtjs/i18n2. Configure nuxt.config.ts
Register the module and declare your locales. The prefix_except_default strategy keeps English at / and serves other languages under /fr and /de, which is the most common Nuxt localization setup.
export default defineNuxtConfig({
modules: ["@nuxtjs/i18n"],
i18n: {
defaultLocale: "en",
strategy: "prefix_except_default",
locales: [
{ code: "en", file: "en.json" },
{ code: "fr", file: "fr.json" },
{ code: "de", file: "de.json" }
],
lazy: true,
langDir: "locales/"
}
})3. Create locale JSON files
Each locale gets one JSON file inside your langDir. Nested objects let you group keys by page or component, and Nuxt i18n resolves them with dot notation such as $t('navigation.home').
{
"welcome": "Welcome",
"navigation": {
"home": "Home",
"pricing": "Pricing"
}
}4. Add a language switcher
useSwitchLocalePath returns the equivalent route in another locale, so users stay on the same page when they change language. Use $t in your template to read the keys you just defined.
<script setup lang="ts">
const { locale, locales } = useI18n()
const switchLocalePath = useSwitchLocalePath()
const availableLocales = computed(() =>
locales.value.filter((l) => l.code !== locale.value)
)
</script>
<template>
<h1>{{ $t("welcome") }}</h1>
<nav>
<NuxtLink to="/">{{ $t("navigation.home") }}</NuxtLink>
<NuxtLink
v-for="l in availableLocales"
:key="l.code"
:to="switchLocalePath(l.code)"
>
{{ l.code.toUpperCase() }}
</NuxtLink>
</nav>
</template>5. Automate translations with Babely
At this point fr.json and de.json are still empty. Point Babely at the same langDir you configured above and it fills them from en.json, preserving nested keys, interpolation, and linked messages. On Nuxt 4 with @nuxtjs/i18n v9 locale files live under i18n/locales/, so adjust the include path to match your project.
{
"locale": {
"source": "en",
"targets": ["fr", "de"]
},
"files": {
"json": {
"include": ["locales/[locale].json"]
}
}
}How it works
Initialize Babely in your Nuxt project
Run init from your Nuxt project root and configure Babely to watch your i18n locale directory.
npx @babely/cli@latest initConfigure src/i18n/locales/[locale].json
Match the path @nuxtjs/i18n loads. Set your source locale and targets in babely.json.
{
"locale": {
"source": "en",
"targets": ["es", "fr", "de", "sv"]
},
"files": {
"json": {
"include": ["src/i18n/locales/[locale].json"]
}
}
}Translate changed keys
Run translate after editing English strings. Babely detects Git diff changes and updates only modified keys.
npx @babely/cli@latest translateWire into CI
Add Babely to your GitHub Action so locale files stay in sync before every Nuxt deploy.
# See docs/github-actions for the full workflowExample babely.json
Copy this config into your project root and adjust targets to match your locale folders.
{
"locale": {
"source": "en",
"targets": ["es", "fr", "de", "sv"]
},
"files": {
"json": {
"include": ["src/i18n/locales/[locale].json"]
}
}
}Why Babely for Nuxt
Nuxt i18n JSON support
Babely handles the JSON format @nuxtjs/i18n expects, including nested layout and page namespaces.
Interpolation preserved
Placeholders and linked key references stay intact in translated locale files.
Multi-locale in one command
Translate into es, fr, de, sv and more target locales without manual copy-paste.
Git-aware workflow
Only changed keys are translated, keeping pull request diffs small and reviewable.
Related documentation
Other use cases
react-i18next
Babely translates your locales/[locale].json files while preserving {{interpolation}}, nested namespaces, and plural keys — the most widely used React i18n library.
Lingui
Babely translates your locales/[locale]/messages.po catalogs while preserving Gettext plurals, explicit message IDs, and component references — built for Lingui's PO-based workflow.
Fumadocs
Ship multilingual documentation without duplicating your Fumadocs setup. Babely translates UI JSON and MDX content in one command — navigation labels, search UI, and every docs page.
Start translating your Nuxt project
Set up Babely in minutes, automate translations in CI, and ship multilingual products without enterprise localization overhead.
Frequently Asked Questions
Does Babely work with @nuxtjs/i18n?
Yes. Babely manages locale JSON files on disk. Your Nuxt i18n module configuration and lazy-loading setup continue to work unchanged.
Can I use a different locale directory path?
Yes. Update the include path in babely.json to match your project structure, for example i18n/locales/[locale].json.
Does Babely support Nuxt 3 and Nuxt 4?
Yes. Babely is format-agnostic — it translates JSON locale files regardless of your Nuxt version.
Does Babely replace @nuxtjs/i18n?
No. Babely automates translation file generation. Nuxt i18n still handles routing, lazy loading, and runtime locale switching.