intlify/vue-i18n

Improve interpolation

Ionys320 opened this issue · 2 comments

Ionys320 commented

Clear and concise description of the problem

Hi!
I'm using vue-i18n for my Nuxt project, and be used to use react-i18next for my React Native app. And I faced a significant difference between them regarding interpolation. Currently, when we want to have something such as

<i>Family</i> <strong>name</strong>

, we need two distinct translations. This cause issues in the translation process: it requires two separate keys, and doesn't allow automated translation to invert words when needed (in french, it would be "Nom de famille", so "Family" and "name" would be revert).

Suggested solution

Such as in react-i18next, it would be useful to have a syntax as

{
     "familyName": "<0>Family</0> <1>name</1>"
}

, in order to let automated translation translate the content easily, and just have something as

<i18n key="familyName">
    <i></i>
    <strong></strong>
</i18n>

in our code. The output would be

<i>Family</i> <strong>name</strong>

Alternative

No response

Additional context

No response

Validations

kazupon commented

This is interesting!
vue-i18n has message format. we can extend for new syntax, but vue-i18n will be extend to like Intl.MessageFormat syntax, or adopt it for future.
https://github.com/tc39/proposal-intl-messageformat

we need to more discuss for syntax

Ionys320 commented

It seems the proposal is suggesting a syntax like {#b}text{/b} (https://github.com/tc39/proposal-intl-messageformat?tab=readme-ov-file#markup), so I guess my proposal could be a bit reworked by using {#0}Text{/0} instead of <0>Text</0>!

Feel free to reach me out if you need me for the discussions 👌🏻