Vue langsys-js-vue

Một lớp liên kết Vue 3 mỏng bên trên langsys-js-typescript, được xây dựng bằng các composable nối các signal cơ sở vào shallowRef. Cụm từ trong mã của bạn vừa là khóa tra cứu vừa là bản mặc định bằng ngôn ngữ gốc.

Add Langsys translation to this Vue app.

1. Read https://docs.langsys.dev/llms.txt, then follow
   https://docs.langsys.dev/learn/sdk/vue/ for the install and setup.
2. The English text in the code is the translation key. Wrap user-facing
   strings as they are: no keys file, no extraction step, and no
   hand-written plural or gender branches (Langsys generates those).
3. Read the Langsys project id and API key from environment variables.
   The write key is for development and servers only; anything shipped
   to the browser gets the read-only key.
4. Keep brand names and user-generated content out of translation.

Cài đặt

npm install langsys-js-vue

Chưa có dự án hoặc khóa? Bắt đầu nhanh giúp bạn có cả hai chỉ trong hai phút.

Khởi tạo

import { LangsysApp, createLocaleStore } from 'langsys-js-vue';

const locale = createLocaleStore('en-US');

await LangsysApp.init({
  projectid: import.meta.env.VITE_LANGSYS_PROJECT_ID,
  key: import.meta.env.VITE_LANGSYS_API_KEY, // read-only in the browser
  UserLocaleStore: locale,
});

Đọc signal

Cần đọc kho ngôn ngữ — hoặc bất kỳ signal nào của SDK cơ sở, chẳng hạn một kho bạn dùng chung bên ngoài Vue — theo cách phản ứng? useSignal(store) sẽ nối nó vào một shallowRef mà Vue có thể theo dõi. (Svelte không cần thứ tương đương: các signal vốn đã đáp ứng giao kèo store của nó.)

<script setup>
import { useSignal, useCurrentLocale } from 'langsys-js-vue';

// Vue tracks only its own refs — a base-SDK signal is invisible to it.
// useSignal(signal) bridges it into a shallowRef Vue can track.
const selected = useSignal(locale);   // your createLocaleStore(...)
const loaded = useCurrentLocale();    // shortcut for the loaded locale
</script>

<template>
  <footer>selected {{ selected }} · loaded {{ loaded }}</footer>
</template>

Sân chơi tương tác

Chỉnh sửa cụm từ và danh mục, đặt tham số dưới dạng trường hoặc JSON thô, rồi chuyển ngôn ngữ và xem SDK thật dịch trực tiếp.

const t = useT();

<p>{{ t("Hello, {name}! You have {count} new messages.", "Greetings", {"name":"Sarah","count":3}) }}</p>

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

<template>
  <p>{{ t('Hello, {name}!', 'Greetings', { name }) }}</p>
</template>

Tôi nên dùng cái nào?

Quy tắc ngón tay cái: chuỗi → useT() · câu có markup → <Phrase> · vùng có markup → <Translate> · không được đụng đến → <DontTranslate>.

Mỗi thành phần nội dung được kết xuất trực tiếp ở bên trái; đoạn mã tạo ra nó ở bên phải.

Xem Hiện tại, các đoạn demo cho những thành phần cơ bản này nằm ở trang Svelte — giao diện sử dụng giống hệt nhau, chỉ khác cú pháp: <Translate> (1:04) · <Phrase> (1:06) · <DontTranslate> (0:34).

<script setup>
import { Translate } from 'langsys-js-vue';
</script>

<template>
  <Translate category="Home">
    <h3>Welcome to our store</h3>
    <p>Browse the catalog in your language.</p>
  </Translate>
</template>

<Phrase category="Cart" :params="{ name: 'Sarah', count: 3 }">
  Hi %name%, you have %count% items in your cart.
</Phrase>

<!-- Inside a translated region, the marked span alone stays verbatim. -->
<Translate category="Tour">
  <p>Welcome! <DontTranslate>This sentence always stays in English.</DontTranslate> Thanks for visiting!</p>
</Translate>

Hòa hợp giới tính

Tiếng Tây Ban Nha, Pháp hay Nga biến đổi {username} has been invited theo người được nhắc đến. Langsys tạo các nhánh đó trong quá trình dịch — giống như cách tạo dạng số nhiều — và tên đối số được đặt theo tên biến, kèm thêm _gender: male, female hoặc other. Hãy truyền giá trị này bất cứ khi nào bạn biết. Cách hoạt động và cách tìm các cụm từ cần đến nó →

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

<template>
  <!-- Pass the agreement argument alongside the value it inflects.
       user.gender is 'male' | 'female' | 'other'. -->
  <p>{{ t('{username} has been invited', 'Team',
       { username: props.user.name, username_gender: props.user.gender }) }}</p>
</template>

Không biết giới tính? Hãy truyền 'other' một cách tường minh — đây là nhánh trung tính. Nếu thiếu giá trị này, SDK vẫn sẽ tự động dùng nhánh other cho bạn (langsys-js-typescript 0.6.4 trở lên), nên câu vẫn hiển thị đúng. Hiện tại TypeScript từ chối username_gender trong đối tượng params viết trực tiếp (lỗi TS2353; bản sửa đang được xem xét). Cho đến khi bản sửa được phát hành, hãy tạo đối tượng params trước rồi truyền biến vào.

Kết xuất phía máy chủ

Tải danh mục trên máy chủ (Nuxt) và chuyển cho máy khách, để SDK khởi động mà không phải tải lại. SDK dịch ngay trong trình duyệt, nên HTML được kết xuất trên máy chủ sẽ ở ngôn ngữ gốc cho đến khi SDK khởi động.

// Nuxt: the server plugin seeds the catalog, the client init reuses it.
LangsysApp.init({
  projectid, key,
  UserLocaleStore: locale,
  initialTranslations,        // fetched on the server
  initialTranslationsLocale,  // fetched on the server
  ssrTokenStrategy: 'client',
});