Skip to content

Vue I18n

TransLocale for Vue & Nuxt.

Work with Vue I18n catalogs in Vue 3, or connect them to Nuxt's locale routing and server rendering.

1. Install

Run this from your application directory.

npm install @translocale/vue vue-i18n

2. Connect your project

Create a cloud project and replace PROJECT_UUID with its ID. The source and target languages must match your local configuration. Adjust the example locales to your project.

npx translocale-vue init --api https://translocale.io --project PROJECT_UUID --locales en,fr,ja

Approve translation access in the browser:

npx translocale-vue login --scope translate

Sign-in is shared with your other TransLocale tools for this project. Keep credentials in developer tooling or CI. Your deployed app reads its own translation files.

3. Wire up your app

Vue setup generates src/translocale-i18n.ts. Register its createTransLocaleI18n(locale) factory with your app. For Nuxt, install @nuxtjs/i18n and add --framework nuxt to init instead; use createNuxtI18nOptions from @translocale/vue/nuxt in nuxt.config.ts. The included README has the complete Nuxt configuration. Download all target catalogs before building.

4. Translate, review, and download

Inspect the plan before running translate. The example caps the job at 1,000 source characters across its target languages. Waiting stops after two minutes; a timeout leaves the job running.

npx translocale-vue plan
npx translocale-vue translate --max-characters 1000 --wait
npx translocale-vue pull --job JOB_UUID --locale fr --revision 1
npx translocale-vue check

Replace JOB_UUID with the completed job ID. Before pulling revision 1, save that revision in the dashboard and review its wording. Choose the exact saved revision you want to ship, then repeat pull for each target locale. Revision 0 is the original generated output.

Normal application builds use saved catalogs and make no paid translation requests.

Already have translations?

Run npx translocale-vue discover --source en to find existing JSON catalogs. Nuxt uses the same discovery and sync commands. Sync shows local and incoming changes against the recorded revision and keeps recovery copies when you apply a reviewed update.

Current limits

  • Use Vue I18n 11.4.x with the default plural rules. Custom compilers, custom plural rules, and catalogs embedded in .vue components are not supported.
  • Nuxt server rendering and hydration have been tested in local Cloudflare. Hosted consumers, Nuxt layers, and domain-based routing still need verification.

The service accepts up to 100 KB and 200 messages per source document, with up to 10 target languages. Expanded target messages must also fit the adapter's limits. Read the file compatibility guide.