Documentation

The <T> component

Put your content in the <T> component, and it is translated. The original content is shown until its translation has loaded.

<T>This content will be translated</T>

Text with bindings works too. The content is translated again whenever it changes, for example when name changes:

<T>Hello {{ name }}</T>

All translations requested at the same time are sent to the API in a single request, and translations are cached. You can use as many <T> components as you like.

The plugin registers <T> globally. You can also import it: import { T } from '@magic-translate/vue'. Translate is the same component as T.

Props

PropTypeDescription
formality'informal' | 'formal'Sets the formality of the translation.
langLanguageOverrides the language set with createMagicTranslate.
<T lang="fr" formality="formal">How are you?</T>

Limitations

There are very few limitations:

  1. You cannot put Vue components inside the <T> component. Plain HTML elements are fine (see the example below), and scoped styles keep working on them.
  2. The content inside a <T> component cannot exceed 10 KB, which is about 5,000 characters.
<!-- this is OK, since <a> is a plain HTML element -->
<T>
  <a href="mailto:info@i42.ch">Please send us an email</a>
</T>


<!-- this does NOT work, since <MyButton> is a Vue component -->
<T>
  <MyButton>Click me</MyButton>
</T>

To translate attributes and other strings, use the useTranslate composable.

PreviousVueNextThe useTranslate composable