Langsys com Nuxt

O padrão é o mesmo em todo lugar: o servidor busca o catálogo uma vez (a chave de escrita fica só no servidor) e o cliente inicializa o langsys-js-vue a partir desse seed com uma chave somente leitura — sem busca duplicada. A tradução em si acontece no navegador: o HTML enviado pelo servidor está no idioma base, que também é o que os mecanismos de busca indexam, e a página muda para o idioma do visitante durante o carregamento.

1 · Uma rota do servidor atua como proxy do catálogo

Uma rota Nitro busca o catálogo para que a chave de escrita permaneça na configuração privada de runtime — o navegador só se comunica com a sua própria rota /api. A chave de escrita fica no servidor; o cliente recebe uma chave somente leitura. As duas partes enxergam o mesmo catálogo — o cliente apenas pula a busca inicial.

// server/api/langsys.get.ts
export default defineEventHandler(async (event) => {
  const config = useRuntimeConfig();
  const locale = (getQuery(event).locale as string) ?? 'en-US';
  const res = await $fetch<{ data: unknown }>(
    `https://api.langsys.dev/api/projects/${config.langsysProjectId}/translations`,
    { query: { locale }, headers: { 'x-Authorization': config.langsysApiKey } }
  );
  return { locale, translations: res.data };
});

2 · Faça o seed durante o SSR e inicialize no cliente

useAsyncData executa a busca no servidor e serializa o payload na página, de modo que o cliente é inicializado a partir dele sem buscar novamente. A inicialização ocorre em onMounted — o SDK é um SDK de navegador; a metade de servidor do Nuxt apenas fornece os dados.

<!-- app.vue -->
<script setup lang="ts">
import { LangsysApp, createLocaleStore } from 'langsys-js-vue';
import type { iCategories } from 'langsys-js-vue';

const { data } = await useAsyncData('langsys', () =>
  $fetch('/api/langsys', { query: { locale: 'en-US' } })
);

const store = createLocaleStore(data.value!.locale);

onMounted(() => {
  LangsysApp.init({
    projectid: useRuntimeConfig().public.langsysProjectId,
    key: useRuntimeConfig().public.langsysApiKey, // read-only
    UserLocaleStore: store,
    initialTranslations: data.value!.translations as iCategories,
    initialTranslationsLocale: data.value!.locale,
    ssrTokenStrategy: 'client',
  });
});
</script>

<template>
  <NuxtPage />
</template>

3 · Use em qualquer lugar abaixo

A partir daqui, é o SDK Vue comum: useT() em qualquer componente, store.set() para trocar o idioma. Se o seu app já mantém o idioma em um ref (Pinia, useState), adapte-o com o refToLocaleSource da integração com Vue em vez de migrar para createLocaleStore.

<script setup>
import { useT } from 'langsys-js-vue';
const t = useT();
</script>

<template>
  <h1>{{ t('Welcome to our store', 'Home') }}</h1>
</template>