Langsys із Nuxt

Шаблон скрізь однаковий: сервер один раз отримує каталог (ключ запису залишається на стороні сервера), а клієнт ініціалізує langsys-js-vue із цього початкового набору за допомогою ключа лише для читання — без повторного завантаження. Сам переклад відбувається в браузері: HTML, який надсилає сервер, написаний базовою мовою, і саме його індексують пошукові системи, а під час завантаження сторінка перемикається на мову відвідувача.

1 · Серверний маршрут проксіює каталог

Маршрут Nitro отримує каталог, тож ключ запису залишається в приватній конфігурації середовища виконання — браузер взаємодіє лише з вашим власним маршрутом /api. Ключ запису залишається на сервері, а клієнт отримує ключ лише для читання. Обидві частини бачать один і той самий каталог — клієнт просто пропускає початкове завантаження.

// 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 · Заповнення під час SSR, ініціалізація на клієнті

useAsyncData виконує запит на сервері та серіалізує дані на сторінку, тож клієнт ініціалізується з них без повторного запиту. Ініціалізація виконується в onMounted — SDK є браузерним; серверна частина Nuxt лише постачає дані.

<!-- 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 · Використовуйте будь-де нижче

Далі це звичайний Vue SDK: useT() у будь-якому компоненті, store.set() для зміни локалі. Якщо ваш застосунок уже зберігає локаль у ref (Pinia, useState), адаптуйте її за допомогою refToLocaleSource з Vue-обгортки замість міграції на createLocaleStore.

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

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