Vue langsys-js-vue

Eine schlanke Vue-3-Anbindung über langsys-js-typescript, aufgebaut auf Composables, die die Basis-Signale in shallowRefs überführen. Die Phrase in Ihrem Code ist zugleich der Lookup-Schlüssel und der Standardtext der Basissprache.

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.

Installieren

npm install langsys-js-vue

Noch kein Projekt und keine Schlüssel? Mit dem Schnellstart haben Sie beides in zwei Minuten.

Initialisieren

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

Signale lesen

Sie müssen den Locale-Store – oder ein beliebiges Basis-SDK-Signal, etwa einen Store, den Sie außerhalb von Vue teilen – reaktiv lesen? useSignal(store) überführt ihn in eine shallowRef, die Vue nachverfolgen kann. (Svelte braucht nichts Vergleichbares: Die Signale erfüllen dessen Store-Vertrag von Haus aus.)

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

Interaktiver Playground

Bearbeiten Sie Phrase und Kategorie, legen Sie die Parameter als Felder oder als rohes JSON fest, wechseln Sie dann die Locale und sehen Sie live zu, wie das echte SDK übersetzt.

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>

Welches soll ich verwenden?

Faustregel: String → useT() · Satz mit Markup → <Phrase> · Markup-Bereich → <Translate> · unantastbar → <DontTranslate>.

Jede Inhaltskomponente live links dargestellt; der Code, der sie erzeugt, rechts.

Ansehen Die Demo-Ausschnitte zu diesen Primitiven finden sich vorerst auf der Svelte-Seite – die Oberfläche ist identisch, nur die Syntax unterscheidet sich: <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>

Genusübereinstimmung

Spanisch, Französisch oder Russisch flektieren {username} has been invited je nach der Person, um die es geht. Langsys generiert diese Varianten bei der Übersetzung – genauso wie Pluralformen – und das Argument trägt den Namen der Variablen mit angehängtem _gender: male, female oder other. Übergeben Sie es immer, wenn Sie es kennen. So funktioniert es und so finden Sie die Phrasen, die es benötigen →

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

Sie kennen das Geschlecht nicht? Übergeben Sie 'other' explizit – das ist der neutrale Zweig. Fehlt der Wert trotzdem, verwendet das SDK automatisch den other-Zweig (langsys-js-typescript ab Version 0.6.4), sodass der Satz weiterhin korrekt klingt. TypeScript lehnt username_gender in einem Inline-Parameterobjekt derzeit ab (Fehler TS2353; ein Fix wird geprüft). Bis dieser verfügbar ist, erstellen Sie das Parameterobjekt zuerst und übergeben Sie die Variable.

Serverseitiges Rendering

Rufen Sie den Katalog auf dem Server ab (Nuxt) und übergeben Sie ihn an den Client, damit das SDK startet, ohne ihn erneut abzurufen. Das SDK übersetzt im Browser, daher liegt das auf dem Server gerenderte HTML bis zum Start in der Basissprache vor.

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