@sonenta/vue-i18n

@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