@intlayer/docs 9.5.5 → 9.5.7

package/blog/pt/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: Mesma API, Bundle Diferente"
 description: O que muda quando uma aplicação Vue 3 mantém suas chamadas vue-i18n, mas as serve através do adaptador de compatibilidade @intlayer/vue-i18n. JavaScript por página, tamanho de runtime, tamanho de componente e vazamento medidos no mesmo código Vite + Vue, além do que o adaptador mantém, ignora e não consegue substituir.
 keywords:
@@ -25,6 +25,8 @@ author: aymericzip
 
 # vue-i18n VS @intlayer/vue-i18n | Mesma API, Bundle Diferente
 
+![Vue i18n library ecosystem](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
 `@intlayer/vue-i18n` é um adaptador de compatibilidade: expõe a API `vue-i18n` (`createI18n`, `useI18n`, `t()`, `d()`, `n()`, `$t`, `v-t`, `i18n.global.locale`...) e a serve a partir de dicionários compilados pelo Intlayer. Seus arquivos `.vue` não mudam. O que `t("footer.github")` está vinculado é que muda.
 
 Este artigo mede essa troca na mesma aplicação Vite + Vue 3, construída uma vez com `vue-i18n` e outra com o adapter. Os números vêm de [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom). Para `vue-i18n` e Intlayer comparados como bibliotecas, leia [vue-i18n vs Intlayer](https://intlayer.org/blog/vue-i18n-vs-intlayer) e o [benchmark vue-i18n vs Intlayer](https://intlayer.org/blog/vue-i18n-vs-intlayer-benchmark). Este é sobre o que o adapter muda quando você mantém seus componentes como estão.
@@ -105,6 +107,10 @@ Para cada build, a suite registra:
 
 ### Resultados em Vite + Vue 3
 
+Escolha as métricas e as bibliotecas que importam para você:
+
+<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** (sem 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 @@ Para cada build, a suite registra:
 - **Reatividade e carregamento de página.** A troca de locale é barata para ambas (1.5-2.8 ms); o sistema de reatividade do Vue torna isso possível uma vez que as mensagens estão na memória. O carregamento de página vai de 13.6 ms para **9.3 ms**, alinhado com 88 KB a menos de JavaScript para fazer parse.
 - **Sobre as linhas nativas.** `vue-intlayer` nesta execução agrupou cada locale em modo `static` e chegou a 57.1 KB com um runtime de 3.9 KB; os dicionários sincronizados do adaptador carregavam menos strings de locales estrangeiros, daí a figura mais baixa por página. O runtime nativo permanece o mais leve dos três, e seu modelo `.content.ts` é onde os blocos SFC `<i18n>` encontram seu 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;"
+/>
+
+> Tabela completa, cada biblioteca e cada estratégia, no [relatório de benchmark do Vue](https://intlayer.org/pt/doc/benchmark/vue).
+
 ## Por que os números se movem
 
+![The Intlayer compiler extracts content from components](https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.webp?raw=true)
+
 Nada em `src/components/` mudou, então os ganhos vêm do que `useI18n` está vinculado.
 
-**Com `vue-i18n`**, a ligação é a instância global. `createI18n({ messages: { en, fr, ... } })` é uma importação que contém tudo; cada componente que chama `useI18n()` pode acessar tudo isso, então o bundler não consegue dividir abaixo da instância. Otimizar significa que _você_ divide `en.json` por rota, chama `setLocaleMessage()` em um router guard, e mantém o mapa rota-para-arquivo correto conforme os componentes se movem.
+**Com `vue-i18n`**, a ligação é a instância global. `createI18n({ messages: { en, fr, ... } })` é uma importação que contém tudo; cada componente que chama `useI18n()` pode acessar tudo isso, então o bundler não consegue dividir abaixo da instância. Otimizar significa que _você_ divide `en.json` por rota, chama `setLocaleMessage()` em um router guard, e mantém o mapa rota-para-arquivo correto conforme os componentes se movem. O desperdício cresce em dois eixos simultaneamente, páginas e idiomas:
+
+![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" });
 
 ## Limites a conhecer antes de começar
 
-- **Blocos SFC `<i18n>` não são lidos.** Se suas mensagens vivem dentro de componentes, elas precisam se mover para os arquivos de locale (ou para `.content.ts`, que é a mesma ideia com tipos).
-- **Carregamento de mensagens em runtime acabou.** `setLocaleMessage()` e `mergeLocaleMessage()` emitem avisos e retornam. Traduções buscadas de um CMS em runtime precisam do CMS do Intlayer, ou dos comandos `intlayer pull` / `push`.
-- **`messages` é um fallback, não é gratuito.** Manter as importações JSON em `createI18n()` mantém os 75 KB no bundle. Delete-as assim que `intlayer test` passar.
-- **O adaptador não é o runtime nativo.** 7.9 KB contra 3.9 KB para `vue-intlayer`. Uma vez que todos os componentes migrarem para `useIntlayer`, remova-o.
+<AccordionGroup>
+<Accordion header="Blocos SFC <i18n> não são lidos">
+
+Se suas mensagens estão dentro dos componentes, elas precisam ser movidas para os arquivos de idioma ou para um arquivo `.content.ts`, que é a mesma ideia com tipos gerados.
+
+</Accordion>
+<Accordion header="O carregamento de mensagens em tempo de execução foi descontinuado">
+
+`setLocaleMessage()` e `mergeLocaleMessage()` exibem um aviso e retornam. Traduções obtidas de um CMS em tempo de execução precisam do [CMS do Intlayer](https://intlayer.org/pt/doc/concept/cms) ou dos comandos `intlayer pull` / `push`.
+
+</Accordion>
+<Accordion header="messages é um fallback, não gratuito">
+
+Manter as importações JSON no `createI18n()` mantém os 75 KB no bundle. Remova-as assim que o `intlayer test` passar com sucesso.
+
+</Accordion>
+<Accordion header="O adaptador não é o runtime nativo">
+
+7.9 KB contra 3.9 KB para o `vue-intlayer`. Assim que cada componente tiver migrado para o `useIntlayer`, remova-o.
+
+</Accordion>
+</AccordionGroup>
 
 ## Quando usar qual?
 
-- **Mantenha-se em `vue-i18n`** se sua aplicação depende de blocos SFC `<i18n>`, de fluxos de `setLocaleMessage()` em runtime, ou se 90 KB por página não é uma preocupação para seu público.
-- **Use `@intlayer/vue-i18n`** se você está em `vue-i18n` e quer os 88 KB, os componentes 23x menores, 0% vazamento de página, chaves tipadas e verificações de CI sem editar um arquivo `.vue`. Este é o ponto de entrada para um codebase `vue-i18n` existente.
-- **Vá nativo (`vue-intlayer`)** para novos projetos, ou uma vez que o adaptador tenha feito seu trabalho. Ele tem o runtime mais leve (3.9 KB) e o modelo `.content.ts` por componente que substitui blocos `<i18n>` com conteúdo tipado.
+<AccordionGroup>
+<Accordion header="Permanecer no vue-i18n">
+
+Sua aplicação depende dos blocos SFC `<i18n>`, de fluxos `setLocaleMessage()` em tempo de execução, ou 90 KB por página não é uma preocupação para o seu público.
+
+</Accordion>
+<Accordion header="Usar @intlayer/vue-i18n">
+
+Você está no `vue-i18n` e deseja os 88 KB economizados, componentes 23 vezes menores, 0% de vazamento de página, chaves tipadas e verificações no CI sem editar um arquivo `.vue`. Este é o ponto de entrada para uma base de código `vue-i18n` existente.
+
+</Accordion>
+<Accordion header="Tornar-se nativo (vue-intlayer)">
+
+Para novos projetos, ou assim que o adaptador cumprir seu papel. Possui o runtime mais leve (3.9 KB) e o modelo `.content.ts` por componente que substitui blocos `<i18n>` por conteúdo tipado. Comece com [Intlayer com Vue](https://intlayer.org/pt/doc/environment/vite-and-vue) ou [com Nuxt](https://intlayer.org/pt/doc/environment/nuxt-and-vue).
+
+</Accordion>
+</AccordionGroup>
+
+## Perguntas Frequentes
+
+<FAQ>
+
+<Question title="Preciso editar meus arquivos .vue?">
+
+Não. A compilação do benchmark modificou apenas o `vite.config.ts`, `intlayer.config.ts` e uma linha em `src/i18n.ts`, a importação de `messages`. Todas as chamadas para `useI18n()`, `$t`, `v-t` e Options API permaneceram inalteradas.
+
+</Question>
+
+<Question title="Por que o tamanho do componente é 23 vezes menor?">
+
+Porque o `useI18n()` deixa de acessar a instância global. O `createI18n({ messages })` contém todas as mensagens de todos os idiomas, então um componente compilado isoladamente arrasta 196 KB. Com o adaptador, ele acessa apenas seu próprio dicionário: 8.4 KB.
+
+</Question>
+
+<Question title="E quanto à formatação com d() e n()?">
+
+Mantida. As configurações `datetimeFormats` e `numberFormats` passadas para `createI18n()` são respeitadas, suportadas pela API nativa `Intl`. Consulte [formatação de data, hora e número](https://intlayer.org/pt/blog/date-time-number-formatting-locales).
+
+</Question>
+
+<Question title="Funciona com Nuxt?">
+
+O `@intlayer/vue-i18n` é voltado para Vite + Vue. Para `@nuxtjs/i18n`, use o [adaptador de compatibilidade Nuxt i18n](https://intlayer.org/pt/doc/compatibility/nuxtjs-i18n) e veja [Intlayer com Nuxt](https://intlayer.org/pt/doc/environment/nuxt-and-vue) para a configuração nativa.
+
+</Question>
+
+<Question title="Posso migrar componente por componente?">
+
+Sim. Qualquer componente pode mudar de `useI18n()` para `useIntlayer("footer")` com um arquivo de conteúdo co-localizado. Dicionários JSON e `.content.ts` coexistem e se mesclam.
+
+</Question>
+
+</FAQ>
 
 ## Comparações relacionadas
 
-- [vue-i18n vs Intlayer](https://intlayer.org/blog/vue-i18n-vs-intlayer) (recursos e DX)
-- [vue-i18n vs Intlayer benchmark](https://intlayer.org/blog/vue-i18n-vs-intlayer-benchmark) (as bibliotecas, mesmo benchmark)
-- [next-intl vs @intlayer/next-intl](https://intlayer.org/blog/next-intl-vs-intlayer-next-intl) (mesma série de adaptadores)
-- [i18next vs @intlayer/i18next](https://intlayer.org/blog/i18next-vs-intlayer-i18next) (mesma série de adaptadores)
-- [Lingui vs @intlayer/lingui](https://intlayer.org/blog/lingui-vs-intlayer-lingui) (mesma série de adaptadores)
-- [Guia de migração: vue-i18n para Intlayer](https://intlayer.org/doc/migration/vue-i18n)
-- [Referência do adaptador de compatibilidade: vue-i18n](https://intlayer.org/doc/compatibility/vue-i18n), [Nuxt i18n](https://intlayer.org/doc/compatibility/nuxtjs-i18n)
+Mesma série de adaptadores:
+
+- [next-intl vs @intlayer/next-intl](https://intlayer.org/pt/blog/next-intl-vs-intlayer-next-intl)
+- [i18next vs @intlayer/i18next](https://intlayer.org/pt/blog/i18next-vs-intlayer-i18next)
+- [Lingui vs @intlayer/lingui](https://intlayer.org/pt/blog/lingui-vs-intlayer-lingui)
+
+Bibliotecas comparadas diretamente:
+
+- [vue-i18n vs Intlayer](https://intlayer.org/pt/blog/vue-i18n-vs-intlayer), features and DX
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/pt/blog/vue-i18n-vs-intlayer-benchmark)
+- [Is vue-i18n outdated?](https://intlayer.org/pt/blog/is-vue-i18n-outdated)
+- [How to pick a Vue i18n library](https://intlayer.org/pt/blog/how-to-pick-vue-i18n-library)
+
+Documentação de referência:
+
+- [Compat adapter: vue-i18n](https://intlayer.org/pt/doc/compatibility/vue-i18n) and [Nuxt i18n](https://intlayer.org/pt/doc/compatibility/nuxtjs-i18n)
+- [Guia de migração: vue-i18n para Intlayer](https://intlayer.org/pt/doc/migration/vue-i18n)
+- [Relatório de benchmark do Vue](https://intlayer.org/pt/doc/benchmark/vue)
+- [Otimização de bundle](https://intlayer.org/pt/doc/concept/bundle-optimization) e [o compilador Intlayer](https://intlayer.org/pt/doc/compiler)
+- [Editor Visual](https://intlayer.org/pt/doc/concept/editor), [CMS](https://intlayer.org/pt/doc/concept/cms) e [tradução por IA](https://intlayer.org/pt/doc/concept/auto-fill)
 
 ## Conclusão
 
@@ -285,4 +385,4 @@ export const i18n = createI18n({ locale: "en" });
 
 Todos os dados brutos, os aplicativos de teste e os scripts estão no [repositório Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom). Execute você mesmo.
 
-Consulte a [documentação 'Por que Intlayer?'](https://intlayer.org/doc/why) para mais detalhes.
+Consulte a [documentação 'Por que Intlayer?'](https://intlayer.org/pt/doc/why) para mais detalhes.

package/blog/pt/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: Comparação entre vue-i18n e Intlayer para internacionalização (i18n) em apps Vue/Nuxt
 keywords:
@@ -20,6 +20,8 @@ author: aymericzip
 
 # vue-i18n VS Intlayer | Internacionalização (i18n) em Vue
 
+![Vue i18n library ecosystem](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
 Este guia compara duas opções populares de i18n para **Vue 3** (e **Nuxt**): **vue-i18n** e **Intlayer**.
 Focamos nas ferramentas modernas do Vue (Vite, Composition API) e avaliamos:
 
@@ -31,6 +33,8 @@ Focamos nas ferramentas modernas do Vue (Vite, Composition API) e avaliamos:
 6. **Experiência do desenvolvedor (DX), ferramentas & manutenção**
 7. **SEO & escalabilidade para grandes projetos**
 
+<TOC/>
+
 > **resumo**: Ambos podem localizar apps Vue. Se você deseja **conteúdo com escopo de componente**, **tipos TypeScript rigorosos**, **verificações de chaves faltantes em tempo de build**, **dicionários otimizados por tree-shaking**, e **helpers integrados para roteamento/SEO** além de **Editor Visual & traduções com IA**, **Intlayer** é a escolha mais completa e moderna.
 
 ## Posicionamento em alto nível
@@ -38,6 +42,30 @@ Focamos nas ferramentas modernas do Vue (Vite, Composition API) e avaliamos:
 - **vue-i18n** - A biblioteca i18n padrão para Vue. Formatação flexível de mensagens (estilo ICU), blocos SFC `<i18n>` para mensagens locais, e um grande ecossistema. Segurança e manutenção em larga escala ficam principalmente por sua conta.
 - **Intlayer** - Modelo de conteúdo centrado em componentes para Vue/Vite/Nuxt com **tipagem TS rigorosa**, **verificações em tempo de build**, **tree-shaking**, **helpers para roteador e SEO**, **Editor Visual/CMS** opcional e **traduções assistidas por IA**.
 
+## O que custa em tempo de build
+
+Antes das tabelas de recursos, a parte medida. [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) compila a mesma aplicação Vite + Vue 3 (10 páginas, 10 idiomas) com cada biblioteca e registra o que o navegador baixa:
+
+<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** |
+
+O runtime do `vue-i18n` sozinho pesa **6x** o do Intlayer, cada página carrega **90% de strings de páginas externas**, e um componente compilado isoladamente arrasta **196 KB** porque `useI18n()` o vincula à árvore global de mensagens. A execução completa, com tempos de reatividade e carregamento de página, está no [benchmark vue-i18n vs Intlayer](https://intlayer.org/pt/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;"
+/>
+
+> Tabela completa no [relatório de benchmark do Vue](https://intlayer.org/pt/doc/benchmark/vue).
+
 ## Comparação de Recursos Lado a Lado (focada em Vue)
 
 | Recurso                                            | **Intlayer**                                                                          | **vue-i18n**                                                                                 |
@@ -63,59 +91,74 @@ Focamos nas ferramentas modernas do Vue (Vite, Composition API) e avaliamos:
 
 ## Comparação detalhada
 
-### 1) Arquitetura e escalabilidade
+<AccordionGroup>
+<Accordion header="1) Arquitetura e escalabilidade">
 
-- **vue-i18n**: Configurações comuns usam **catálogos centralizados** por localidade (opcionalmente divididos em arquivos/namespace). Blocos SFC `<i18n>` permitem mensagens locais, mas as equipes frequentemente retornam a catálogos compartilhados conforme os projetos crescem.
+- **vue-i18n**: Configurações comuns usam **catálogos centralizados** por localidade (opcionalmente divididos em arquivos/namespace). Blocos SFC `<i18n>` permitem mensagens locais, mas as equipes frequentemente retornam a catálogos compartilhados conforme os projetos crescem. Consulte [i18n por componente vs centralizado](https://intlayer.org/pt/blog/per-component-vs-centralized-i18n).
 - **Intlayer**: Promove **dicionários por componente** armazenados ao lado do componente que atendem. Isso reduz conflitos entre equipes, mantém o conteúdo descobrível e limita naturalmente a deriva/chaves não utilizadas.
 
 **Por que isso importa:** Em grandes aplicativos Vue ou sistemas de design, **conteúdo modular** escala melhor do que catálogos monolíticos.
 
-### 2) TypeScript & segurança
+</Accordion>
+<Accordion header="2) TypeScript e segurança">
 
 - **vue-i18n**: Bom suporte a TS; **tipagem estrita de chaves** normalmente requer esquemas/genéricos personalizados e convenções cuidadosas.
 - **Intlayer**: **Gera tipos estritos** a partir do seu conteúdo, oferecendo **autocompletar no IDE** e **erros em tempo de compilação** para erros de digitação/chaves ausentes.
 
 **Por que isso importa:** Tipagem forte detecta problemas **antes** da execução.
 
-### 3) Tratamento de traduções ausentes
+</Accordion>
+<Accordion header="3) Tratamento de traduções ausentes">
 
-- **vue-i18n**: Avisos/falhas em **tempo de execução** (ex.: fallback para localidade ou chave).
-- **Intlayer**: Detecção em **tempo de build** com avisos/erros entre localidades e chaves.
+- **vue-i18n**: Avisos/falhas em **tempo de execução** (ex.: fallback para localidade ou chave). Consulte [detecção de traduções ausentes](https://intlayer.org/pt/blog/detecting-missing-translations).
+- **Intlayer**: Detecção em **tempo de build** com avisos/erros entre localidades e chaves., mais `npx intlayer test` no CI.
 
 **Por que isso importa:** Aplicação em tempo de build mantém a interface de produção limpa e consistente.
 
-### 4) Estratégia de roteamento e URLs (Vue Router/Nuxt)
+</Accordion>
+<Accordion header="4) Estratégia de roteamento e URLs (Vue Router/Nuxt)">
 
-- **Ambos** podem funcionar com rotas localizadas.
+- **Ambos** podem funcionar com rotas localizadas. Consulte o [guia de hreflang](https://intlayer.org/pt/blog/hreflang-guide-multilingual-seo).
 - **Intlayer** fornece auxiliares para **gerar caminhos localizados**, **gerenciar prefixos de localidade** e emitir **`<link rel="alternate" hreflang>`** para SEO. Com Nuxt, complementa o roteamento do framework.
 
 **Por que isso importa:** Menos camadas personalizadas e **SEO mais limpo** entre localidades.
 
-### 5) Desempenho e comportamento de carregamento
+</Accordion>
+<Accordion header="5) Desempenho e comportamento de carregamento">
 
-- **vue-i18n**: Suporta mensagens de localidade assíncronas; evitar sobrecarregamento é sua responsabilidade (divida os catálogos com cuidado).
+- **vue-i18n**: Suporta mensagens de localidade assíncronas; evitar sobrecarregamento é sua responsabilidade (divida os catálogos com cuidado). O benchmark acima comprova com números: 134.9 KB contra 57.1 KB por página.
 - **Intlayer**: **Elimina código morto** na build e **carrega preguiçosamente por dicionário/localidade**. Conteúdo não utilizado não é enviado.
 
 **Por que isso importa:** Pacotes menores e inicialização mais rápida para apps Vue multilíngues.
 
-### 6) Experiência do desenvolvedor e ferramentas
+</Accordion>
+<Accordion header="6) Experiência do desenvolvedor e ferramentas">
 
 - **vue-i18n**: Documentação madura e comunidade consolidada; normalmente você dependerá de **plataformas externas de localização** para fluxos editoriais.
-- **Intlayer**: Oferece um **Editor Visual gratuito**, **CMS** opcional (compatível com Git ou externalizado), uma **extensão para VSCode**, utilitários **CLI/CI** e **traduções assistidas por IA** usando suas próprias chaves de provedor.
+- **Intlayer**: Oferece um **Editor Visual gratuito**, **CMS** opcional (compatível com Git ou externalizado), uma **extensão para VSCode**, utilitários **CLI/CI** e **traduções assistidas por IA** usando suas próprias chaves de provedor., um **servidor MCP**
 
 **Por que isso importa:** Menor custo operacional e um ciclo de desenvolvimento–conteúdo mais curto.
 
-### 7) SEO, SSR & SSG
+</Accordion>
+<Accordion header="7) SEO, SSR e SSG">
 
-- **Ambos** funcionam com Vue SSR e Nuxt.
+- **Ambos** funcionam com Vue SSR e Nuxt. Consulte [internacionalização e SEO](https://intlayer.org/pt/blog/SEO-and-i18n).
 - **Intlayer**: Adiciona **auxiliares de SEO** (sitemaps/metadados/`hreflang`) que são independentes de framework e funcionam bem com builds Vue/Nuxt.
 
 **Por que isso importa:** SEO internacional sem configurações personalizadas complexas.
 
+</Accordion>
+</AccordionGroup>
+
 ## Por que Intlayer? (Problema & abordagem)
 
+![Centralized catalogs versus per-component dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/assets/project_stucture_18n_vs_intlayer.png?raw=true)
+
 A maioria das pilhas i18n (incluindo **vue-i18n**) começa a partir de **catálogos centralizados**:
 
+<Tabs defaultTab="per-locale" group="catalog">
+<Tab label="Um arquivo por idioma" value="per-locale">
+
 ```bash
 .
 ├── locales
@@ -127,7 +170,8 @@ A maioria das pilhas i18n (incluindo **vue-i18n**) começa a partir de **catálo
         └── MyComponent.vue
 ```
 
-Ou com pastas por localidade:
+</Tab>
+<Tab label="Uma pasta por idioma" value="per-folder">
 
 ```bash
 .
@@ -146,6 +190,34 @@ Ou com pastas por localidade:
         └── MyComponent.vue
 ```
 
+</Tab>
+</Tabs>
+
+Essa pasta continua crescendo, um namespace por recurso, em cada idioma:
+
+```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
+```
+
 Isso frequentemente desacelera o desenvolvimento conforme os apps crescem:
 
 1. **Para um novo componente** você cria/edita catálogos remotos, conecta namespaces e traduz (frequentemente via copiar/colar manual de ferramentas de IA).
@@ -161,7 +233,33 @@ Isso frequentemente desacelera o desenvolvimento conforme os apps crescem:
         └── MyComponent.vue
 ```
 
-**Declaração de conteúdo** (por 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>
+```
+
+Cada arquivo de idioma precisa ser editado manualmente, e a chave é uma string simples: um erro de digitação é renderizado como `componentExample.greting` em produção.
+
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="./components/MyComponent/myComponent.content.ts"
 import { t, type Dictionary } from "intlayer";
@@ -171,8 +269,8 @@ const componentExampleContent = {
   content: {
     greeting: t({
       en: "Hello World",
-      es: "Hola Mundo",
       fr: "Bonjour le monde",
+      es: "Hola Mundo",
     }),
   },
 } satisfies Dictionary;
@@ -180,11 +278,10 @@ const componentExampleContent = {
 export default componentExampleContent;
 ```
 
-**Uso no Vue** (Composition API):
-
 ```vue fileName="./components/MyComponent/MyComponent.vue"
 <script setup lang="ts">
-import { useIntlayer } from "vue-intlayer"; // Integração Vue
+import { useIntlayer } from "vue-intlayer"; // Vue integration
+
 const { greeting } = useIntlayer("component-example");
 </script>
 
@@ -193,6 +290,11 @@ const { greeting } = useIntlayer("component-example");
 </template>
 ```
 
+Todos os idiomas ficam em um único arquivo tipado ao lado do componente.
+
+</Tab>
+</Tabs>
+
 Esta abordagem:
 
 - **Acelera o desenvolvimento** (declare uma vez; IDE/IA completa automaticamente).
@@ -220,22 +322,71 @@ Esta abordagem:
 
 ## Quando escolher qual?
 
-- **Escolha vue-i18n** se você quiser a **abordagem padrão do Vue**, estiver confortável gerenciando catálogos/namespace por conta própria, e seu app for **pequeno a médio porte** (ou já depender do Nuxt i18n).
-- **Escolha Intlayer** se você valoriza **conteúdo escopado por componente**, **TypeScript rigoroso**, **garantias em tempo de build**, **tree-shaking**, e ferramentas completas para roteamento/SEO/editor - especialmente para **códigos Vue/Nuxt grandes e modulares**.
+<AccordionGroup>
+<Accordion header="Escolher vue-i18n">
+
+Você quer a **abordagem padrão do Vue**, sente-se confortável gerenciando catálogos e namespaces por conta própria, e seu app é de **pequeno a médio porte** (ou você já depende do Nuxt i18n). Blocos SFC `<i18n>` e `setLocaleMessage()` em tempo de execução são recursos que o Intlayer deliberadamente não replica.
+
+</Accordion>
+<Accordion header="Escolher Intlayer">
+
+Você valoriza **conteúdo no escopo do componente**, **TypeScript estrito**, **garantias em tempo de compilação**, **tree-shaking** e ferramentas integradas de roteamento, SEO e edição, especialmente para **grandes bases de código modulares em Vue/Nuxt** e design systems. Comece com [Intlayer com Vue](https://intlayer.org/pt/doc/environment/vite-and-vue) ou [com Nuxt](https://intlayer.org/pt/doc/environment/nuxt-and-vue).
+
+</Accordion>
+<Accordion header="Escolher @intlayer/vue-i18n">
+
+Você está no `vue-i18n` hoje e deseja os ganhos no bundle sem editar um único arquivo `.vue`. O [adaptador de compatibilidade](https://intlayer.org/pt/doc/compatibility/vue-i18n) mantém `createI18n`, `useI18n`, `t()`, `d()`, `n()`, `$t` e `v-t`, servindo-os a partir de dicionários compilados. Medido lado a lado em [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/pt/blog/vue-i18n-vs-intlayer-vue-i18n).
+
+</Accordion>
+</AccordionGroup>
 
 ## Interoperabilidade com vue-i18n
 
 `intlayer` também pode ajudar a gerenciar seus namespaces `vue-i18n`.
 
-Usando `intlayer`, você pode declarar seu conteúdo no formato de sua biblioteca i18n favorita, e intlayer gerará seus namespaces no local de sua escolha (exemplo: `/messages/{{locale}}/{{namespace}}.json`).
+Usando `intlayer`, você pode declarar seu conteúdo no formato de sua biblioteca i18n favorita, e intlayer gerará seus namespaces no local de sua escolha (exemplo: `/messages/{{locale}}/{{namespace}}.json`). Consulte a [documentação de compatibilidade do vue-i18n](https://intlayer.org/pt/doc/compatibility/vue-i18n) e o [adaptador Nuxt i18n](https://intlayer.org/pt/doc/compatibility/nuxtjs-i18n).
+
+## FAQ
+
+<FAQ>
+
+<Question title="O Intlayer é um substituto para o vue-i18n ou uma camada adicional?">
+
+Ambos, dependendo de como você o adota. O `vue-intlayer` é um runtime nativo com seu próprio composable `useIntlayer()`. O `@intlayer/vue-i18n` é um adaptador de compatibilidade que mantém a API do `vue-i18n` e substitui o que está vinculado a ela, permitindo migrar sem alterar componentes e avançar arquivo por arquivo depois.
+
+</Question>
+
+<Question title="O que acontece com meus blocos SFC <i18n>?">
+
+O adaptador não os lê. Mova essas mensagens para seu JSON de idioma, ou para um `.content.ts` ao lado do componente, o que representa a mesma ideia com tipos gerados. Esse é o único recurso do `vue-i18n` que não é suportado.
 
-## Notas práticas de migração (vue-i18n → Intlayer)
+</Question>
 
-- **Comece por funcionalidade**: Mova uma rota/visualização/componente de cada vez para os dicionários locais do Intlayer.
-- **Ponte durante a migração**: Mantenha os catálogos vue-i18n em paralelo; substitua as consultas gradualmente.
-- **Ative verificações rigorosas**: Permita que a detecção em tempo de compilação identifique cedo chaves/locais ausentes.
-- **Adote auxiliares de roteador/SEO**: Padronize a detecção de localidade e as tags `hreflang`.
-- **Meça os pacotes**: Espere **reduções no tamanho dos pacotes** à medida que o conteúdo não utilizado é excluído.
+<Question title="O Intlayer funciona com Nuxt?">
+
+Sim. [Intlayer com Nuxt](https://intlayer.org/pt/doc/environment/nuxt-and-vue) cobre roteamento multilíngue, middleware de detecção de idioma e geração de sitemaps. Se você usa `@nuxtjs/i18n`, o [adaptador de compatibilidade Nuxt i18n](https://intlayer.org/pt/doc/compatibility/nuxtjs-i18n) é o caminho de migração.
+
+</Question>
+
+<Question title="Posso manter meus locales/{locale}.json como a fonte da verdade?">
+
+Sim. O [plugin de sincronização JSON](https://intlayer.org/pt/doc/compatibility/vue-i18n) os lê no dialeto do `vue-i18n` (`{name}`, `{0}`, plurais em pipe `"car | cars"`) e grava as traduções de volta quando a CLI ou o CMS os atualiza.
+
+</Question>
+
+<Question title="O ICU funciona com o Intlayer no Vue?">
+
+O suporte nativo a ICU está em desenvolvimento. O adaptador `@intlayer/vue-i18n` resolve a sintaxe de mensagens do próprio `vue-i18n`, incluindo plurais em pipe e interpolação nomeada e de lista. Para o modelo de pluralização do Intlayer, consulte [conteúdo de enumeração](https://intlayer.org/pt/doc/concept/content/enumeration).
+
+</Question>
+
+</FAQ>
+
+## GitHub STARs
+
+As estrelas do GitHub são um forte indicador da popularidade de um projeto, da confiança da comunidade e da relevância a longo prazo. Embora não sejam uma medida direta da qualidade técnica, refletem quantos desenvolvedores acham o projeto útil, acompanham seu progresso e provavelmente o adotarão. Para estimar o valor de um projeto, as estrelas ajudam a comparar a tração entre as alternativas e fornecem informações sobre o crescimento do ecossistema.
+
+[![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)
 
 ## Conclusão
 
@@ -244,4 +395,15 @@ Tanto o **vue-i18n** quanto o **Intlayer** localizam bem aplicações Vue. A dif
 - Com **Intlayer**, **conteúdo modular**, **TS rigoroso**, **segurança em tempo de build**, **bundles otimizados por tree-shaking** e **ferramentas para router/SEO/editor** vêm **prontos para usar**.
 - Se sua equipe prioriza **manutenibilidade e velocidade** em um app Vue/Nuxt multi-local, orientado a componentes, o Intlayer oferece a experiência **mais completa** atualmente.
 
-Consulte o documento ['Por que Intlayer?'](https://intlayer.org/doc/why) para mais detalhes.
+## Leituras adicionais
+
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/pt/blog/vue-i18n-vs-intlayer-benchmark), the measured run behind the table above
+- [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/pt/blog/vue-i18n-vs-intlayer-vue-i18n), the adapter on the same app
+- [Is vue-i18n outdated?](https://intlayer.org/pt/blog/is-vue-i18n-outdated)
+- [How to pick a Vue i18n library](https://intlayer.org/pt/blog/how-to-pick-vue-i18n-library)
+- [Using Intlayer with vue-i18n](https://intlayer.org/pt/blog/intlayer-with-vue-i18n)
+- [Vue benchmark report](https://intlayer.org/pt/doc/benchmark/vue)
+- [Migration guide: vue-i18n to Intlayer](https://intlayer.org/pt/doc/migration/vue-i18n)
+- [Bundle optimization](https://intlayer.org/pt/doc/concept/bundle-optimization) and [the Intlayer compiler](https://intlayer.org/pt/doc/compiler)
+
+Refer to ['Why Intlayer?' doc](https://intlayer.org/pt/doc/why) for more details.