Come Tradurre un Sito Vue.js / Nuxt in Più Lingue (Guida 2026)

Vue.js e Nuxt alimentano milioni di siti web e applicazioni in tutto il mondo. Ma quando si tratta di aggiungere il supporto multilingue, l'ecosistema Vue è stato storicamente più frammentato di quello di React — lasciando gli sviluppatori a mettere insieme soluzioni da più librerie e configurazioni manuali.

Nel 2026, hai tre percorsi solidi: vue-i18n (la libreria ufficiale di internazionalizzazione Vue), @nuxtjs/i18n (il modulo Nuxt che avvolge vue-i18n con routing e SEO), e LingoJS (l'approccio a uno script che funziona con qualsiasi progetto Vue o Nuxt senza toccare il codice).

Questa guida esplora tutti e tre gli approcci — con esempi di codice reali, tempi di configurazione e un quadro chiaro per scegliere quello giusto.

Perché il Multilingue Vue.js è Importante nel 2026

Vue.js è il secondo framework frontend più popolare al mondo, e Nuxt è il meta-framework Vue più usato. Aziende come Nintendo, GitLab, Adobe e BMW usano Vue in produzione. Se la tua app Vue parla solo una lingua, sei invisibile a una parte significativa del tuo pubblico potenziale.

I numeri sono chiari: il 75% degli utenti preferisce acquistare da siti nella propria lingua madre, e le pagine localizzate si posizionano costantemente meglio nei motori di ricerca regionali. Per i siti Nuxt — che si basano su SSR e generazione statica per la SEO — tradurre i contenuti sblocca traffico organico in ogni mercato target.

Approccio 1: vue-i18n — La Libreria Ufficiale

vue-i18n è la libreria standard di internazionalizzazione per Vue.js, mantenuta dal team core di Vue. Si integra con la Composition API di Vue 3 e fornisce traduzione reattiva, pluralizzazione, formattazione delle date e cambio di locale.

Configurazione

npm install vue-i18n@10

// i18n.ts
import { createI18n } from 'vue-i18n';
import en from './locales/en.json';
import fr from './locales/fr.json';
 
const i18n = createI18n({
  legacy: false,
  locale: 'en',
  fallbackLocale: 'en',
  messages: { en, fr }
});
 
export default i18n;

Nelle tue componenti, usi la funzione $t():

<template>
  <h1>{{ $t('hero.title') }}</h1>
  <p>{{ $t('hero.subtitle') }}</p>
</template>

Cosa funziona bene

vue-i18n è veloce, ben documentato e strettamente integrato con il sistema di reattività di Vue. Il caricamento lazy dei file di locale è supportato nativamente.

Cosa diventa complicato

Ogni stringa da tradurre deve essere avvolta in $t() o t() nei template. Significa toccare ogni componente che renderizza testo. I file di traduzione sono JSON mantenuti manualmente. Aggiungere una nuova lingua significa copiare l'intero JSON inglese e tradurre ogni voce. Per un'app Vue di medie dimensioni con oltre 500 stringhe traducibili in 20 componenti, questo rappresenta giorni di configurazione iniziale e manutenzione continua.

Il SEO è anch'esso manuale — devi configurare tag hreflang, metadati localizzati e sitemap multilingue da solo o tramite un modulo Nuxt.

Approccio 2: @nuxtjs/i18n — Il Modulo Nuxt

Se usi Nuxt 3, il modulo @nuxtjs/i18n avvolge vue-i18n e aggiunge generazione automatica delle route, rilevamento della locale, tag SEO e strategie URL. È la soluzione i18n più completa per progetti Nuxt.

Configurazione

npx nuxi module add i18n

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: ['en', 'fr', 'de', 'es', 'it'],
    defaultLocale: 'en',
    strategy: 'prefix',
    vueI18n: './i18n.config.ts'
  }
});

Il modulo genera automaticamente route per locale (/fr/about, /de/about), inietta tag hreflang e fornisce composable come useLocalePath() e useSwitchLocalePath().

Cosa funziona bene

La generazione delle route e l'automazione hreflang risparmiano ore di configurazione manuale. L'opzione strategy supporta le modalità prefix, prefix eccetto default e nessun prefix.

Cosa richiede ancora lavoro

Devi ancora scrivere ogni traduzione manualmente nei file JSON. Il modulo gestisce il livello di routing ma non traduce i tuoi contenuti — serve solo il file giusto per ogni locale.

Approccio 3: LingoJS — Uno Script, Zero Modifiche al Codice

LingoJS funziona con qualsiasi progetto Vue o Nuxt senza modifiche al codice. Aggiungi un tag script al tuo template HTML (o usi il composable useHead di Nuxt), e LingoJS rileva, traduce e serve automaticamente i tuoi contenuti in ogni lingua attivata.

Configurazione per Vue

<!-- index.html -->
<script
  src="https://cdn.jsdelivr.net/gh/Flowcodelab/LingoJs@main/lingo-snippet.obf.js"
  data-api-key="YOUR_API_KEY"
  async
></script>

Configurazione per Nuxt

<!-- app.vue -->
<script setup>
useHead({
  script: [
    {
      src: 'https://cdn.jsdelivr.net/gh/Flowcodelab/LingoJs@main/lingo-snippet.obf.js',
      async: true,
      'data-api-key': 'YOUR_API_KEY'
    }
  ]
});
</script>

Tutto qui. LingoJS gestisce tutto automaticamente — rilevamento del testo, traduzione IA contestuale, consegna CDN a ~26ms, tag hreflang, metadati localizzati, schema.org e widget di selezione lingua.

Confronto: Vue-i18n vs Nuxt-i18n vs LingoJS

Quando Usare Ogni Approccio

Usa vue-i18n se: Costruisci una SPA Vue pura (senza Nuxt), hai bisogno di controllo per stringa, hai un numero limitato di stringhe da tradurre o hai già un team di traduzione.

Usa @nuxtjs/i18n se: Sei su Nuxt 3, vuoi generazione automatica delle route e SEO di base, e sei a tuo agio con la manutenzione dei file di traduzione.

Usa LingoJS se: Vuoi che il tuo sito Vue o Nuxt sia multilingue oggi senza modificare componenti, gestire file di traduzione o configurare SEO. Dai valore alla velocità di ingegneria o sei un piccolo team.

Come Iniziare

Per provare l'approccio zero-codice, installa LingoJS in due minuti:

1. Crea un account gratuito su lingojs.com
2. Ottieni la tua chiave API dal dashboard
3. Aggiungi il tag script al tuo template HTML o app.vue
4. Scegli le tue lingue target nel dashboard
5. Fai il deploy — il tuo sito è ora multilingue

Inizia la tua prova gratuita di 30 giorni →