Vue langsys-js-vue

Een dunne Vue 3-binding bovenop langsys-js-typescript, gebouwd op composables die de basissignalen overbruggen naar shallowRefs. De zin in je code is zowel de opzoeksleutel als de standaardtekst in de basistaal.

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.

Installeren

npm install langsys-js-vue

Nog geen project of sleutels? Met de Snelstart heb je beide in twee minuten.

Initialiseren

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

Signalen lezen

Wil je de locale-store — of een ander signaal van de basis-SDK, zoals een store die je buiten Vue deelt — reactief uitlezen? useSignal(store) koppelt het aan een shallowRef die Vue kan volgen. (Svelte heeft hier geen equivalent voor nodig: de signalen voldoen van nature aan het store-contract.)

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

Interactieve playground

Bewerk de zin en categorie, stel de parameters in als velden of ruwe JSON, wissel daarna van locale en zie hoe de echte SDK live vertaalt.

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>

Welke moet ik gebruiken?

Vuistregel: string → useT() · zin met opmaak → <Phrase> · gedeelte met opmaak → <Translate> · onaantastbaar → <DontTranslate>.

Elke contentcomponent live weergegeven aan de linkerkant; de code die hem produceert aan de rechterkant.

Bekijken De democlips voor deze primitieven staan voorlopig op de Svelte-pagina — de interface is identiek, alleen de syntaxis verschilt: <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>

Geslachtsovereenkomst

Spaans, Frans of Russisch verbuigen {username} has been invited naar de persoon over wie het gaat. Langsys genereert die varianten tijdens het vertalen — op dezelfde manier als meervoudsvormen — en het argument is vernoemd naar de variabele, met _gender erachter: male, female of other. Geef het mee wanneer je het weet. Hoe het werkt en hoe je de zinnen vindt die het nodig hebben →

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

Weet je het geslacht niet? Geef 'other' dan expliciet mee — dat is de neutrale tak. Ontbreekt die toch, dan kiest de SDK voor jou de other-tak (langsys-js-typescript 0.6.4 en later), zodat de zin nog steeds goed leest. TypeScript weigert momenteel username_gender in een inline params-object (fout TS2353; een oplossing wordt beoordeeld). Tot die beschikbaar is, bouw je eerst het params-object en geef je de variabele mee.

Server-side rendering

Haal de catalogus op de server op (Nuxt) en geef die door aan de client, zodat de SDK start zonder hem opnieuw op te halen. De SDK vertaalt in de browser, dus de door de server gerenderde HTML staat in de basistaal totdat de SDK start.

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