Langsys mit Nuxt

Das Muster ist überall dasselbe: Der Server ruft den Katalog einmal ab (der Schreibschlüssel bleibt serverseitig), und der Client initialisiert langsys-js-vue mit diesem Seed und einem schreibgeschützten Schlüssel – ohne doppelten Abruf. Die Übersetzung selbst erfolgt im Browser: Das HTML, das der Server sendet, liegt in der Basissprache vor, die auch von Suchmaschinen indexiert wird, und die Seite wechselt beim Laden in die Sprache des Besuchers.

1 · Eine Server-Route fungiert als Proxy für den Katalog

Eine Nitro-Route ruft den Katalog ab, sodass der Write-Key in der privaten Runtime-Konfiguration bleibt – der Browser kommuniziert nur mit Ihrer eigenen /api-Route. Der Write-Key bleibt auf dem Server; der Client erhält einen schreibgeschützten Schlüssel. Beide Seiten sehen denselben Katalog – der Client überspringt lediglich den ersten Abruf.

// 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 · Beim SSR vorbefüllen, im Client initialisieren

useAsyncData führt den Abruf auf dem Server aus und serialisiert die Nutzdaten in die Seite, sodass der Client daraus initialisiert wird, ohne erneut abzurufen. Init läuft in onMounted – das SDK ist ein Browser-SDK; die Serverhälfte von Nuxt liefert nur die Daten.

<!-- 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 · Überall unten verwenden

Ab hier ist es das reine Vue-SDK: useT() in jeder Komponente, store.set() zum Wechseln der Sprache. Wenn Ihre App die Sprache bereits in einer Ref hält (Pinia, useState), passen Sie sie mit refToLocaleSource der Vue-Anbindung an, statt auf createLocaleStore umzusteigen.

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

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