O vue-i18n está obsoleto em 2026?

No universo Vue, poucas soluções alcançam o nível de utilização do vue-i18n. Sob a liderança de Kazupon desde o Vue 2, ele dá suporte ao @nuxtjs/i18n e funciona como a alternativa padrão para grande parte das aplicações multilíngues.

Ainda assim, nossos testes de benchmark em 2026 trouxeram um dado surpreendente: o vue-i18n foi o runtime de localização mais pesado entre todos os ecossistemas frontend avaliados.

Em um projeto simples com Vite + Vue de 31.5 KB, a adoção do vue-i18n elevou o JavaScript médio por página para 136.4 KB, mais que quadruplicando o tamanho transferido.

Por que uma biblioteca feita para um framework reconhecido pela agilidade resultou em uma sobrecarga tão grande? E será que seu modelo estritamente em runtime continua adequado?

Principais conclusões

O runtime mais pesado registrado:

Com 24.3 KB gzipped (83.2 KB minificados) antes mesmo de incluir qualquer texto traduzido, o vue-i18n é cerca de 9 vezes mais pesado que a engine do intlayer (2.7 KB).

Aumento de 330% na carga da página:

O vue-i18n fez uma página Vue inicial de 31.5 KB saltar para 136.4 KB. O Intlayer manteve o resultado em 59.3 KB, o que representa um payload 56% mais leve.

Compilador embutido no navegador:

Por padrão, sem configurar aliases próprios no bundler, o vue-i18n envia um compilador completo de mensagens ao navegador para analisar textos dinamicamente.

Frequência de manutenção:

No último ano, o vue-i18n acumulou ~259 commits, dedicados a correções de bugs e alinhamento com novas versões do Vue.

Falta de recursos modernos integrados:

Ausência de suporte de primeiro nível a Language Server (LSP), servidores MCP de IA ou comandos de tradução em linha de comando.

Manutenção vs. ferramentas atuais

Mostrar todo o conteúdo da tabela

Mostrar todo o conteúdo da tabela

Abrir a tabela em um modal para ver todo o conteúdo claramente

Repositório	Estrelas	Total de commits	Commits / ano	Último commit
intlify/vue-i18n
aymericzip/intlayer

Histórico do último ano:

• intlify/vue-i18n: 259 commits (manutenção para Vue 3 e Nuxt).
• aymericzip/intlayer: 4.343 commits (trabalho contínuo em otimização de compilação, integrações LSP e suporte a IA).

Uma ferramenta estabelecida garante estabilidade. Mas o desenvolvimento atual aproveita transformações AST no build, eliminação de código inativo e tradução por IA. Um modelo focado no navegador tem dificuldade de acompanhar esses padrões.

Desempenho em Vite + Vue

Avaliamos um projeto de 10 páginas e 10 idiomas construído com Vite e Vue 3:

Testes executados em navegadores reais com compressão gzip de produção. Informações completas na documentação do benchmark Vue.

Impacto inicial de cada biblioteca

Sobrecarga antes de adicionar os arquivos de tradução:

O runtime do vue-i18n sozinho atinge 24.3 KB gzipped, quase o peso do núcleo do Vue. O Intlayer adiciona meros 2.7 KB.

Peso das páginas e dispersão de conteúdo

Conclusões centrais

Aumento proporcional elevado:

Como a base do Vue é muito enxuta (~31 KB), o vue-i18n multiplica o volume total da página por mais de quatro.

Vazamento entre páginas:

Por padrão, 90% das traduções transmitidas para uma rota pertencem a outras seções. O Intlayer elimina completamente essa perda, atingindo 0.0%.

Tamanho de componentes isolados:

Componentes compilados com escopos locais chegaram a uma média de 196 KB no vue-i18n devido à duplicação de catálogos, frente a apenas 6.5 KB no Intlayer.

Por que o vue-i18n é pesado?

Um compilador AST entregue ao navegador

O vue-i18n conta com seu próprio compilador de mensagens. Regras de plural e substituições de variáveis são convertidas em Abstract Syntax Trees diretamente em runtime.

Para contornar esse comportamento, é necessário declarar aliases de empacotamento para vue-i18n/dist/vue-i18n.runtime.esm-bundler.js e pré-compilar os arquivos com @intlify/unplugin-vue-i18n. Muitos projetos ignoram essa etapa.

Funcionalidades monolíticas

O vue-i18n agrega módulos de datas e números, mensagens encadeadas, conectores para a Options API legada ($t, v-t) e proxies reativos. Mesmo precisando apenas de frases simples em <script setup>, o pacote inteiro é incorporado.

Chaves dinâmicas inviabilizam o tree-shaking

