Intlayer

--- createdAt: 2024-08-11 updatedAt: 2025-08-23 title: vue-i18n vs Intlayer description: Confronta vue-i18n con Intlayer per l'internazionalizzazione (i18n) in app Vue/Nuxt keywords: - vue-i18n - Intlayer - Internazionalizzazione - i18n - Blog - Vue - Nuxt - JavaScript slugs: - blog - vue-i18n-vs-intlayer --- # vue-i18n VS Intlayer | Internazionalizzazione Vue (i18n) Questa guida confronta due popolari opzioni i18n per **Vue 3** (e **Nuxt**): **vue-i18n** e **Intlayer**. Ci concentriamo sugli strumenti moderni di Vue (Vite, Composition API) e valutiamo: 1. **Architettura e organizzazione dei contenuti** 2. **TypeScript e sicurezza** 3. **Gestione delle traduzioni mancanti** 4. **Routing e strategia URL** 5. **Prestazioni e comportamento di caricamento** 6. **Esperienza sviluppatore (DX), strumenti e manutenzione** 7. **SEO e scalabilità per progetti di grandi dimensioni** <TOC/> > **tl;dr**: Entrambi possono localizzare app Vue. Se desideri **contenuti a livello di componente**, **tipi TypeScript rigorosi**, **controlli delle chiavi mancanti in fase di build**, **dizionari tree-shaken** e **helper integrati per router/SEO** oltre a **Editor Visivo e traduzioni AI**, **Intlayer** è la scelta più completa e moderna. --- ## Posizionamento ad alto livello - **vue-i18n** - La libreria i18n de-facto per Vue. Formattazione flessibile dei messaggi (stile ICU), blocchi SFC `<i18n>` per messaggi locali e un grande ecosistema. La sicurezza e la manutenzione su larga scala dipendono principalmente da te. - **Intlayer** - Modello di contenuto incentrato sui componenti per Vue/Vite/Nuxt con **tipizzazione TS rigorosa**, **controlli in fase di build**, **tree-shaking**, **helper per router e SEO**, **Editor Visivo/CMS** opzionale e **traduzioni assistite da AI**. --- ## Confronto delle funzionalità affiancate (focalizzato su Vue) | Funzionalità | **Intlayer** | **vue-i18n** | | --------------------------------------------------- | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | | **Traduzioni vicino ai componenti** | ✅ Sì, contenuto collocato per componente (es. `MyComp.content.ts`) | ✅ Sì, tramite blocchi SFC `<i18n>` (opzionale) | | **Integrazione TypeScript** | ✅ Avanzata, tipi **rigorosi** generati automaticamente e completamento chiavi | ✅ Buona tipizzazione; **sicurezza rigorosa delle chiavi richiede configurazioni/discipline aggiuntive** | | **Rilevamento traduzioni mancanti** | ✅ Avvisi/errori in **fase di build** e visibilità in TS | ⚠️ Fallback/avvisi a runtime | | **Contenuti ricchi (componenti/Markdown)** | ✅ Supporto diretto per nodi ricchi e file di contenuto Markdown | ⚠️ Limitato (componenti tramite `<i18n-t>`, Markdown tramite plugin esterni) | | **Traduzione con AI** | ✅ Flussi di lavoro integrati usando le tue chiavi provider AI | ❌ Non integrato | | **Editor Visivo / CMS** | ✅ Editor Visivo gratuito e CMS opzionale | ❌ Non integrato (usa piattaforme esterne) | | **Routing localizzato** | ✅ Helper per Vue Router/Nuxt per generare percorsi localizzati, URL e `hreflang` | ⚠️ Non core (usa Nuxt i18n o configurazioni personalizzate di Vue Router) | | **Generazione dinamica delle rotte** | ✅ Sì | ❌ Non fornito (fornito da Nuxt i18n) | | **Pluralizzazione e formattazione** | ✅ Schemi di enumerazione; formatter basati su Intl | ✅ Messaggi in stile ICU; formatter Intl | | **Formati di contenuto** | ✅ `.ts`, `.js`, `.json`, `.md`, `.txt` (YAML in lavorazione) | ✅ `.json`, `.js` (più blocchi SFC `<i18n>`) | | **Supporto ICU** | ⚠️ In lavorazione | ✅ Sì | | **Helper SEO (sitemap, robots, metadata)** | ✅ Helper integrati (indipendenti dal framework) | ❌ Non core (Nuxt i18n/comunità) | | **SSR/SSG** | ✅ Funziona con Vue SSR e Nuxt; non blocca il rendering statico | ✅ Funziona con Vue SSR/Nuxt | | **Tree-shaking (spedire solo il contenuto usato)** | ✅ Per componente al momento della build | ⚠️ Parziale; richiede suddivisione manuale del codice/messaggi asincroni | | **Caricamento lazy** | ✅ Per locale / per dizionario | ✅ Supporta messaggi di locale asincroni | | **Rimozione del contenuto non utilizzato** | ✅ Sì (a tempo di build) | ❌ Non integrato | | **Manutenibilità di progetti di grandi dimensioni** | ✅ Favorisce una struttura modulare e amichevole per i design system | ✅ Possibile, ma richiede una forte disciplina su file/namespace | | **Ecosistema / comunità** | ⚠️ Più piccolo ma in rapida crescita | ✅ Grande e maturo nell'ecosistema Vue | --- ## Confronto approfondito ### 1) Architettura e scalabilità - **vue-i18n**: Le configurazioni comuni utilizzano **cataloghi centralizzati** per locale (opzionalmente suddivisi in file/namespace). I blocchi SFC `<i18n>` permettono messaggi locali, ma i team spesso tornano ai cataloghi condivisi man mano che i progetti crescono. - **Intlayer**: Promuove **dizionari per componente** memorizzati accanto al componente che servono. Questo riduce i conflitti tra team, mantiene il contenuto facilmente rintracciabile e limita naturalmente la deriva/chiavi non utilizzate. **Perché è importante:** In grandi app Vue o design system, il **contenuto modulare** scala meglio rispetto ai cataloghi monolitici. --- ### 2) TypeScript e sicurezza - **vue-i18n**: Buon supporto TS; la **tipizzazione rigorosa delle chiavi** richiede tipicamente schemi/generici personalizzati e convenzioni attente. - **Intlayer**: **Genera tipi rigorosi** dal tuo contenuto, offrendo **autocompletamento nell’IDE** e **errori a tempo di compilazione** per errori di battitura o chiavi mancanti. **Perché è importante:** Il typing forte intercetta i problemi **prima** del runtime. --- ### 3) Gestione delle traduzioni mancanti - **vue-i18n**: Avvisi/fallback **a runtime** (es. fallback su locale o chiave). - **Intlayer**: Rilevamento **a build-time** con avvisi/errori su tutte le localizzazioni e chiavi. **Perché è importante:** L’applicazione a build-time mantiene l’interfaccia di produzione pulita e coerente. --- ### 4) Strategia di routing e URL (Vue Router/Nuxt) - **Entrambi** possono funzionare con rotte localizzate. - **Intlayer** fornisce helper per **generare percorsi localizzati**, **gestire i prefissi di localizzazione** ed emettere **`<link rel="alternate" hreflang>`** per la SEO. Con Nuxt, integra il routing del framework. **Perché è importante:** Meno strati di collegamento personalizzati e **SEO più pulita** tra le localizzazioni. --- ### 5) Prestazioni e comportamento di caricamento - **vue-i18n**: Supporta messaggi di localizzazione asincroni; evitare un bundle eccessivo è responsabilità tua (dividi i cataloghi con attenzione). - **Intlayer**: **Ottimizza l’albero** durante la build e **carica in modo lazy per dizionario/località**. Il contenuto non utilizzato non viene incluso. **Perché è importante:** Bundle più piccoli e avvio più veloce per app Vue multi-localizzazione. --- ### 6) Esperienza sviluppatore e strumenti - **vue-i18n**: Documentazione e community mature; solitamente ti affiderai a **piattaforme di localizzazione esterne** per i flussi editoriali. - **Intlayer**: Fornisce un **Editor Visivo gratuito**, un **CMS** opzionale (compatibile con Git o esternalizzato), un’**estensione VSCode**, utility **CLI/CI** e **traduzioni assistite da AI** utilizzando le tue chiavi provider. **Perché è importante:** Costi operativi ridotti e un ciclo sviluppo–contenuto più breve. --- ### 7) SEO, SSR & SSG - **Entrambi** funzionano con Vue SSR e Nuxt. - **Intlayer**: Aggiunge **helper SEO** (sitemap/metadata/`hreflang`) indipendenti dal framework e ben integrati con le build Vue/Nuxt. **Perché è importante:** SEO internazionale senza configurazioni personalizzate complesse. --- ## Perché Intlayer? (Problema e approccio) La maggior parte degli stack i18n (incluso **vue-i18n**) parte da **cataloghi centralizzati**: ```bash . ├── locales │ ├── en.json │ ├── es.json │ └── fr.json └── src └── components └── MyComponent.vue ``` Oppure con cartelle per locale: ```bash . ├── locales │ ├── en │ │ ├── footer.json │ │ └── navbar.json │ ├── fr │ │ ├── footer.json │ │ └── navbar.json │ └── es │ ├── footer.json │ └── navbar.json └── src └── components └── MyComponent.vue ``` Questo spesso rallenta lo sviluppo man mano che le app crescono: 1. **Per un nuovo componente** crei/modifichi cataloghi remoti, colleghi namespace e traduci (spesso tramite copia/incolla manuale da strumenti AI). 2. **Quando modifichi componenti** cerchi chiavi condivise, traduci, mantieni i locali sincronizzati, rimuovi chiavi inutilizzate e allinei le strutture JSON. **Intlayer** delimita il contenuto **per componente** e lo mantiene **vicino al codice**, come già facciamo con CSS, storie, test e documentazione: ```bash . └── components └── MyComponent ├── MyComponent.content.ts └── MyComponent.vue ``` **Dichiarazione del contenuto** (per componente): ```ts fileName="./components/MyComponent/MyComponent.content.ts" import { t, type Dictionary } from "intlayer"; const componentExampleContent = { key: "component-example", content: { greeting: t({ en: "Hello World", es: "Hola Mundo", fr: "Bonjour le monde", }), }, } satisfies Dictionary; export default componentExampleContent; ``` **Utilizzo in Vue** (Composition API): ```vue fileName="./components/MyComponent/MyComponent.vue" <script setup lang="ts"> import { useIntlayer } from "vue-intlayer"; // Integrazione Vue const { greeting } = useIntlayer("component-example"); </script> <template> <span>{{ greeting }}</span> </template> ``` Questo approccio: - **Accelera lo sviluppo** (dichiara una volta; completamento automatico IDE/AI). - **Pulisce il codice** (1 componente = 1 dizionario). - **Facilita duplicazione/migrazione** (copia un componente e il suo contenuto insieme). - **Evita chiavi inutilizzate** (i componenti non usati non importano contenuti). - **Ottimizza il caricamento** (i componenti caricati in modo lazy portano con sé il loro contenuto). --- ## Funzionalità aggiuntive di Intlayer (rilevanti per Vue) - **Supporto cross-framework**: Funziona con Vue, Nuxt, Vite, React, Express e altri. - **Gestione contenuti basata su JavaScript**: Dichiara nel codice con piena flessibilità. - **File di dichiarazione per ogni locale**: Definisci tutte le localizzazioni e lascia che gli strumenti generino il resto. - **Ambiente con tipizzazione sicura**: Configurazione TS robusta con completamento automatico. - **Recupero contenuti semplificato**: Un singolo hook/composable per ottenere tutti i contenuti di un dizionario. - **Codebase organizzata**: 1 componente = 1 dizionario nella stessa cartella. - **Routing migliorato**: Helper per percorsi e metadata localizzati di **Vue Router/Nuxt**. - **Supporto Markdown**: Importa Markdown remoto/locale per ogni locale; espone il frontmatter al codice. - **Editor Visuale gratuito & CMS opzionale**: Creazione contenuti senza piattaforme di localizzazione a pagamento; sincronizzazione compatibile con Git. - **Contenuti tree-shakable**: Include solo ciò che viene utilizzato; supporta il caricamento lazy. - **Compatibile con rendering statico**: Non blocca la generazione statica (SSG). - **Traduzioni potenziate dall’IA**: Traduci in 231 lingue utilizzando il tuo provider AI/chiave API. - **Server MCP & estensione VSCode**: Automatizza i flussi di lavoro i18n e la creazione di contenuti direttamente nel tuo IDE. - **Interoperabilità**: Collegamenti con **vue-i18n**, **react-i18next** e **react-intl** quando necessario. --- ## Quando scegliere quale? - **Scegli vue-i18n** se vuoi l’**approccio standard di Vue**, ti senti a tuo agio a gestire cataloghi/namespace da solo e la tua app è di **dimensioni piccole o medie** (o già usi Nuxt i18n). - **Scegli Intlayer** se apprezzi il **contenuto scoped per componente**, il **TypeScript rigoroso**, le **garanzie a build-time**, il **tree-shaking** e gli strumenti **batteries-included** per routing/SEO/editor-specialmente per **codebase Vue/Nuxt grandi e modulari**. --- ## Note pratiche per la migrazione (vue-i18n → Intlayer) - **Inizia per funzionalità**: Sposta una rotta/vista/componente alla volta nei dizionari locali di Intlayer. - **Collega durante la migrazione**: Mantieni i cataloghi vue-i18n in parallelo; sostituisci gradualmente le ricerche. - **Abilita controlli rigorosi**: Permetti al rilevamento in fase di build di evidenziare presto chiavi/locale mancanti. - **Adotta helper per router/SEO**: Standardizza il rilevamento della localizzazione e i tag `hreflang`. - **Misura i bundle**: Aspettati **riduzioni delle dimensioni del bundle** man mano che il contenuto non utilizzato viene escluso. --- ## Conclusione Sia **vue-i18n** che **Intlayer** localizzano bene le app Vue. La differenza è **quanto devi costruire da solo** per ottenere una configurazione robusta e scalabile: - Con **Intlayer**, **contenuti modulari**, **TypeScript rigoroso**, **sicurezza a tempo di compilazione**, **bundle ottimizzati con tree-shaking** e **strumenti per router/SEO/editor** sono disponibili **pronti all'uso**. - Se il tuo team dà priorità a **manutenibilità e velocità** in un'app Vue/Nuxt multilingue e basata su componenti, Intlayer offre l'esperienza **più completa** oggi disponibile. Consulta il documento ['Perché Intlayer?'](https://intlayer.org/doc/why) per maggiori dettagli.