The useTranslate composable

Not everything fits in a component. Attributes such as placeholder or title take a string, and sometimes you need a translation in your script. For these, use the useTranslate composable or the translate method.

The useTranslate composable

useTranslate returns a function, usually called t, that translates a string:

<script setup lang="ts">
import { useTranslate } from '@magic-translate/vue';

const t = useTranslate();
</script>

<template>
  <input :placeholder="t('Search products')" />
</template>

t returns the original text until the translation has loaded, and the component re-renders once it has. Like the <T> component, it takes the language and the formality as options:

<input :placeholder="t('Your name', { lang: 'fr', formality: 'formal' })" />

useT is the same composable as useTranslate.

Translating in code

To translate a string in your script, call translate. It returns a promise.

import { useMagicTranslate } from '@magic-translate/vue';

const magicTranslate = useMagicTranslate();
const message = await magicTranslate.translate('Your order has been placed');

// with options
const formal = await magicTranslate.translate('How are you?', {
  lang: 'fr',
  formality: 'formal'
});

Without the lang option, the text is translated into the current language.

Outside of components, for example in a store, use the object returned by createMagicTranslate directly. It has the same translate, language and setLanguage.