Improve interpolation

[Ionys320]

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

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

[kazupon]

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]

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 👌🏻

[EwenDC]

This is a big blocker for our company dropping HTML from our translation messages. We'd like to avoid dangerously setting HTML with our translations, but the current API forces us to do so if we want to support simple formatting without breaking up messages to an unreasonable degree.

[voxivoid]

this change would be very welcomed since now it is really painful to have some simple formatting on the text!

[kazupon]

Update.

we are planning to adopt MF2 (MessageFormat 2) simple message support in v12, which includes exactly this kind of markup syntax:

{{Click {#strong}here{/strong} to {#em}continue{/em}}}

This aligns with the Intl.MessageFormat proposal that was referenced in the discussion, using the {#tag}...{/tag} syntax for markup elements.

In the Vue rendering layer, these markup elements would map to Vue components or HTML elements, giving you the ability to write:

{
  "familyName": "{#i}Family{/i} {#strong}name{/strong}"
}

This approach:

• Keeps the full sentence in a single translation key, allowing translators to reorder words freely
• No raw HTML in messages — no XSS risk, no need for v-html
• Markup rendering is controlled by the app, not the translation string
• Aligns with the Unicode CLDR standard, making it interoperable with other i18n tools

We'll keep this issue open for tracking. This is a high priority feature for v12.