typescriptvue.jsinternationalizationvuejs3vue-i18n

How to pass parameters to translations

I'm using vuejs 3 with TS.

I created the translation files in TS like this:

index.ts:

export default {
 'example': 'example',
}

In order then to use it in this way:

{{ $t('example') }}

Now I would like to pass a parameter to the translation, like, for example:

index.ts:

export default {
 'hi_man': 'Hi {name}',    //where the name is the parameter
}

How can I do this?

Solution

  • Maybe you should consider reading the documentation: https://kazupon.github.io/vue-i18n/guide/formatting.html#named-formatting

    For Vue 3 and vue-i18n v9: https://vue-i18n.intlify.dev/guide/essentials/syntax.html#named-interpolation

    <p>{{ $t('hi_man', { name: 'Monkey' }) }}</p>