@sonenta/vue-i18n

Official Vue 3 binding for Sonenta i18n. A thin reactive layer over @sonenta/i18n-core (the shared engine), so it resolves translations identically to @sonenta/react-i18next.

Beta (0.9.x). API-complete for the core surface; promoted to 1.0.0 after the Vue demo validates. i18next + vue are peers.

npm install @sonenta/vue-i18n i18next vue

Quick start

// main.ts
import { createApp } from "vue";
import { createSonentaI18n } from "@sonenta/vue-i18n";
import App from "./App.vue";

createApp(App)
  .use(
    createSonentaI18n({
      token: "your-api-key",
      projectUuid: "your-project-uuid",
      defaultLocale: "fr",
      // surfaces: ["desktop", "mobile"], a11y, etc. — same config as react.
    }),
  )
  .mount("#app");

<script setup lang="ts">
import { useTranslation } from "@sonenta/vue-i18n";
const { t, ready, language, availableLanguages, setLanguage } = useTranslation();
</script>

<template>
  <h1>{{ t("home.title") }}</h1>
  <p>{{ t("home.greeting", { name: "Ada" }) }}</p>
  <select :value="language" @change="e => setLanguage((e.target as HTMLSelectElement).value)">
    <option v-for="l in availableLanguages" :key="l.code" :value="l.code">
      {{ l.native_name ?? l.code }}
    </option>
  </select>
</template>

useTranslation(ns?)

Returns a reactive API (all values track language / surface / bundle changes):

| Member | Description | | --- | --- | | t(key, opts?) | Translate (reactive). | | ready | ComputedRef<boolean> — initial bundles loaded. | | language | ComputedRef<Locale>. | | availableLanguages | ComputedRef<AvailableLanguage[]>. | | surface | ComputedRef<Surface \| undefined>. | | setLanguage(locale) / setSurface(s) / setPlainLanguage(on) | mutators. | | aria(key, ns?) / alt(key, ns?) | a11y surfaces (#989). | | dir / nativeName / languageMeta | language catalog (#803). | | i18n | the underlying engine (escape hatch). |

A global $t is also installed for templates that don't use the composable.

Notes

• Built on the same engine as every Sonenta binding — surfaces, a11y, plurals, missing-key streaming, and the on-screen key registry all behave identically to @sonenta/react-i18next.
• Add-ons (@sonenta/feedback, @sonenta/realtime, @sonenta/in-context) ship Vue adapters separately.

License

MIT © Sonenta