API

TolgeeProvider

Provides Tolgee context. Use in root of your application.

import { TolgeeProvider } from '@tolgee/vue';

<TolgeeProvider config="..."> ... content ... </TolgeeProvider>

Prop config

TolgeeConfiguration object, which is passed to Tolgee instance.

Prop loadingFallback?

String | JSX.Element - it is rendered when Tolgee is loading translations instead of provided content. You can pass custom loading element when using Vue with JSX.

Slot fallback

Alternative for loadingFallback use when you are using Vue with templates:

<TolgeeProvider :config="config">
  <App />
  <template v-slot:fallback>
    <div>Loading...</div>
  </template>
</TolgeeProvider>

T component

import { T } from '@tolgee/vue';

<T keyName="..." :parameters="{ param: '...' }" />

Prop keyName

String - translation key.

Prop parameters?

Record<string, string> - variable parameters, which can be used in translation value (read more about ICU message format).

Prop noWrap?

Boolean (default: false)

• false - in development mode translation will be wrapped
• true - use when wrapping in dev mode causes problems, in this case in-context translation won't work

Prop defaultValue?

String - You can pass default value, which will be rendered if there is no translation for this key (in selected language nor base language). If you won't provide this value, keyName will be rendered instead.

Composition API

useTranslate with function t

This composition function returns reactive function for translating in template.

<template>
  {{ t('example_key', 'Default value') }}
</template>

<script>
  export default {
    setup() {
      const t = useTranslate();
      return { t };
    }
  }
</script>

Function t has following interface:

function t(
  key: string,
  parameters: Record<string, string>,
  noWrap?: boolean,
  defaultValue?: string
): string;

// or with options object
function t(options: {
  key: string;
  parameters?: Record<string, string>;
  noWrap?: boolean;
  defaultValue?: string;
}): string;

useLanguage

Returns reactive language, which you can use for language switching.

<select v-model="language">
  ... languages ...
</select>

<script>
  export default {
    setup() {
      const language = useLanguage();
      return { language };
    }
  }
</script>

TolgeeMixin

info

We recommend using composition API instead of mixin, as it is more modern and cleaner approach.

import { TolgeeMixin } from '@tolgee/vue';

Function $t

Returns requested translation and also subscribes component to translation/language changes, so component will be re-rendered every time translation changes.

function $t(
  key: string,
  parameters: Record<string, string>,
  noWrap?: boolean,
  defaultValue?: string
): string;

// or with options object
function $t(options: {
  key: string;
  parameters?: Record<string, string>;
  noWrap?: boolean;
  defaultValue?: string;
}): string;

Parameter key

String - translation key.

Parameter parameters?

Record<string, string> - variable parameters, which can be used in translation value (read more about ICU message format).

Parameter noWrap?

Boolean (default: false)

• false - in development mode translation will be wrapped
• true - use when wrapping in dev mode causes problems, or you pass write it outside the DOM (for example document.title), in this case in-context translation won't work

Parameter defaultValue?

String - It will be rendered if there is no translation for this key (in selected language nor base language). If you won't provide this value, key will be rendered instead.

Property tolgeeLanguage

String - Reactive property, which contains current Tolgee language. Use it for reading or setting current language.

<select v-model="tolgeeLanguage">
  ... languages ...
</select>