Langsys con Nuxt

El patrón es el mismo en todos los casos: el servidor obtiene el catálogo una sola vez (la clave de escritura permanece en el servidor) y el cliente inicializa langsys-js-vue a partir de esa precarga con una clave de solo lectura, sin descargas duplicadas. La traducción en sí ocurre en el navegador: el HTML que envía el servidor está en el idioma base, que es también el que indexan los motores de búsqueda, y la página cambia al idioma del visitante mientras se carga.

1 · Una ruta del servidor actúa como proxy del catálogo

Una ruta de Nitro obtiene el catálogo para que la clave de escritura permanezca en la configuración privada de runtime: el navegador solo se comunica con tu propia ruta /api. La clave de escritura se queda en el servidor; el cliente recibe una clave de solo lectura. Ambas partes ven el mismo catálogo; el cliente simplemente omite la obtención 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 · Precarga durante el SSR e inicializa en el cliente

useAsyncData ejecuta la solicitud en el servidor y serializa los datos en la página, de modo que el cliente se inicializa con ellos sin volver a solicitarlos. La inicialización se ejecuta en onMounted: el SDK es un SDK de navegador; la parte de Nuxt que corre en el servidor solo proporciona los datos.

<!-- 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 · Úsalo en cualquier lugar a partir de aquí

A partir de aquí es el SDK de Vue estándar: useT() en cualquier componente y store.set() para cambiar la configuración regional. Si tu app ya administra la configuración regional en un ref (Pinia, useState), adáptala con refToLocaleSource del enlace de Vue en lugar de migrar a createLocaleStore.

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

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