Vue

@transglot/vue connects @transglot/runtime to Vue 3.3 or later. Every t(...) call in a template re-renders when the locale changes or a new publish lands for the active locale.

InstallCopy Anchor Link

npm install @transglot/vue

Vue is a peer dependency. @transglot/runtime is installed with the package, and createClient, RuntimeError and the RuntimeClient and ClientOptions types are re-exported from it.

Minimal setupCopy Anchor Link

Install the plugin with the runtime client options:

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

createApp(App)
  .use(Transglot, {
    baseUrl: 'https://api.transglot.ai',
    project: 42,
    cdnKey: 'taicdn_your_key',
    locale: 'en',
    authIn: 'query',
  })
  .mount('#app');

Then translate in any component:

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

  <T keypath="home.cta" />
  <T tag="span" keypath="home.greeting" :params="{ name: 'Ada' }" />

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

The plugin starts loading the initial locale when you install it and does not wait for it. Until the bundle arrives, t returns keys; templates re-render when it lands.

APICopy Anchor Link

app.use(Transglot, options)Copy Anchor Link

options is either the runtime ClientOptions, from which the plugin creates the client, or { client } with a client you created. The plugin:

• provides the client to the app,
• registers T as a global component,
• adds $t as a global property for the Options API,
• starts loading the initial locale.

useTranslations()Copy Anchor Link

Returns { t, locale, setLocale, client }. Call it in setup. Throws [transglot] useTranslations()/useT() must be used after app.use(Transglot, …). when the plugin is not installed.

useT()Copy Anchor Link

Returns only the reactive t from useTranslations().

TCopy Anchor Link

Renders a translation as a bare text node, or inside an element when you pass tag.

$t in the Options APICopy Anchor Link

<template>
  <h1>{{ $t('home.title') }}</h1>
</template>

$t is reactive like t. The package does not declare it for TypeScript; if you use it in typed components, add the declaration yourself:

export {};

declare module 'vue' {
  interface ComponentCustomProperties {
    $t: (key: string, params?: Record<string, unknown>) => string;
  }
}

Other exportsCopy Anchor Link

• TRANSGLOT_KEY: the injection key the plugin provides. Its value is a TransglotContext ({ client, locale, revision }).
• Types: TransglotOptions, UseTranslations, TransglotContext.

Errors and server renderingCopy Anchor Link

The plugin does not catch a failed first load, and setLocale rejects with the runtime's RuntimeError (see Errors).

The plugin does not wait for translations, so server-rendered output contains keys. To handle load errors, or to render translated HTML on the server, create the client yourself, wait for the locale, then install the plugin with it:

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

const client = createClient({
  baseUrl: 'https://api.transglot.ai',
  project: 42,
  cdnKey: 'taicdn_your_key',
  locale: 'en',
  authIn: 'query',
});

try {
  await client.loadLocale('en');
} catch (error) {
  if (!(error instanceof RuntimeError)) throw error;
  console.error(error.slug, error.hint);
}

createApp(App).use(Transglot, { client }).mount('#app');

RelatedCopy Anchor Link

• JavaScript runtime
• Runtime SDKs overview