Vue & Nuxt Translation with Vue I18n

Change the language in Vue I18n

Use the global composer when a language switch should update the whole Vue app. With the generated createTransLocaleI18n factory registered through app.use(), the component below binds its selector to that composer's locale. Both languages must have local catalog files and appear in translocale.config.json.

{
  "welcome": "Hello, {name}",
  "items": "No items | One item | {count} items"
}

{
  "welcome": "Bonjour, {name}",
  "items": "Aucun article | Un article | {count} articles"
}

<script setup>
import {useI18n} from 'vue-i18n';
const {t, locale} = useI18n({useScope: 'global'});
</script>

<template>
  <label>
    Language
    <select v-model="locale">
      <option value="en">English</option>
      <option value="fr">Français</option>
    </select>
  </label>
  <p>{{ t('welcome', {name: 'Sam'}) }}</p>
  <p>{{ t('items', 3) }}</p>
</template>

Selecting Français changes the greeting to “Bonjour, Sam” and the count to “3 articles”. If only one component changes language, check whether it created a local composer. useScope: 'global' selects the app's composer. In script code, assign locale.value; Vue templates unwrap the ref for v-model.

Create a fresh i18n instance for each server-rendered app. The generated factory copies the catalogs for each call. Keep the Node.js package entry point in developer tooling; browser components import Vue I18n and the generated module.

• Vue I18n scope and locale changes

Load JSON translation files in Nuxt

Nuxt uses the same Vue I18n JSON catalogs, with @nuxtjs/i18n responsible for loading them and routing between languages. Install the module, then initialize with the Nuxt option from your app directory. For an existing TransLocale configuration, review its locale list and file pattern instead of initializing again.

npm install @translocale/vue vue-i18n @nuxtjs/i18n
npx translocale-vue init --framework nuxt --api https://translocale.io --project PROJECT_UUID --source en --locales en,fr

The default files pattern is locales/{locale}.json. Supply both example files above before starting Nuxt. Setup creates a source file if missing; it does not generate target translations. Keep your existing Nuxt options and add the module configuration below.

import {fileURLToPath} from 'node:url';
import {createNuxtI18nOptions} from '@translocale/vue/nuxt';

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: createNuxtI18nOptions({
    root: fileURLToPath(new URL('.', import.meta.url)),
  }),
});

The helper reads translocale.config.json from root, checks every configured catalog, and returns project-relative paths such as locales/fr.json. It sets restructureDir and langDir to '.' to preserve those paths. If a file cannot be found, compare the configured files pattern with its actual path and confirm root points to the Nuxt app.

The default routing strategy is prefix_except_default: English is unprefixed and French routes use /fr. Browser-language redirection is disabled by this helper. For route-aware language changes, use Nuxt's setLocale API instead of assigning the Vue locale ref directly.

<script setup>
const {setLocale} = useI18n();
</script>

<template>
  <button type="button" @click="setLocale('fr')">Français</button>
</template>

npx translocale-vue check

A missing French file or a changed {name} placeholder stops the catalog check. Restore the file or placeholder and repeat it. Local checks and builds need no TransLocale credential and do not start translation jobs. Custom plural rules and catalogs embedded in .vue files remain outside this adapter's supported format.

• Nuxt language switching
• Check one Vue I18n source file
• JSON format examples