Langsys avec Nuxt

Le principe est le même partout : le serveur récupère le catalogue une seule fois (la clé d'écriture reste côté serveur), et le client initialise langsys-js-vue à partir de ces données avec une clé en lecture seule, sans second appel. La traduction elle-même s'effectue dans le navigateur : le HTML envoyé par le serveur est dans la langue de base, celle-là même que les moteurs de recherche indexent, et la page bascule dans la langue du visiteur au fil de son chargement.

1 · Une route serveur sert de proxy pour le catalogue

Une route Nitro récupère le catalogue afin que la clé d'écriture reste dans la configuration d'exécution privée : le navigateur ne communique jamais qu'avec votre propre route /api. La clé d'écriture reste sur le serveur ; le client reçoit une clé en lecture seule. Les deux côtés voient le même catalogue — le client ignore simplement la récupération initiale.

// 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 · Pré-remplir pendant le SSR, initialiser côté client

useAsyncData exécute la requête sur le serveur et sérialise la charge utile dans la page, de sorte que le client s'initialise à partir de celle-ci sans refaire la requête. L'initialisation s'exécute dans onMounted — le SDK est un SDK navigateur ; la partie serveur de Nuxt ne fait que fournir les données.

<!-- 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 · Utilisez-le partout ci-dessous

À partir de là, c'est le SDK Vue classique : useT() dans n'importe quel composant, store.set() pour changer de langue. Si votre application gère déjà la langue dans une ref (Pinia, useState), adaptez-la avec refToLocaleSource de l'intégration Vue plutôt que de migrer vers createLocaleStore.

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

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