Vue langsys-js-vue

Binding Vue 3 yang tipis di atas langsys-js-typescript, dibangun dari composable yang menjembatani sinyal dasar ke dalam shallowRef. Frasa di kode Anda berfungsi sekaligus sebagai kunci pencarian dan default bahasa dasar.

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.

Instal

npm install langsys-js-vue

Belum punya proyek atau kunci? Mulai Cepat memberi Anda keduanya dalam dua menit.

Inisialisasi

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,
});

Membaca sinyal

Perlu membaca penyimpanan locale — atau sinyal SDK dasar apa pun, seperti store yang Anda bagikan di luar Vue — secara reaktif? useSignal(store) menjembataninya ke dalam shallowRef yang dapat dilacak Vue. (Svelte tidak memerlukan padanannya: sinyalnya secara native memenuhi kontrak store-nya.)

<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>

Playground interaktif

Ubah frasa dan kategori, atur parameter sebagai kolom atau JSON mentah, lalu ganti locale dan saksikan SDK asli menerjemahkan secara langsung.

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>

Mana yang harus saya gunakan?

Aturan praktis: string → useT() · kalimat dengan markup → <Phrase> · area markup → <Translate> · tidak boleh diubah → <DontTranslate>.

Setiap komponen konten dirender langsung di sebelah kiri; kode yang menghasilkannya di sebelah kanan.

Tonton Cuplikan demo untuk primitif ini untuk sementara ada di halaman Svelte — permukaannya identik, hanya sintaksnya yang berbeda: <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>

Kesesuaian gender

Bahasa Spanyol, Prancis, atau Rusia memberi infleksi pada {username} has been invited sesuai orang yang dimaksud. Langsys menghasilkan cabang-cabang itu saat penerjemahan — dengan cara yang sama seperti menghasilkan bentuk jamak — dan argumennya dinamai sesuai variabelnya, dengan tambahan _gender: male, female, atau other. Berikan nilainya setiap kali Anda mengetahuinya. Cara kerjanya, dan cara menemukan frasa yang membutuhkannya →

<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>

Tidak tahu gendernya? Berikan 'other' secara eksplisit — itu adalah cabang netral. Jika tidak ada pun, SDK akan mengambil cabang other untuk Anda (langsys-js-typescript 0.6.4 dan yang lebih baru), sehingga kalimat tetap terbaca dengan benar. Saat ini TypeScript menolak username_gender dalam objek parameter inline (error TS2353; perbaikannya sedang ditinjau). Sampai perbaikan itu dirilis, buat objek parameter terlebih dahulu lalu berikan variabelnya.

Rendering di sisi server

Ambil katalog di server (Nuxt) dan serahkan ke klien, sehingga SDK mulai tanpa perlu mengambilnya lagi. SDK menerjemahkan di browser, jadi HTML hasil render server masih dalam bahasa dasar sampai SDK dimulai.

// 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',
});