Documenti / Nuxt

Internazionalizzazione Nuxt, automatizzata

Internazionalizza un'app Nuxt: i template diventano chiamate e @nuxtjs/i18n viene aggiunto a nuxt.config con tutte le lingue bundle e la lingua memorizzata in un cookie.

Come funziona

Le pagine e i componenti Nuxt vengono riscritti come qualsiasi componente Vue; la configurazione utilizza il modulo ufficiale @nuxtjs/i18n.

Prima e dopo

L'output effettivo del motore per questo file. In un'esecuzione reale, il modello ospitato nomina le chiavi dal contesto.

app/pages/index.vue · prima

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

app/pages/index.vue · dopo

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

Cosa aggiunge la configurazione

La prima esecuzione imposta @nuxtjs/i18n se il progetto non lo ha ancora:

@nuxtjs/i18n in package.json e modules in nuxt.config
i18n/i18n.config.ts che bundle tutte le lingue, con regole per il plurale
Un URL per lingua (/es/about, quello predefinito senza prefisso) con collegamenti hreflang da useLocaleHead()
La prima visita segue il cookie lang o il browser

Eseguilo

La CLI richiede Node.js 22 o versioni successive.

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

Oppure aggiungi la GitHub Action e ottieni una pull request a ogni push. Provalo prima sul tuo codice nel playground.