Pelo fato de "home.hero.title" ser calculada em tempo de execução, os empacotadores não têm como checar o uso das strings. Textos desnecessários continuam no bundle.

<script setup>
import { useI18n } from "vue-i18n";

const { t } = useI18n();
</script>

<template>
  <h1>{{ t("home.hero.title") }}</h1>
</template>

<script setup>
import { useIntlayer } from "vue-intlayer";

const { title } = useIntlayer("hero");
</script>

<template>
  <h1>{{ title }}</h1>
</template>

O compilador do Intlayer rastreia com exatidão as propriedades acessadas e retira o conteúdo não utilizado antes de gerar os arquivos do cliente. Consulte otimização de bundle para entender melhor.

Experiência do desenvolvedor

Pastas separadas vs. co-localização

No vue-i18n, as mensagens ficam arquivadas em uma pasta locales/ distante. O Intlayer reúne as declarações de conteúdo junto aos componentes:

{
  "hero": {
    "title": "Ship in every language"
  }
}

{
  "hero": {
    "title": "Lance em todos os idiomas"
  }
}

<script setup>
import { useI18n } from "vue-i18n";

const { t } = useI18n();
</script>

<template>
  <h1>{{ t("hero.title") }}</h1>
</template>

import { t, type Dictionary } from "intlayer";

export default {
  key: "hero",
  content: {
    title: t({
      en: "Ship in every language",
      pt: "Lance em todos os idiomas",
    }),
  },
} satisfies Dictionary;

<script setup>
import { useIntlayer } from "vue-intlayer";

const { title } = useIntlayer("hero");
</script>

<template>
  <h1>{{ title }}</h1>
</template>

Ao excluir ou renomear Hero.vue, seus arquivos de tradução são removidos ou movidos simultaneamente.

Sugestão de chaves vs. integridade garantida

DefineLocaleMessage oferece autocompletar com base no esquema principal. No entanto, não previne ausência de traduções. Se faltar uma chave em pt.json, o TypeScript não acusará erro durante a compilação.

No Intlayer, os dicionários passam por validação rigorosa. Ativar o strictMode faz com que qualquer texto pendente resulte em erro de compilação.

Ferramentas para IDEs e IA

Estratégias de tradução

O vue-i18n não fornece comandos próprios para tradução. É praxe exportar arquivos para plataformas como Crowdin ou Phrase.

O Intlayer incorpora essas soluções nativamente:

Preenchimento automático por IA local (intlayer fill):

Traduz textos ausentes utilizando suas chaves de API da OpenAI, Anthropic, Mistral ou Gemini.

CMS visual auto-hospedável:

Instale o CMS Intlayer para capacitar redatores a alterar conteúdos com gravação direta no Git.

Licença de código aberto:

Todas as ferramentas operam sob a licença Apache 2.0.

Em quais momentos o vue-i18n ainda se justifica?

Como melhorar minha configuração atual do vue-i18n?

O Intlayer oferece pacotes de compatibilidade direta que preservam com precisão as assinaturas de funções do vue-i18n e @nuxtjs/i18n (useI18n, $t, <i18n-t>). Você não precisa reescrever templates ou composables para usufruir de uma arquitetura leve e otimizada por compilação.

A instalação se completa em um único comando:

npx intlayer init --interactive

Essa CLI interativa:

1. Instala o pacote de compatibilidade @intlayer/vue-i18n ou @intlayer/nuxt-i18n.
2. Configura aliases no Vite ou Nuxt para que suas importações e tags habituais apontem para o Intlayer, permitindo desinstalar o vue-i18n do package.json.
3. Ativa imediatamente diagnósticos do Language Server (LSP), elimina o parser AST de 24 KB do bundle de cliente e desbloqueia fluxos de tradução com IA local sem necessidade de uma refatoração profunda.

Para instruções passo a passo, explore nossos guias dedicados:

• Compatibilidade direta: Mantenha seus templates com a camada de compatibilidade do vue-i18n ou @nuxtjs/i18n.
• Guias de migração passo a passo: Converta arquivos JSON em dicionários estruturados: a partir do vue-i18n ou a partir do @nuxtjs/i18n.
• Solução mista: Preserve o vue-i18n em tempo de execução enquanto adota o Intlayer com vue-i18n para ter tipos estritos e tradução por IA local.

Avalie o peso e a dispersão do seu projeto com o scanner de SEO para i18n gratuito:

Leituras sugeridas

• Benchmark Vue & Vite i18n: comparativo completo de performance
• vue-i18n vs Intlayer: comparação técnica detalhada
• O next-intl está obsoleto em 2026?
• Internacionalização baseada em compilador vs declarativa