Vue

O que você pode fazer:

• Traduza com composables (useT, useLocale) que reagem a cada troca de idioma
• Vincule o idioma direto a um select: useLocale() retorna um computed gravável
• Mantenha chaves e params totalmente tipados, com autocompletar das suas próprias mensagens
• Zero vazamentos: as assinaturas são por componente e limpas via onScopeDispose

Instalação

Instale o pacote com o seu gerenciador de pacotes preferido.

$ pnpm add @verbaly/vue

Setup e composables

import { verbalyPlugin } from '@verbaly/vue';
import { verbaly } from 'virtual:verbaly';

app.use(verbalyPlugin(verbaly));

<script setup>
import { useT, useLocale } from '@verbaly/vue';

const t = useT();
const locale = useLocale();  // writable: locale.value = 'en'
</script>

<template>
  <p>{{ t('inbox', { count: 3 }) }}</p>
</template>

• As assinaturas são por componente e limpas ao desmontar via onScopeDispose.
• useLocale() retorna um computed gravável, então vincule-o direto a um select.

Escreva o texto no lugar

Desde 0.20.0 o compilador também lê seus arquivos .vue: escreva o texto fonte no template, em um binding ou no script setup, e ele é extraído, ganha sua chave e seus tipos ao salvar. Sem inventar chaves, sem tocar em catálogos.

<template>
  <p>{{ t`Hola ${user.name}` }}</p>
  <a :title="t`Abrir ajustes`">…</a>
</template>

<!-- extracted on save; the build rewrites both to t('key', …) -->

Prefere chaves legíveis? t.id('inbox.title') antes do template extrai sob o seu id em vez de um hash do conteúdo.

Rich text com <Trans>

A mesma ideia; no Vue cada tag nomeado é uma render function que envolve seus filhos:

<script setup>
import { Trans } from '@verbaly/vue';
import { h } from 'vue';

const components = { terms: (c) => h('a', { href: '/terms' }, c) };
</script>

<template>
  <Trans id='agree' :components='components' />
</template>

Para links simples dispense a render function: a prop links (0.11.0) mapeia nomes de tag para hrefs (uma string ou um objeto href/target/rel). components ganha no mesmo nome; hrefs javascript: são bloqueados.

Desde 0.23.0 as tags da whitelist (<em>, <code>…) renderizam como elementos reais sem precisar de render function, a mesma whitelist segura do interpretador de DOM; richTags a substitui, e a prop instance renderiza sem o plugin.

Nuxt

As páginas renderizadas no servidor chegam já traduzidas no idioma do visitante, e o cliente hidrata com o mesmo locale e o mesmo catálogo, sem flash de texto sem tradução nem mismatch de hidratação.

• Cada página é renderizada no idioma do visitante, escolhido a cada request a partir do cookie ou do header Accept-Language
• Sem flash de texto sem tradução: o HTML que o servidor envia e a página já hidratada são idênticos, catálogo incluído
• Cada request tem sua própria instância, então dois visitantes simultâneos nunca veem o idioma um do outro
• Zero fiação: uma única entrada de módulo substitui o setup do plugin do Vite, a negociação e a sincronização do atributo lang

O Nuxt precisa do módulo (@verbaly/nuxt) junto aos bindings do Vue:

$ pnpm add verbaly @verbaly/nuxt @verbaly/vue

Conecte tudo

Uma linha no nuxt.config. O módulo conecta o plugin do Vite (extração ao vivo e virtual:verbaly), negocia o locale por request e mantém o atributo lang sincronizado:

export default defineNuxtConfig({
  modules: ['@verbaly/nuxt'],
});

// locales live in your verbaly.config (npx verbaly init), or inline:
export default defineNuxtConfig({
  modules: [['@verbaly/nuxt', { locales: ['en', 'es', 'pt'] }]],
});

Daqui em diante é @verbaly/vue normal: useT() / useLocale() e o <Trans> funcionam sem mudanças em cada componente.

Trocar de idioma

switchLocale (export do core desde o 0.18.0) carrega o catálogo primeiro, troca ao vivo e grava o cookie que o servidor lê, então o próximo request SSR já corresponde:

<script setup>
import { switchLocale } from 'verbaly';
import { useVerbaly } from '@verbaly/vue';

const verbaly = useVerbaly();
</script>

<template>
  <button @click="switchLocale(verbaly, 'es')">Español</button>
</template>

• O cookie padrão é verbaly-locale (a mesma identidade da key de storage do core); cookie: false nas opções do módulo o desativa, para Accept-Language puro.
• fallback é por padrão seu locale fonte; a negociação entende q-values e estreita regiões (es-PE casa com es).
• ssr: false também está coberto: o módulo resolve o locale no browser (cookie, depois navigator.languages, depois fallback).
• Sem dependência do próprio Nuxt: o módulo é tipado estruturalmente, sem @nuxt/kit. A chave verbaly em nuxt.config.ts fica totalmente tipada (autocompletar e detecção de erros de digitação), e continua compatível com o Nuxt 4.
• Site totalmente estático (nuxi generate)? Prefira saída pré-traduzida por locale com verbaly render.