Langsys con Nuxt

Lo schema è lo stesso ovunque: il server recupera il catalogo una sola volta (la chiave di scrittura resta lato server) e il client inizializza langsys-js-vue da quel seed con una chiave di sola lettura, senza un secondo recupero. La traduzione vera e propria avviene nel browser: l'HTML inviato dal server è nella lingua di base, che è anche quella indicizzata dai motori di ricerca, e la pagina passa alla lingua del visitatore durante il caricamento.

1 · Una route del server fa da proxy al catalogo

Una route Nitro recupera il catalogo in modo che la chiave di scrittura resti nella configurazione runtime privata: il browser comunica sempre e solo con la tua route /api. La chiave di scrittura resta sul server, mentre il client riceve una chiave di sola lettura. Entrambe le parti vedono lo stesso catalogo: il client salta semplicemente il recupero iniziale.

// 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 · Esegui il seed durante l'SSR, inizializza sul client

useAsyncData esegue il fetch sul server e serializza il payload nella pagina, così il client si inizializza a partire da esso senza rieseguire il fetch. L'inizializzazione avviene in onMounted — l'SDK è un SDK per browser; la parte server di Nuxt si limita a fornire i dati.

<!-- 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 · Usalo ovunque qui sotto

Da qui in poi è il semplice SDK per Vue: useT() in qualsiasi componente, store.set() per cambiare lingua. Se la tua app gestisce già la lingua in un ref (Pinia, useState), adattala con refToLocaleSource del binding Vue invece di passare a createLocaleStore.

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

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