Javascript – How to force the translation of i18n in some specific text (variables) in Vuejs

How to force the translation of i18n in some specific text (variables) in Vuejs… here is a solution to the problem.

How to force the translation of i18n in some specific text (variables) in Vuejs

Under normal circumstances, we simply append translation properties to variables such as :

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

But I would like to specify it at some point in a specific language (example: French).
Can we do something like this in vue.js ?

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

Solution

With the old packagekazupon/vue-i18n , the following should be possible:

$t(key, locale)

When intlify/vue-i18n-next using a successor package, the answer depends on whether you’re using Vue I18n’s Legacy API or the newer Composition API:


The usage of using legacy API t() functions as described in the normal setup guide is explained here.

This means that you can still use the following call to convert the key to a specific locale (for example, “fr”):

$t(key, locale)

Example:

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

By calling the Use Composition API with the option (as described here), the usage t() function is different from the legacy: false createI18n() described here. You can no longer pass locale-string as a second parameter, but locale can be TranslateOptions passed in object. Unfortunately, there are no t(key,TranslateOptions) variants, only the following:

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

So the simplest solution is for example:

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

Related Problems and Solutions