Vue langsys-js-vue

langsys-js-typescript के ऊपर एक हल्की Vue 3 बाइंडिंग, जो कंपोज़ेबल्स पर बनी है और बेस सिग्नल को shallowRef में जोड़ती है। आपके कोड में मौजूद फ़्रेज़ ही लुकअप कुंजी भी है और बेस भाषा का डिफ़ॉल्ट भी।

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.

इंस्टॉल करें

npm install langsys-js-vue

अभी तक प्रोजेक्ट या कीज़ नहीं हैं? क्विकस्टार्ट दो मिनट में आपको दोनों दिला देता है।

इनिशियलाइज़ करें

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

सिग्नल पढ़ना

क्या लोकेल स्टोर — या कोई भी बेस-SDK सिग्नल, जैसे Vue के बाहर साझा किया जाने वाला स्टोर — रिएक्टिव रूप से पढ़ना है? useSignal(store) उसे एक shallowRef में जोड़ देता है जिसे Vue ट्रैक कर सकता है। (Svelte को ऐसे किसी विकल्प की ज़रूरत नहीं: सिग्नल उसके स्टोर कॉन्ट्रैक्ट को स्वाभाविक रूप से पूरा करते हैं।)

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

इंटरैक्टिव प्लेग्राउंड

फ़्रेज़ और श्रेणी बदलें, पैरामीटर को फ़ील्ड या रॉ JSON के रूप में सेट करें, फिर लोकैल बदलें और असली SDK को लाइव अनुवाद करते देखें।

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>

मैं कौन-सा उपयोग करूँ?

मोटा नियम: स्ट्रिंग → useT() · मार्कअप वाला वाक्य → <Phrase> · मार्कअप का क्षेत्र → <Translate> · जिसे छूना नहीं है → <DontTranslate>।

हर कंटेंट कंपोनेंट बाईं ओर लाइव रेंडर किया गया है; उसे बनाने वाला कोड दाईं ओर।

देखें इन प्रिमिटिव के डेमो कट फ़िलहाल Svelte पेज पर हैं — सतह एक जैसी है, केवल सिंटैक्स अलग है: <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>

लिंग-अनुरूपता

स्पैनिश, फ़्रेंच या रूसी में {username} has been invited का रूप उस व्यक्ति के अनुसार बदलता है जिसके बारे में बात हो रही है। Langsys अनुवाद के दौरान ये शाखाएँ अपने आप बनाता है — ठीक वैसे ही जैसे बहुवचन रूप बनाता है — और आर्ग्युमेंट का नाम वेरिएबल के नाम में _gender जोड़कर रखा जाता है: male, female या other। जब भी यह जानकारी हो, इसे अवश्य दें। यह कैसे काम करता है, और जिन वाक्यांशों को इसकी ज़रूरत है उन्हें कैसे खोजें →

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

लिंग पता नहीं है? 'other' को स्पष्ट रूप से पास करें — यह तटस्थ ब्रांच है। अगर यह फिर भी न दिया गया हो, तो SDK आपके लिए other ब्रांच चुन लेता है (langsys-js-typescript 0.6.4 और उसके बाद के संस्करणों में), इसलिए वाक्य फिर भी सही पढ़ा जाता है। फ़िलहाल TypeScript इनलाइन params ऑब्जेक्ट में username_gender को अस्वीकार कर देता है (त्रुटि TS2353; फ़िक्स समीक्षा में है)। जब तक यह जारी नहीं होता, पहले params ऑब्जेक्ट बनाएँ और फिर वेरिएबल पास करें।

सर्वर-साइड रेंडरिंग

कैटलॉग को सर्वर (Nuxt) पर फ़ेच करें और क्लाइंट को सौंप दें, ताकि SDK उसे दोबारा फ़ेच किए बिना शुरू हो जाए। SDK ब्राउज़र में अनुवाद करता है, इसलिए उसके शुरू होने तक सर्वर-रेंडर किया गया HTML बेस भाषा में रहता है।

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