Docs / Nuxt

Nuxt i18n, automated

Localize a Nuxt app: templates become $t() calls and @nuxtjs/i18n is added to nuxt.config with every locale bundled and the language kept in a cookie.

How it works

Nuxt pages and components are rewritten like any Vue component; the setup goes through the official @nuxtjs/i18n module instead of a hand-made plugin.

Before and after

The engine’s real output for this file. In a real run, the hosted model names the keys from context.

app/pages/index.vue · before

<template>
  <main>
    <h1>Fresh coffee, delivered</h1>
    <NuxtLink to="/shop">Browse the shop</NuxtLink>
  </main>
</template>

app/pages/index.vue · after

<template>
  <main>
    <h1>{{ $t('home.fresh_coffee_delivered') }}</h1>
    <NuxtLink to="/shop">{{ $t('home.browse_the_shop') }}</NuxtLink>
  </main>
</template>

locales/en.json

{
  "home": {
    "fresh_coffee_delivered": "Fresh coffee, delivered",
    "browse_the_shop": "Browse the shop"
  }
}

What the setup adds

The first run sets up @nuxtjs/i18n if the project doesn’t have it yet:

@nuxtjs/i18n in package.json and modules in nuxt.config
i18n/i18n.config.ts bundling every locale, with plural rules
Language from the lang cookie or the browser, one URL per page

Run it

The CLI needs Node.js 22 or later.

npm install --save-dev localize-dev
npx localize-dev login

# Preview, then write the changes
npx localize-dev run --dry-run -l es,fr,de
npx localize-dev run -l es,fr,de

# Or open a pull request instead
npx localize-dev pr -l es,fr,de

Or add the GitHub Action and get a pull request on every push. Try it on your own code first in the playground.