Improve interpolation

[Ionys320]

trafficstars

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

• [X] Read the Contributing Guidelines
• [X] Read the Documentation
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.