@transglot/vue

A thin Vue 3 adapter over @transglot/runtime. It gives you the Transglot plugin, a useTranslations() / useT() composable, and a reactive <T> component. Switching the locale re-renders every t(...) call site. Vue is a peer dependency; it is never bundled.

Install

npm install @transglot/vue @transglot/runtime vue

Quickstart

Register the plugin with your CDN options:

import { createApp } from 'vue';
import { Transglot } from '@transglot/vue';
import App from './App.vue';

createApp(App)
  .use(Transglot, {
    baseUrl: 'https://app.example.com',
    project: 42,
    cdnKey: 'taicdn_…',
    locale: 'en',
  })
  .mount('#app');

Translate anywhere with the composable:

<script setup lang="ts">
import { useTranslations } from '@transglot/vue';

const { t, locale, setLocale } = useTranslations();
</script>

<template>
  <h1>{{ t('home.title') }}</h1>
  <p>{{ t('cart.items', { count: 3 }) }}</p>

  <!-- The <T> component (registered globally by the plugin) -->
  <T keypath="home.cta" />
  <T tag="span" keypath="home.greeting" :params="{ name: 'Ada' }" />

  <button @click="setLocale(locale === 'en' ? 'fr' : 'en')">
    {{ locale }}
  </button>
</template>

API

• app.use(Transglot, options): options is the runtime ClientOptions (baseUrl, project, cdnKey, locale, …), or { client } to adopt a pre-built runtime client. The plugin loads the initial locale and registers <T> globally.
• useTranslations() → { t, locale, setLocale, client }. t(key, params?) is reactive; locale is a read-only ref; setLocale(locale) loads then switches (and re-renders).
• useT() → just the reactive t.
• <T keypath params tag>: renders a translation as text (a bare text node, or wrapped in tag).

Missing keys return the key (never throw); network/HTTP errors surface as the runtime's typed RuntimeError.