Vue Academy · Aula

Configuração do vue-i18n e arquivos de mensagens

createI18n(), arquivos JSON de localidades, sintaxe de mensagens {name}, chaves aninhadas e localidade de fallback.

Configuração do vue-i18n e arquivos de mensagens é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

O que é i18n?

Internacionalização (i18n) consiste em criar seu app para que ele possa apresentar textos em vários idiomas. Vue I18n é a biblioteca oficial para traduzir apps Vue.

Em vez de inserir strings em inglês diretamente no código, você consulta chaves que são resolvidas para o idioma ativo.

Instalando o Vue I18n

Adicione o pacote. Para o Vue 3, use a versão 9 ou posterior, criada em torno da API de composição.

// terminal
// npm install vue-i18n

Arquivos de mensagens

As traduções ficam em objetos de mensagens, um por localidade. As chaves correspondem às strings traduzidas. Comece pelo inglês.

const en = {
  greeting: "Hello",
  nav: {
    home: "Home",
    about: "About",
  },
}

Adicionando uma localidade turca

Cada localidade repete a mesma estrutura de chaves, para que toda chave exista em todos os idiomas.

const tr = {
  greeting: "Merhaba",
  nav: {
    home: "Ana Sayfa",
    about: "Hakkinda",
  },
}

Criando a instância do i18n

createI18n cria a instância. Defina locale (o idioma ativo), fallbackLocale (usado quando uma chave está ausente) e o mapa de messages.

import { createI18n } from "vue-i18n"

const i18n = createI18n({
  legacy: false,
  locale: "en",
  fallbackLocale: "en",
  messages: { en, tr },
})

Por que usar legacy: false

Definir legacy: false ativa o modo da API de composição, usado pelos apps Vue 3 modernos. Isso disponibiliza a função de composição useI18n, que você conhecerá na próxima lição.

const i18n = createI18n({
  legacy: false, // Composition API mode
  locale: "en",
  messages: { en, tr },
})

Registrando no app

Instale a instância como um plug-in com app.use(i18n). Isso disponibiliza auxiliares de tradução em toda a árvore de componentes.

import { createApp } from "vue"
import App from "./App.vue"

const app = createApp(App)
app.use(i18n)
app.mount("#app")

Usando $t nos modelos

Depois da instalação, todo modelo pode chamar $t(key) para consultar uma tradução na localidade ativa.

<template>
  <h1>{{ $t("greeting") }}</h1>
  <a>{{ $t("nav.home") }}</a>
</template>

Como fallbackLocale funciona

Se uma chave estiver ausente na localidade ativa, o Vue I18n recorre a fallbackLocale em vez de exibir a chave bruta. Isso mantém a interface coerente enquanto as traduções estão sendo preparadas.

// tr is missing "tagline" -> falls back to en
// {{ $t("tagline") }} renders the English text

Interpolação com espaços reservados

As mensagens podem conter espaços reservados nomeados entre chaves. Passe os valores como segundo argumento para preenchê-los.

const en = {
  welcome: "Welcome, {name}!",
}

// template:
// {{ $t("welcome", { name: "Ada" }) }}
// => "Welcome, Ada!"

Organizando os arquivos de mensagens

Em apps reais, coloque cada localidade em seu próprio arquivo (en.json, tr.json) e importe-os. Isso mantém as traduções organizadas e permite que os tradutores trabalhem de forma independente.

// locales/en.json, locales/tr.json
import en from "./locales/en.json"
import tr from "./locales/tr.json"

createI18n({ locale: "en", messages: { en, tr } })

Verificação rápida

Verifique sua compreensão da configuração do Vue I18n.

Recapitulação

Você configurou o Vue I18n:

i18n significa apresentar textos em vários idiomas consultando chaves.
Defina um objeto de mensagens por localidade, com a mesma estrutura de chaves.
createI18n recebe locale, fallbackLocale e messages; use legacy: false para o modo de composição.
Instale com app.use(i18n) e traduza nos modelos com $t(key).
Espaços reservados como {name} são preenchidos por meio de um segundo argumento.

Perguntas Frequentes

A aula “Configuração do vue-i18n e arquivos de mensagens” é grátis?

Sim — o texto completo de “Configuração do vue-i18n e arquivos de mensagens” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Configuração do vue-i18n e arquivos de mensagens”?

createI18n(), arquivos JSON de localidades, sintaxe de mensagens {name}, chaves aninhadas e localidade de fallback. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Configuração do vue-i18n e arquivos de mensagens”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Configuração do vue-i18n e arquivos de mensagens
Composable useI18n e função t()
Pluralização e mensagens vinculadas
Formatação de números, datas e moedas

← Voltar para Vue Academy