How to force translate i18n in some specific text (variable) in Vuejs

Viewed 601

In normal context, we just attach translation property to a variable like :

this.name = this.$t('language.name');

But I want to specific it in a specific language sometime( ex: in French). Can we do something like this in vue.js ?

this.name = this.$t('language.name', locale: fr);
1 Answers

Using the old package kazupon/vue-i18n, the following should be possible:

$t(key, locale)

When using the successor-package intlify/vue-i18n-next, the answer depends on if you are using Vue I18n's Legacy API or the newer Composition API:


Using Legacy API as described in the normal setup guide the usages of the t() function are stated here.

This means you can still use the following call to translate a key to a specific locale (e.g. 'fr'):

$t(key, locale)

Example:

$t('message.key', 'fr')

Using the Composition API by calling createI18n() with the option legacy: false (as described here), the usages of the t() function are different as stated here. You can no longer pass the locale-string as the second parameter, but the locale can be handed over inside a TranslateOptions object. Unfortunately, there is no t(key,TranslateOptions) variant, but only the following variants:

$t(key, plural, TranslateOptions)
$t(key, defaultMsg, TranslateOptions)
$t(key, interpolations, TranslateOptions)

So the easiest solution would be e.g.:

$t('message.key', 1, { locale: 'fr' })
Related