@intlayer/docs 9.5.5 → 9.5.7

package/blog/it/vue-i18n_vs_intlayer-vue-i18n.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "vue-i18n vs @intlayer/vue-i18n: Stessa API, Bundle Diverso"
 description: Cosa cambia quando un'app Vue 3 mantiene le sue chiamate vue-i18n ma le serve tramite l'adapter di compatibilità @intlayer/vue-i18n. JavaScript per pagina, dimensione runtime, dimensione dei componenti e leakage misurati sullo stesso codice Vite + Vue, più ciò che l'adapter mantiene, ignora e non può sostituire.
 keywords:
@@ -25,6 +25,8 @@ author: aymericzip
 
 # vue-i18n VS @intlayer/vue-i18n | Stessa API, Bundle Diverso
 
+![Vue i18n library ecosystem](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
 `@intlayer/vue-i18n` è un adapter di compatibilità: espone l'API di `vue-i18n` (`createI18n`, `useI18n`, `t()`, `d()`, `n()`, `$t`, `v-t`, `i18n.global.locale`...) e la serve dai dizionari compilati da Intlayer. I tuoi file `.vue` non cambiano. Cambia solo ciò a cui `t("footer.github")` è associato.
 
 Questo articolo misura tale sostituzione sulla stessa applicazione Vite + Vue 3, costruita una volta con `vue-i18n` e una volta con l'adapter. I numeri provengono da [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom). Per `vue-i18n` e Intlayer confrontati come librerie, leggi [vue-i18n vs Intlayer](https://intlayer.org/blog/vue-i18n-vs-intlayer) e il [vue-i18n vs Intlayer benchmark](https://intlayer.org/blog/vue-i18n-vs-intlayer-benchmark). Questo riguarda ciò che l'adapter cambia quando mantieni i tuoi componenti così come sono.
@@ -105,6 +107,10 @@ Per ogni build, la suite registra:
 
 ### Risultati su Vite + Vue 3
 
+Scegli le metriche e le librerie che ti interessano:
+
+<I18nBenchmark framework="vite-vue" vertical/>
+
 | Setup                    | Strategy | Lib size (gz) | Lib size (min) | Page JS avg (gz) | Locale leak | Page leak | Component avg (gz) | E2E reactivity |  Page load |
 | ------------------------ | -------- | ------------: | -------------: | ---------------: | ----------: | --------: | -----------------: | -------------: | ---------: |
 | **base** (no i18n)       | -        |        0.0 KB |         0.0 KB |          41.3 KB |        0.0% |         - |             1.1 KB |         1.8 ms |    10.8 ms |
@@ -124,11 +130,24 @@ Per ogni build, la suite registra:
 - **Reattività e caricamento della pagina.** Il cambio di locale è economico per entrambi (1,5-2,8 ms); il sistema di reattività di Vue lo rende così una volta che i messaggi sono in memoria. Il caricamento della pagina passa da 13,6 ms a **9,3 ms**, in linea con 88 KB di JavaScript in meno da analizzare.
 - **Informazioni sulle righe native.** `vue-intlayer` in questa esecuzione ha raggruppato ogni locale in modalità `static` e ha raggiunto 57.1 KB con un runtime di 3.9 KB; i dizionari sincronizzati dell'adapter hanno portato meno stringhe di locale straniere, da qui la cifra più bassa per pagina. Il runtime nativo rimane il più leggero dei tre, e il suo modello `.content.ts` è dove i blocchi SFC `<i18n>` trovano il loro equivalente.
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Tabella completa, ogni libreria e ogni strategia, nel [report di benchmark Vue](https://intlayer.org/it/doc/benchmark/vue).
+
 ## Perché i numeri cambiano
 
+![The Intlayer compiler extracts content from components](https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.webp?raw=true)
+
 Nulla in `src/components/` è cambiato, quindi i miglioramenti provengono da ciò a cui `useI18n` è vincolato.
 
-**Con `vue-i18n`**, il binding è l'istanza globale. `createI18n({ messages: { en, fr, ... } })` è un unico import che contiene tutto; ogni componente che chiama `useI18n()` può accedere a tutto, quindi il bundler non può fare splitting al di sotto dell'istanza. Ottimizzare significa che _tu_ dividi `en.json` per route, chiami `setLocaleMessage()` in un router guard, e mantenere corretta la mappa route-to-file mentre i componenti si muovono.
+**Con `vue-i18n`**, il binding è l'istanza globale. `createI18n({ messages: { en, fr, ... } })` è un unico import che contiene tutto; ogni componente che chiama `useI18n()` può accedere a tutto, quindi il bundler non può fare splitting al di sotto dell'istanza. Ottimizzare significa che _tu_ dividi `en.json` per route, chiami `setLocaleMessage()` in un router guard, e mantenere corretta la mappa route-to-file mentre i componenti si muovono. Lo spreco cresce su due assi contemporaneamente, pagine e lingue:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
 
 ```bash
 .
@@ -258,26 +277,107 @@ export const i18n = createI18n({ locale: "en" });
 
 ## Limiti da conoscere prima di iniziare
 
-- **I blocchi SFC `<i18n>` non vengono letti.** Se i tuoi messaggi risiedono all'interno dei componenti, devono spostarsi nei file locale (o in `.content.ts`, che è la stessa idea con i tipi).
-- **Il caricamento dei messaggi in runtime è scomparso.** `setLocaleMessage()` e `mergeLocaleMessage()` avvisano e tornano. Le traduzioni recuperate da un CMS in runtime hanno bisogno del CMS di Intlayer, o dei comandi `intlayer pull` / `push`.
-- **`messages` è un fallback, non gratuito.** Mantenere gli import JSON in `createI18n()` mantiene i 75 KB nel bundle. Eliminali una volta che `intlayer test` passa.
-- **L'adapter non è il runtime nativo.** 7.9 KB contro 3.9 KB per `vue-intlayer`. Una volta che ogni componente è passato a `useIntlayer`, eliminalo.
+<AccordionGroup>
+<Accordion header="I blocchi SFC <i18n> non vengono letti">
+
+Se i tuoi messaggi si trovano all'interno dei componenti, devono essere spostati nei file di lingua o in un `.content.ts`, che è la stessa idea con tipi generati.
+
+</Accordion>
+<Accordion header="Il caricamento dei messaggi a runtime scompare">
+
+`setLocaleMessage()` e `mergeLocaleMessage()` mostrano un avviso e ritornano. Le traduzioni recuperate da un CMS a runtime richiedono il [CMS Intlayer](https://intlayer.org/it/doc/concept/cms) o i comandi `intlayer pull` / `push`.
+
+</Accordion>
+<Accordion header="messages è un ripiego, non è gratuito">
+
+Mantenere le importazioni JSON in `createI18n()` mantiene i 75 KB nel bundle. Rimuovili una volta superato `intlayer test`.
+
+</Accordion>
+<Accordion header="L'adattatore non è il runtime nativo">
+
+7.9 KB contro 3.9 KB per `vue-intlayer`. Una volta che ogni componente è passato a `useIntlayer`, rimuovilo.
+
+</Accordion>
+</AccordionGroup>
 
 ## Quando usare quale?
 
-- **Rimani su `vue-i18n`** se la tua app dipende dai blocchi `<i18n>` SFC, dai flussi `setLocaleMessage()` a runtime, o se 90 KB per pagina non è una preoccupazione per il tuo pubblico.
-- **Usa `@intlayer/vue-i18n`** se sei su `vue-i18n` e vuoi i 88 KB, i componenti 23 volte più piccoli, 0% page leakage, chiavi tipizzate e controlli CI senza modificare un file `.vue`. Questo è il punto di ingresso per una codebase `vue-i18n` esistente.
-- **Vai nativo (`vue-intlayer`)** per i nuovi progetti, o una volta che l'adapter ha fatto il suo lavoro. Ha il runtime più leggero (3.9 KB) e il modello `.content.ts` per componente che sostituisce i blocchi `<i18n>` con contenuto tipizzato.
+<AccordionGroup>
+<Accordion header="Rimanere su vue-i18n">
+
+La tua applicazione dipende dai blocchi SFC `<i18n>`, da flussi `setLocaleMessage()` a runtime, o 90 KB per pagina non rappresentano un problema per il tuo pubblico.
+
+</Accordion>
+<Accordion header="Usare @intlayer/vue-i18n">
+
+Usi `vue-i18n` e vuoi gli 88 KB risparmiati, componenti 23 volte più piccoli, 0% di dispersione di pagina, chiavi tipizzate e controlli CI senza toccare un file `.vue`. Questo è il punto di ingresso per una codebase `vue-i18n` esistente.
+
+</Accordion>
+<Accordion header="Passare a nativo (vue-intlayer)">
+
+Per nuovi progetti, o una volta che l'adattatore ha completato il suo compito. Offre il runtime più leggero (3.9 KB) e il modello `.content.ts` per componente che sostituisce i blocchi `<i18n>` con contenuti tipizzati. Inizia con [Intlayer con Vue](https://intlayer.org/it/doc/environment/vite-and-vue) o [con Nuxt](https://intlayer.org/it/doc/environment/nuxt-and-vue).
+
+</Accordion>
+</AccordionGroup>
+
+## FAQ
+
+<FAQ>
+
+<Question title="Devo modificare i miei file .vue?">
+
+No. La build di benchmark ha modificato solo `vite.config.ts`, `intlayer.config.ts` e una riga in `src/i18n.ts`, l'importazione di `messages`. Ogni chiamata a `useI18n()`, `$t`, `v-t` e all'Options API è rimasta identica.
+
+</Question>
+
+<Question title="Perché la dimensione dei componenti è 23 volte inferiore?">
+
+Perché `useI18n()` smette di fare riferimento all'istanza globale. `createI18n({ messages })` contiene tutti i messaggi di tutte le lingue, quindi un componente compilato isolatamente trascina 196 KB. Con l'adattatore accede solo al proprio dizionario: 8.4 KB.
+
+</Question>
+
+<Question title="Cosa succede con la formattazione di d() e n()?">
+
+Mantenuta. Le configurazioni `datetimeFormats` e `numberFormats` passate a `createI18n()` sono rispettate, supportate dalle API native `Intl`. Consulta [formattazione di date, ore e numeri](https://intlayer.org/it/blog/date-time-number-formatting-locales).
+
+</Question>
+
+<Question title="Funziona con Nuxt?">
+
+`@intlayer/vue-i18n` è destinato a Vite + Vue. Per `@nuxtjs/i18n`, usa l'[adattatore di compatibilità Nuxt i18n](https://intlayer.org/it/doc/compatibility/nuxtjs-i18n) e consulta [Intlayer con Nuxt](https://intlayer.org/it/doc/environment/nuxt-and-vue) per la configurazione nativa.
+
+</Question>
+
+<Question title="Posso migrare componente per componente?">
+
+Sì. Qualsiasi componente può passare da `useI18n()` a `useIntlayer("footer")` con un file di contenuto collocato accanto. I dizionari JSON e `.content.ts` coesistono e si uniscono.
+
+</Question>
+
+</FAQ>
 
 ## Confronti correlati
 
-- [vue-i18n vs Intlayer](https://intlayer.org/blog/vue-i18n-vs-intlayer) (funzionalità e DX)
-- [vue-i18n vs Intlayer benchmark](https://intlayer.org/blog/vue-i18n-vs-intlayer-benchmark) (le librerie, stesso benchmark)
-- [next-intl vs @intlayer/next-intl](https://intlayer.org/blog/next-intl-vs-intlayer-next-intl) (stessa serie di adapter)
-- [i18next vs @intlayer/i18next](https://intlayer.org/blog/i18next-vs-intlayer-i18next) (stessa serie di adapter)
-- [Lingui vs @intlayer/lingui](https://intlayer.org/blog/lingui-vs-intlayer-lingui) (stessa serie di adapter)
-- [Guida alla migrazione: vue-i18n a Intlayer](https://intlayer.org/doc/migration/vue-i18n)
-- [Riferimento dell'adattatore di compatibilità: vue-i18n](https://intlayer.org/doc/compatibility/vue-i18n), [Nuxt i18n](https://intlayer.org/doc/compatibility/nuxtjs-i18n)
+Stessa serie di adattatori:
+
+- [next-intl vs @intlayer/next-intl](https://intlayer.org/it/blog/next-intl-vs-intlayer-next-intl)
+- [i18next vs @intlayer/i18next](https://intlayer.org/it/blog/i18next-vs-intlayer-i18next)
+- [Lingui vs @intlayer/lingui](https://intlayer.org/it/blog/lingui-vs-intlayer-lingui)
+
+Le librerie a confronto diretto:
+
+- [vue-i18n vs Intlayer](https://intlayer.org/it/blog/vue-i18n-vs-intlayer), funzionalità e DX
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/it/blog/vue-i18n-vs-intlayer-benchmark)
+- [Is vue-i18n outdated?](https://intlayer.org/it/blog/is-vue-i18n-outdated)
+- [How to pick a Vue i18n library](https://intlayer.org/it/blog/how-to-pick-vue-i18n-library)
+
+Documentazione di riferimento:
+
+- [Compat adapter: vue-i18n](https://intlayer.org/it/doc/compatibility/vue-i18n) and [Nuxt i18n](https://intlayer.org/it/doc/compatibility/nuxtjs-i18n)
+- [Guida alla migrazione: da vue-i18n a Intlayer](https://intlayer.org/it/doc/migration/vue-i18n)
+- [Report di benchmark Vue](https://intlayer.org/it/doc/benchmark/vue)
+- [Ottimizzazione del bundle](https://intlayer.org/it/doc/concept/bundle-optimization) e [il compilatore Intlayer](https://intlayer.org/it/doc/compiler)
+- [Visual Editor](https://intlayer.org/it/doc/concept/editor), [CMS](https://intlayer.org/it/doc/concept/cms) e [traduzione AI](https://intlayer.org/it/doc/concept/auto-fill)
 
 ## Conclusione
 
@@ -285,4 +385,4 @@ export const i18n = createI18n({ locale: "en" });
 
 Tutti i dati grezzi, le app di test e gli script si trovano nel [repository Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom). Eseguilo tu stesso.
 
-Consulta la documentazione ['Why Intlayer?'](https://intlayer.org/doc/why) per maggiori dettagli.
+Consulta la documentazione ['Why Intlayer?'](https://intlayer.org/it/doc/why) per maggiori dettagli.

package/blog/it/vue-i18n_vs_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-11
-updatedAt: 2025-08-23
+updatedAt: 2026-09-22
 title: vue-i18n vs Intlayer
 description: Confronta vue-i18n con Intlayer per l'internazionalizzazione (i18n) in app Vue/Nuxt
 keywords:
@@ -20,6 +20,8 @@ author: aymericzip
 
 # vue-i18n VS Intlayer | Internazionalizzazione Vue (i18n)
 
+![Vue i18n library ecosystem](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
 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:
 
@@ -40,6 +42,30 @@ Ci concentriamo sugli strumenti moderni di Vue (Vite, Composition API) e valutia
 - **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**.
 
+## Cosa costa al momento della compilazione
+
+Prima delle tabelle delle funzionalità, la parte misurata. [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) compila la stessa applicazione Vite + Vue 3 (10 pagine, 10 lingue) con ciascuna libreria e registra ciò che il browser scarica:
+
+<I18nBenchmark framework="vite-vue" vertical/>
+
+| Setup                | Lib size (gz) | Page JS avg (gz) | Page leak | Component avg (gz) |
+| -------------------- | ------------: | ---------------: | --------: | -----------------: |
+| **base** (no i18n)   |        0.0 KB |          41.3 KB |         - |             1.1 KB |
+| `vue-i18n`           |       24.3 KB |         134.9 KB |     90.0% |           196.0 KB |
+| `@intlayer/vue-i18n` |        7.9 KB |          47.0 KB |      0.0% |             8.4 KB |
+| **`vue-intlayer`**   |    **3.9 KB** |      **57.1 KB** |  **0.0%** |         **7.7 KB** |
+
+Il runtime di `vue-i18n` da solo pesa **6 volte** quello di Intlayer, ogni pagina trasporta il **90% di stringhe di pagine esterne**, e un componente compilato isolatamente trascina **196 KB** perché `useI18n()` lo vincola all'albero globale dei messaggi. Il test completo, con tempi di reattività e caricamento della pagina, è disponibile nel [benchmark vue-i18n vs Intlayer](https://intlayer.org/it/blog/vue-i18n-vs-intlayer-benchmark).
+
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Tabella completa nel [report di benchmark Vue](https://intlayer.org/it/doc/benchmark/vue).
+
 ## Confronto delle funzionalità affiancate (focalizzato su Vue)
 
 | Funzionalità                                        | **Intlayer**                                                                      | **vue-i18n**                                                                                             |
@@ -65,59 +91,74 @@ Ci concentriamo sugli strumenti moderni di Vue (Vite, Composition API) e valutia
 
 ## Confronto approfondito
 
-### 1) Architettura e scalabilità
+<AccordionGroup>
+<Accordion header="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.
+- **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. Consulta [i18n per componente vs centralizzata](https://intlayer.org/it/blog/per-component-vs-centralized-i18n).
 - **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
+</Accordion>
+<Accordion header="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
+</Accordion>
+<Accordion header="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.
+- **vue-i18n**: Avvisi/fallback **a runtime** (es. fallback su locale o chiave). Consulta [rilevamento delle traduzioni mancanti](https://intlayer.org/it/blog/detecting-missing-translations).
+- **Intlayer**: Rilevamento **a build-time** con avvisi/errori su tutte le localizzazioni e chiavi., più `npx intlayer test` in CI.
 
 **Perché è importante:** L’applicazione a build-time mantiene l’interfaccia di produzione pulita e coerente.
 
-### 4) Strategia di routing e URL (Vue Router/Nuxt)
+</Accordion>
+<Accordion header="4) Strategia di routing e URL (Vue Router/Nuxt)">
 
-- **Entrambi** possono funzionare con rotte localizzate.
+- **Entrambi** possono funzionare con rotte localizzate. Consulta la [guida hreflang](https://intlayer.org/it/blog/hreflang-guide-multilingual-seo).
 - **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
+</Accordion>
+<Accordion header="5) Prestazioni e comportamento di caricamento">
 
-- **vue-i18n**: Supporta messaggi di localizzazione asincroni; evitare un bundle eccessivo è responsabilità tua (dividi i cataloghi con attenzione).
+- **vue-i18n**: Supporta messaggi di localizzazione asincroni; evitare un bundle eccessivo è responsabilità tua (dividi i cataloghi con attenzione). Il benchmark sopra lo dimostra con i numeri: 134.9 KB contro 57.1 KB per pagina.
 - **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
+</Accordion>
+<Accordion header="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.
+- **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., un **server MCP**
 
 **Perché è importante:** Costi operativi ridotti e un ciclo sviluppo–contenuto più breve.
 
-### 7) SEO, SSR & SSG
+</Accordion>
+<Accordion header="7) SEO, SSR e SSG">
 
-- **Entrambi** funzionano con Vue SSR e Nuxt.
+- **Entrambi** funzionano con Vue SSR e Nuxt. Consulta [internazionalizzazione e SEO](https://intlayer.org/it/blog/SEO-and-i18n).
 - **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.
 
+</Accordion>
+</AccordionGroup>
+
 ## Perché Intlayer? (Problema e approccio)
 
+![Centralized catalogs versus per-component dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/assets/project_stucture_18n_vs_intlayer.png?raw=true)
+
 La maggior parte degli stack i18n (incluso **vue-i18n**) parte da **cataloghi centralizzati**:
 
+<Tabs defaultTab="per-locale" group="catalog">
+<Tab label="Un file per lingua" value="per-locale">
+
 ```bash
 .
 ├── locales
@@ -129,7 +170,8 @@ La maggior parte degli stack i18n (incluso **vue-i18n**) parte da **cataloghi ce
         └── MyComponent.vue
 ```
 
-Oppure con cartelle per locale:
+</Tab>
+<Tab label="Una cartella per lingua" value="per-folder">
 
 ```bash
 .
@@ -148,6 +190,34 @@ Oppure con cartelle per locale:
         └── MyComponent.vue
 ```
 
+</Tab>
+</Tabs>
+
+Quella cartella continua a crescere, un namespace per funzionalità, in ogni lingua:
+
+```txt
+locales
+├── EN
+│   ├── blog.json
+│   ├── about.json
+│   ├── auth.json
+│   ├── blog.json
+│   ├── cart.json
+│   ├── categories.json
+│   ├── contact.json
+│   ├── dashboard.json
+│   ├── errors.json
+│   ├── faq.json
+│   ├── footer.json
+│   ├── form.json
+│   ├── home.json
+│   ├── language.json
+│   ├── navbar.json
+│   ├── ... 65 files
+│   └── validation.json
+└── ES
+```
+
 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).
@@ -163,7 +233,33 @@ Questo spesso rallenta lo sviluppo man mano che le app crescono:
         └── MyComponent.vue
 ```
 
-**Dichiarazione del contenuto** (per componente):
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="vue-i18n" value="vue-i18n">
+
+```json fileName="./locales/en.json"
+{
+  "componentExample": {
+    "greeting": "Hello World"
+  }
+}
+```
+
+```vue fileName="./components/MyComponent.vue"
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <span>{{ t("componentExample.greeting") }}</span>
+</template>
+```
+
+Ogni file di lingua deve essere modificato a mano, e la chiave è una semplice stringa: un refuso viene mostrato come `componentExample.greting` in produzione.
+
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="./components/MyComponent/myComponent.content.ts"
 import { t, type Dictionary } from "intlayer";
@@ -173,8 +269,8 @@ const componentExampleContent = {
   content: {
     greeting: t({
       en: "Hello World",
-      es: "Hola Mundo",
       fr: "Bonjour le monde",
+      es: "Hola Mundo",
     }),
   },
 } satisfies Dictionary;
@@ -182,11 +278,10 @@ const componentExampleContent = {
 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
+import { useIntlayer } from "vue-intlayer"; // Vue integration
+
 const { greeting } = useIntlayer("component-example");
 </script>
 
@@ -195,6 +290,11 @@ const { greeting } = useIntlayer("component-example");
 </template>
 ```
 
+Tutte le lingue risiedono in un unico file tipizzato accanto al componente.
+
+</Tab>
+</Tabs>
+
 Questo approccio:
 
 - **Accelera lo sviluppo** (dichiara una volta; completamento automatico IDE/AI).
@@ -222,22 +322,71 @@ Questo approccio:
 
 ## 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**.
+<AccordionGroup>
+<Accordion header="Scegliere vue-i18n">
+
+Desideri l'**approccio standard di Vue**, ti trovi a tuo agio nel gestire cataloghi e namespace in autonomia e la tua app è di **dimensioni medio-piccole** (o ti affidi già a Nuxt i18n). I blocchi SFC `<i18n>` e `setLocaleMessage()` a runtime sono funzionalità che Intlayer deliberatamente non replica.
+
+</Accordion>
+<Accordion header="Scegliere Intlayer">
+
+Dai valore ai **contenuti per componente**, al **TypeScript rigoroso**, alle **garanzie in fase di compilazione**, al **tree-shaking** e agli strumenti integrati per routing, SEO ed editor, soprattutto per **codebase modulari Vue/Nuxt di grandi dimensioni** e design system. Inizia con [Intlayer con Vue](https://intlayer.org/it/doc/environment/vite-and-vue) o [con Nuxt](https://intlayer.org/it/doc/environment/nuxt-and-vue).
+
+</Accordion>
+<Accordion header="Scegliere @intlayer/vue-i18n">
+
+Usi `vue-i18n` oggi e vuoi i vantaggi sul bundle senza toccare i file `.vue`. L'[adattatore di compatibilità](https://intlayer.org/it/doc/compatibility/vue-i18n) mantiene `createI18n`, `useI18n`, `t()`, `d()`, `n()`, `$t` e `v-t`, servendoli da dizionari compilati. Misurato fianco a fianco in [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/it/blog/vue-i18n-vs-intlayer-vue-i18n).
+
+</Accordion>
+</AccordionGroup>
 
 ## Interoperabilità con vue-i18n
 
 `intlayer` può anche aiutarti a gestire i tuoi namespace `vue-i18n`.
 
-Utilizzando `intlayer`, puoi dichiarare i tuoi contenuti nel formato della tua libreria i18n preferita, e intlayer genererà i tuoi namespace nella posizione di tua scelta (esempio: `/messages/{{locale}}/{{namespace}}.json`).
+Utilizzando `intlayer`, puoi dichiarare i tuoi contenuti nel formato della tua libreria i18n preferita, e intlayer genererà i tuoi namespace nella posizione di tua scelta (esempio: `/messages/{{locale}}/{{namespace}}.json`). Consulta la [documentazione di compatibilità con vue-i18n](https://intlayer.org/it/doc/compatibility/vue-i18n) e l'[adattatore Nuxt i18n](https://intlayer.org/it/doc/compatibility/nuxtjs-i18n).
+
+## FAQ
+
+<FAQ>
+
+<Question title="Intlayer è un sostituto di vue-i18n o un livello superiore?">
+
+Entrambi, a seconda di come lo adotti. `vue-intlayer` è un runtime nativo con il proprio composable `useIntlayer()`. `@intlayer/vue-i18n` è un adattatore di compatibilità che mantiene l'API di `vue-i18n` sostituendo ciò a cui è vincolata, permettendoti di migrare senza modificare i componenti e procedere file per file successivamente.
+
+</Question>
+
+<Question title="Cosa succede ai miei blocchi SFC <i18n>?">
+
+L'adattatore non li legge. Sposta quei messaggi nei tuoi file JSON di lingua, o in un file `.content.ts` accanto al componente, che rappresenta la stessa idea con tipi generati. Questa è l'unica funzionalità di `vue-i18n` non supportata.
 
-## Note pratiche per la migrazione (vue-i18n → Intlayer)
+</Question>
 
-- **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.
+<Question title="Intlayer funziona con Nuxt?">
+
+Sì. [Intlayer con Nuxt](https://intlayer.org/it/doc/environment/nuxt-and-vue) copre routing multilingue, middleware di rilevamento della lingua e generazione di sitemap. Se usi `@nuxtjs/i18n`, l'[adattatore di compatibilità Nuxt i18n](https://intlayer.org/it/doc/compatibility/nuxtjs-i18n) è il percorso di migrazione.
+
+</Question>
+
+<Question title="Posso mantenere i miei locales/{locale}.json come fonte di verità?">
+
+Sì. Il [plugin di sincronizzazione JSON](https://intlayer.org/it/doc/compatibility/vue-i18n) li legge con il dialetto `vue-i18n` (`{name}`, `{0}`, plurali pipe `"car | cars"`) e scrive le traduzioni quando la CLI o il CMS li aggiorna.
+
+</Question>
+
+<Question title="ICU funziona con Intlayer su Vue?">
+
+Il supporto nativo ICU è in fase di sviluppo. L'adattatore `@intlayer/vue-i18n` gestisce la sintassi propria di `vue-i18n`, inclusi i plurali pipe e l'interpolazione denominata e di elenchi. Per il modello di pluralizzazione di Intlayer, consulta il [contenuto di enumerazione](https://intlayer.org/it/doc/concept/content/enumeration).
+
+</Question>
+
+</FAQ>
+
+## GitHub STARs
+
+Le stelle di GitHub sono un forte indicatore della popolarità di un progetto, della fiducia della comunità e della rilevanza a lungo termine. Sebbene non siano una misura diretta della qualità tecnica, riflettono quanti sviluppatori trovano utile il progetto, ne seguono i progressi e sono propensi ad adottarlo. Per stimare il valore di un progetto, le stelle aiutano a confrontare l'attrazione tra le alternative e forniscono approfondimenti sulla crescita dell'ecosistema.
+
+[![Star History Chart](https://api.star-history.com/chart?repos=intlify%2Fvue-i18n%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
 
 ## Conclusione
 
@@ -246,4 +395,15 @@ Sia **vue-i18n** che **Intlayer** localizzano bene le app Vue. La differenza è
 - 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.
+## Ulteriori letture
+
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/it/blog/vue-i18n-vs-intlayer-benchmark), the measured run behind the table above
+- [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/it/blog/vue-i18n-vs-intlayer-vue-i18n), the adapter on the same app
+- [Is vue-i18n outdated?](https://intlayer.org/it/blog/is-vue-i18n-outdated)
+- [How to pick a Vue i18n library](https://intlayer.org/it/blog/how-to-pick-vue-i18n-library)
+- [Using Intlayer with vue-i18n](https://intlayer.org/it/blog/intlayer-with-vue-i18n)
+- [Vue benchmark report](https://intlayer.org/it/doc/benchmark/vue)
+- [Migration guide: vue-i18n to Intlayer](https://intlayer.org/it/doc/migration/vue-i18n)
+- [Bundle optimization](https://intlayer.org/it/doc/concept/bundle-optimization) and [the Intlayer compiler](https://intlayer.org/it/doc/compiler)
+
+Refer to ['Why Intlayer?' doc](https://intlayer.org/it/doc/why) for more details.