0Pricing
Vue Academy · Aula

Composable useI18n e função t()

useI18n(), t('key'), $t nos templates, alternância com locale.value e detecção de localidade.

Composable useI18n e função t() é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 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.

Traduzindo na configuração do script

No modo da API de composição, os componentes acessam as ferramentas de tradução por meio da função de composição useI18n(). Ela retorna, entre outros elementos, a função t e uma referência reativa locale.

Chamando useI18n

Chame useI18n() dentro de <script setup> e extraia o que você precisa.

import { useI18n } from "vue-i18n"

const { t, locale } = useI18n()

A função t

t(key) retorna a string traduzida para a localidade ativa. Ela é o equivalente, no script, de $t nos modelos.

const { t } = useI18n()

const title = t("greeting") // "Hello" when locale is en

Interpolação com t

Passe um objeto de valores nomeados como segundo argumento para preencher os espaços reservados, exatamente como nos modelos.

const { t } = useI18n()

const msg = t("welcome", { name: "Alice" })
// message "Welcome, {name}!" => "Welcome, Alice!"

Usando t para strings dinâmicas

Como t é uma função comum, você pode usá-la em qualquer parte da lógica do script — para criar mensagens de notificação, rótulos calculados ou textos de validação.

import { computed } from "vue"
const { t } = useI18n()

const label = computed(() => t("nav.home"))

A referência de localidade

locale é uma referência reativa que contém o código do idioma atual. Lê-la informa qual é o idioma ativo.

const { locale } = useI18n()
console.log(locale.value) // "en"

Trocando o idioma globalmente

Atribuir um valor a locale.value altera o idioma ativo em todo o app. Toda chamada de t e todo $t nos modelos são renderizados novamente de forma reativa com o novo idioma.

function switchToTurkish() {
  locale.value = "tr"
}
// All translated text updates automatically.

Um seletor de idioma

Um seletor simples associa um campo de seleção a locale. Como ele é reativo, escolher uma opção altera toda a interface instantaneamente.

<template>
  <select v-model="locale">
    <option value="en">English</option>
    <option value="tr">Turkce</option>
  </select>
</template>

<script setup>
import { useI18n } from "vue-i18n"
const { locale } = useI18n()
</script>

$t versus t

Eles fazem a mesma coisa em dois contextos:

  • $t — disponível automaticamente nos modelos, sem importação.
  • t — vem de useI18n() e é usado no script e na lógica reativa.

Prefira t ao calcular strings no código.

Mensagens com escopo versus globais

useI18n() pode receber opções para usar mensagens locais do componente. Sem opções, ele usa a instância global — a escolha comum para traduções de todo o app.

const { t } = useI18n() // global messages

// component-scoped (advanced):
// const { t } = useI18n({
//   messages: { en: { ok: "OK" }, tr: { ok: "Tamam" } }
// })

Persistindo a escolha

O idioma é uma preferência do usuário, portanto, persista-o. Leia um valor salvo na inicialização e grave-o sempre que locale mudar, usando um observador.

import { watch } from "vue"
const { locale } = useI18n()

watch(locale, (val) => localStorage.setItem("lang", val))

Verificação rápida

Verifique sua compreensão de useI18n.

Recapitulação

Você aprendeu a API de tradução em tempo de execução:

  • useI18n() retorna t e uma referência reativa locale.
  • t(key) traduz; t(key, { name }) interpola espaços reservados.
  • Use t na lógica do script e em valores calculados; use $t nos modelos.
  • Defina locale.value para trocar o idioma globalmente e de forma reativa.
  • Persista a escolha usando um watch em locale.

Perguntas Frequentes

A aula “Composable useI18n e função t()” é grátis?

Sim — o texto completo de “Composable useI18n e função t()” é 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 “Composable useI18n e função t()”?

useI18n(), t('key'), $t nos templates, alternância com locale.value e detecção de localidade. 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 2 de 4.

Quanto tempo leva a aula “Composable useI18n e função t()”?

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

  1. Configuração do vue-i18n e arquivos de mensagens
  2. Composable useI18n e função t()
  3. Pluralização e mensagens vinculadas
  4. Formatação de números, datas e moedas
← Voltar para Vue Academy