Vue i18n é a solução padrão para internacionalização (i18n) em aplicações Vue.js. Neste guia, vou mostrar como configurar Vue i18n no Vue 3, Nuxt 3 e com diversas ferramentas de build. ## O que é Vue i18n? Vue i18n é um plugin desenvolvido pela [Intlify](https://intlify.dev) que permite tornar sua aplicação Vue multilíngue. Ele suporta: - Vue 2 e Vue 3 - Composition API e Options API - Pluralização - Formatação de datas e números - Carregamento preguiçoso de traduções ## Instalação do Vue 3 i18n ### Instalar com npm/yarn ```bash npm install vue-i18n@9 # ou yarn add vue-i18n@9 ``` ### Configuração básica no Vue 3 ```javascript // src/i18n/index.js import { createI18n } from 'vue-i18n' const messages = { pt: { welcome: 'Bem-vindo', greeting: 'Olá, {name}!' }, en: { welcome: 'Welcome', greeting: 'Hello, {name}!' } } const i18n = createI18n({ locale: 'pt', fallbackLocale: 'en', messages }) export default i18n ``` ```javascript // main.js import { createApp } from 'vue' import App from './App.vue' import i18n from './i18n' const app = createApp(App) app.use(i18n) app.mount('#app') ``` ## Usar Vue i18n em templates ### A função $t ```vue ``` ### Com Composition API (useI18n) ```vue ``` ## Vue i18n mudar idioma Existem várias abordagens para mudar o idioma dinamicamente: ### Global ```javascript import i18n from '@/i18n' // Mudar idioma i18n.global.locale.value = 'en' ``` ### Em um componente ```vue ``` ## Nuxt i18n / Nuxt 3 i18n Para projetos Nuxt, existe o módulo oficial `@nuxtjs/i18n`. ### Instalação ```bash npm install @nuxtjs/i18n ``` ### Configuração Nuxt 3 ```typescript // nuxt.config.ts export default defineNuxtConfig({ modules: ['@nuxtjs/i18n'], i18n: { locales: [ { code: 'pt', iso: 'pt-BR', file: 'pt.json' }, { code: 'en', iso: 'en-US', file: 'en.json' } ], defaultLocale: 'pt', lazy: true, langDir: 'locales/', strategy: 'prefix_except_default' } }) ``` ## Vue i18n com Vite ### Plugin Vite Vue i18n Para melhor desempenho e otimização de build: ```bash npm install @intlify/unplugin-vue-i18n ``` ```javascript // vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite' import { resolve } from 'path' export default defineConfig({ plugins: [ vue(), VueI18nPlugin({ include: resolve(__dirname, './src/locales/**') }) ] }) ``` ## Estruturar arquivos de tradução ### Arquivos JSON separados por idioma ``` src/ locales/ pt.json en.json es.json ``` ```json // locales/pt.json { "nav": { "home": "Início", "products": "Produtos", "contact": "Contato" }, "auth": { "login": "Entrar", "logout": "Sair", "register": "Registrar" } } ``` ### Carregamento preguiçoso (para projetos grandes) ```javascript // i18n/index.js import { createI18n } from 'vue-i18n' const i18n = createI18n({ locale: 'pt', fallbackLocale: 'en', messages: {} }) export async function loadLocaleMessages(locale) { const messages = await import(`./locales/${'${locale}'}.json`) i18n.global.setLocaleMessage(locale, messages.default) return messages } export default i18n ``` ## Pluralização Vue i18n ```json { "items": "nenhum item | um item | {count} itens" } ``` ```vue ``` ## Perguntas frequentes (FAQ) ### Como mudo o idioma no Vue i18n? Use `locale.value = 'en'` na Composition API ou `i18n.global.locale.value = 'en'` globalmente. Ambos os métodos atualizam reativamente o idioma em toda a aplicação. ### Qual é a diferença entre Vue i18n e i18next? Vue i18n é projetado especificamente para Vue e oferece integração profunda com recursos do Vue como Composition API e Reatividade. i18next é agnóstico a frameworks e pode ser usado em React, Angular ou Vanilla JS. ### Vue i18n suporta TypeScript? Sim, Vue i18n oferece suporte completo a TypeScript. Com a interface `DefineLocaleMessage`, você pode definir chaves de tradução tipadas que permitem autocompletar e verificação de tipos. ### Como carrego traduções dinamicamente (Lazy Loading)? Use imports dinâmicos: `const messages = await import('./locales/' + locale + '.json')` e depois `i18n.global.setLocaleMessage(locale, messages.default)`. ## Conclusão Vue i18n é a melhor escolha para internacionalização em projetos Vue.js. Com Vue 3 e a Composition API, a configuração ficou ainda mais simples. Para projetos Nuxt, `@nuxtjs/i18n` oferece integração perfeita com recursos adicionais como roteamento automático. Ao traduzir seus arquivos JSON Vue i18n, é importante que placeholders como `{name}` e o formato ICU sejam preservados. [shipglobal.dev](https://shipglobal.dev) lida automaticamente com formatos de arquivo Vue i18n e preserva toda a sintaxe de variáveis. ## Artigos relacionados - [Vue i18n em JavaScript - Traduzir fora de templates](/blog/vue-i18n-javascript) - [Guia de Placeholder React i18next](/blog/react-i18next-placeholder) - [Guia Android i18n JSON](/blog/android-i18n-json-guide) ## Recursos adicionais - [Documentação Vue i18n](https://vue-i18n.intlify.dev/) - [Módulo Nuxt i18n](https://i18n.nuxtjs.org/) - [Intlify](https://intlify.dev/)

{{ $t('welcome') }}

{{ t('welcome') }}