Vue langsys-js-vue

Une fine couche d'intégration Vue 3 au-dessus de langsys-js-typescript, construite sur des composables qui relient les signaux de base à des shallowRef. La phrase dans votre code sert à la fois de clé de recherche et de valeur par défaut dans la langue de base.

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.

Installer

npm install langsys-js-vue

Pas encore de projet ni de clés ? Le démarrage rapide vous fournit les deux en deux minutes.

Initialiser

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

Lecture des signaux

Besoin de lire de façon réactive le magasin de locales, ou tout signal du SDK de base, comme un magasin partagé en dehors de Vue ? useSignal(store) le relie à une shallowRef que Vue peut suivre. (Svelte n'a pas besoin d'équivalent : les signaux respectent nativement son contrat de store.)

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

Bac à sable interactif

Modifiez la phrase et la catégorie, définissez les paramètres sous forme de champs ou en JSON brut, puis changez de langue et regardez le vrai SDK traduire en direct.

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>

Lequel dois-je utiliser ?

Règle générale : chaîne → useT() · phrase avec balisage → <Phrase> · zone de balisage → <Translate> · intouchable → <DontTranslate>.

Chaque composant de contenu s’affiche en direct à gauche ; le code qui le produit se trouve à droite.

Regarder Les démos de ces primitives se trouvent pour l'instant sur la page Svelte : l'interface est identique, seule la syntaxe diffère : <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>

Accord en genre

L'espagnol, le français ou le russe accordent {username} has been invited selon la personne concernée. Langsys génère ces variantes pendant la traduction — comme il génère les pluriels — et l'argument porte le nom de la variable, suivi de _gender : male, female ou other. Transmettez-le dès que vous le connaissez. Comment cela fonctionne, et comment repérer les phrases concernées →

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

Vous ne connaissez pas le genre ? Passez explicitement 'other' — c’est la branche neutre. S’il manque malgré tout, le SDK utilise automatiquement la branche other (langsys-js-typescript 0.6.4 et versions ultérieures), si bien que la phrase reste correcte. TypeScript rejette actuellement username_gender dans un objet de paramètres en ligne (erreur TS2353 ; un correctif est en cours de revue). En attendant sa publication, construisez d’abord l’objet de paramètres, puis passez la variable.

Rendu côté serveur

Récupérez le catalogue sur le serveur (Nuxt) et transmettez-le au client, afin que le SDK démarre sans le récupérer à nouveau. Le SDK traduit dans le navigateur ; le HTML rendu côté serveur est donc dans la langue de base jusqu'à son démarrage.

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