Documentación / Nuxt

Nuxt i18n, automatizado

Localice una aplicación Nuxt: las plantillas se convierten en llamadas y se añade @nuxtjs/i18n a nuxt.config con cada locale empaquetada y el idioma guardado en una cookie.

Cómo funciona

Las páginas y componentes de Nuxt se reescriben como cualquier componente de Vue; la configuración utiliza el módulo oficial @nuxtjs/i18n.

Antes y después

La salida real del motor para este archivo. En una ejecución real, el modelo alojado nombra las claves a partir del contexto.

app/pages/index.vue · antes

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

app/pages/index.vue · despué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"
  }
}

Lo que añade la configuración

La primera ejecución configura @nuxtjs/i18n si el proyecto aún no lo tiene:

@nuxtjs/i18n en package.json y modules en nuxt.config
i18n/i18n.config.ts empaqueta cada idioma con reglas de plural
Una URL por idioma (/es/about, la predeterminada sin prefijo) con enlaces hreflang de useLocaleHead()
La primera visita sigue la cookie lang o el navegador

Ejecutarlo

La CLI necesita Node.js 22 o posterior.

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

O añade la GitHub Action y obtén una pull request en cada push. Pruébalo primero en tu propio código en el playground.