Docs / Nuxt

Nuxt i18n, automatisé

Localisez une application Nuxt : les modèles deviennent des appels et @nuxtjs/i18n est ajouté à nuxt.config avec chaque locale regroupée et la langue conservée dans un cookie.

Comment ça marche

Les pages et composants Nuxt sont réécrits comme n'importe quel composant Vue ; la configuration utilise le module officiel @nuxtjs/i18n.

Avant et après

La sortie réelle du moteur pour ce fichier. Lors d'une exécution réelle, le modèle hébergé nomme les clés à partir du contexte.

app/pages/index.vue · avant

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

app/pages/index.vue · après

<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"
  }
}

Ce que l'installation ajoute

La première exécution configure @nuxtjs/i18n si le projet ne l'a pas encore :

@nuxtjs/i18n dans package.json et modules dans nuxt.config
i18n/i18n.config.ts regroupant chaque locale, avec des règles de pluriel
Une URL par langue (/es/about, celle par défaut sans préfixe) avec des liens hreflang de useLocaleHead()
La première visite suit le cookie lang ou le navigateur

Exécutez-le

L'interface CLI nécessite Node.js 22 ou une version ultérieure.

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

Ou ajoutez le Action GitHub et recevez une pull request à chaque push. Essayez-le d'abord sur votre propre code dans le playground.