Allow to render HTML msg with Component Interpolation

[ricardo17coelho]

Clear and concise description of the problem

Let's say, i have a msg like:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy {link} tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br>
<br>
My magic {link} should be rendered as HTML.<br>
<br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita {link} gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Using "Component Interpolation" to render a component where the link is displayed works like:

      <i18n-t keypath="messages.description" tag="div">
        <template #link>
          <CustomLink :href="t('messages.description_link')">
            {{ t('messages.description_link_text') }}
          </CustomLink>
        </template>
      </i18n-t>

The link is rendered properly.. but the text not.. Why ? Because the translation contains "
" wich should be rendered as html to be displayed properly..
With Component Interpolation this is not possible ( at least i didn't see anything to fix this problem )

by using v-html without Component Interpolation, this would work:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy <a href="https:\/\/www.google.com" target="_blank">Google<\/a> tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br>
<br>
My magic <a href="https:\/\/www.google.com" target="_blank">Google<\/a> should be rendered as HTML.<br>
<br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita <a href="https:\/\/www.google.com" target="_blank">Google<\/a> gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

<div v-html="t('messages.description')" />

But how do i replace the "link" with my custom component "CustomLink" ?

https://vue-i18n.intlify.dev/guide/advanced/component.html
https://vue-i18n.intlify.dev/guide/essentials/syntax#html-message

Suggested solution

Provide an way to "wrap" the translation with v-html but still support the "templates" in Component Interpolation

Alternative

No response

Additional context

I found this issue similar to this:

• Cannot use Component Interpolation together with HTML message #895

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.