Vue langsys-js-vue

langsys-js-typescript üzerine kurulu, temel sinyalleri shallowRef'lere bağlayan composable'lar üzerine inşa edilmiş ince bir Vue 3 bağlayıcısı. Kodunuzdaki ifade hem arama anahtarı hem de temel dildeki varsayılan metindir.

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.

Kurulum

npm install langsys-js-vue

Henüz projeniz veya anahtarlarınız yok mu? Hızlı başlangıç ikisini de iki dakikada sağlar.

Başlat

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

Sinyalleri okuma

Dil deposunu — veya Vue dışında paylaştığınız bir depo gibi herhangi bir temel SDK sinyalini — reaktif olarak okumanız mı gerekiyor? useSignal(store) onu Vue'nun izleyebileceği bir shallowRef'e bağlar. (Svelte'in buna denk bir şeye ihtiyacı yoktur: sinyaller onun depo sözleşmesini doğrudan karşılar.)

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

Etkileşimli deneme alanı

İfadeyi ve kategoriyi düzenleyin, parametreleri alan olarak veya ham JSON olarak ayarlayın, ardından dili değiştirin ve gerçek SDK'nın canlı olarak çeviri yapmasını izleyin.

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>

Hangisini kullanmalıyım?

Pratik kural: dize → useT() · biçimlendirme içeren cümle → <Phrase> · biçimlendirme içeren bölge → <Translate> · dokunulmaz → <DontTranslate>.

Her içerik bileşeni solda canlı olarak oluşturulur; onu üreten kod sağdadır.

İzle Bu temel yapılara ait demo kesitleri şimdilik Svelte sayfasında yer alıyor — arayüz aynı, yalnızca sözdizimi farklı: <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>

Cinsiyet uyumu

İspanyolca, Fransızca veya Rusça {username} has been invited ifadesini, söz konusu kişiye göre çekimler. Langsys bu dalları çeviri sırasında, çoğulları oluşturduğu gibi oluşturur; argümanın adı değişkenin adına _gender eklenerek verilir: male, female veya other. Bildiğiniz her durumda iletin. Nasıl çalışır ve buna ihtiyaç duyan ifadeler nasıl bulunur →

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

Cinsiyeti bilmiyor musunuz? 'other' değerini açıkça iletin; bu, nötr daldır. Yine de eksikse SDK sizin yerinize other dalını kullanır (langsys-js-typescript 0.6.4 ve sonrası), böylece cümle yine doğru okunur. TypeScript şu anda satır içi params nesnesindeki username_gender alanını reddediyor (TS2353 hatası; düzeltme inceleme aşamasında). Düzeltme yayımlanana kadar önce params nesnesini oluşturun ve değişkeni iletin.

Sunucu tarafı oluşturma

Kataloğu sunucuda (Nuxt) çekip istemciye iletin; böylece SDK onu yeniden çekmeden başlar. SDK tarayıcıda çeviri yapar, bu nedenle sunucuda oluşturulan HTML, SDK başlayana kadar temel dilde kalır.

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