Langsys với Nuxt

Mô hình này giống nhau ở mọi nơi: máy chủ tải danh mục một lần (khóa ghi luôn nằm ở phía máy chủ), còn máy khách khởi tạo langsys-js-vue từ dữ liệu nạp sẵn đó bằng khóa chỉ đọc — không tải trùng lặp. Việc dịch diễn ra ngay trong trình duyệt: HTML do máy chủ gửi về dùng ngôn ngữ gốc, cũng là nội dung mà các công cụ tìm kiếm lập chỉ mục, và trang sẽ chuyển sang ngôn ngữ của khách truy cập khi tải xong.

1 · Một route phía máy chủ làm proxy cho danh mục

Một route Nitro lấy danh mục về để khóa ghi nằm trong cấu hình runtime riêng tư — trình duyệt chỉ giao tiếp với route /api của chính bạn. Khóa ghi luôn ở trên máy chủ; máy khách nhận khóa chỉ đọc. Cả hai phía đều thấy cùng một danh mục — máy khách chỉ bỏ qua lần tải ban đầu.

// 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 · Nạp sẵn dữ liệu khi SSR, khởi tạo ở phía máy khách

useAsyncData chạy việc tải dữ liệu trên máy chủ và tuần tự hóa payload vào trang, để máy khách khởi tạo từ đó mà không cần tải lại. Init chạy trong onMounted — SDK là SDK dành cho trình duyệt; phần máy chủ của Nuxt chỉ cung cấp dữ liệu.

<!-- 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 · Dùng ở bất kỳ đâu bên dưới

Từ đây trở đi, nó chính là SDK Vue thuần: dùng useT() trong bất kỳ component nào, và store.set() để chuyển ngôn ngữ. Nếu ứng dụng của bạn đã quản lý ngôn ngữ trong một ref (Pinia, useState), hãy điều chỉnh nó bằng refToLocaleSource của lớp liên kết Vue thay vì chuyển sang createLocaleStore.

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

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