Langsys met Nuxt

Het patroon is overal hetzelfde: de server haalt de catalogus één keer op (de schrijfsleutel blijft aan de serverkant) en de client initialiseert langsys-js-vue met die seed en een alleen-lezensleutel, zonder dubbele ophaalactie. Het vertalen zelf gebeurt in de browser: de HTML die de server verstuurt is in de basistaal, en die indexeren zoekmachines ook, waarna de pagina tijdens het laden overschakelt naar de taal van de bezoeker.

1 · Een serverroute fungeert als proxy voor de catalogus

Een Nitro-route haalt de catalogus op, zodat de schrijfsleutel in de privé-runtimeconfiguratie blijft — de browser praat altijd alleen met je eigen /api-route. De schrijfsleutel blijft op de server; de client krijgt een alleen-lezensleutel. Beide kanten zien dezelfde catalogus — de client slaat alleen het eerste ophalen over.

// 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 · Seed tijdens SSR, initialiseer op de client

useAsyncData voert de fetch uit op de server en serialiseert de payload in de pagina, zodat de client daaruit start zonder opnieuw op te halen. Init draait in onMounted — de SDK is een browser-SDK; het servergedeelte van Nuxt levert alleen de data.

<!-- 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 · Gebruik het overal hieronder

Vanaf hier is het gewoon de Vue-SDK: useT() in elke component, store.set() om van taalregio te wisselen. Als je app de taalregio al beheert in een ref (Pinia, useState), pas die dan aan met refToLocaleSource van de Vue-koppeling in plaats van over te stappen op createLocaleStore.

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

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