Render html tags with component interpolation

It’s possible to render html tags with component interpolation?

Example:

const messages = {
  en: {
    text: '<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p><p>Lorem ipsum, dolor {email}.</p>',
    email: '[e-mail]'
  }
}

<i18n path="text" tag="div">
  <my-link place="email" :href="`mailto:$t('email')`">{{ $t('args.email') }}</my-link>
</i18n>

I expect two paragraphs, and in the second paragraph, one link with my custom link component, but, the paragraphs was rendering as strings and not as html tags.

Maybe it’s is a bug? Or is impossible to render an html tags inside a <i18n> component?

[tho-masn]

This has the big advantage of keeping the markup out of the translation content and in your template (where it belongs).

In general I agree with that statement. But I think there are still some use-cases where html in the translations makes sense, like if you want to highlight 1 word by using a <b> tag, or like the use-case of @leandromatos-hotmart. Would it make sense to add something like a isHtml option to the i18n tag?

[via-lars]

I like to add my vote to enable HTML be output as such inside interpolation from <i18n-t>. Translated languages can have different grammar and different phrase symbols (think Quotes, Ampersand) which requires multiple paragraphs in the translation or HTML escapes.

As such, for a translation utility, I think this is a 1st class requirement.

I also like to know what the security issue is exactly. Translations are static pre-delivered and not user-generated for other users on the fly. Sanitisation would have to occur on borders, ie. first after a backend received data, not “inbetween every code line”.