vue-i18n: component interpolation with html tags

Question

i'm using component interpolation as described here but also have some html tags in my translation string for formatting purposes. how should i deal with this?

<i18n
    path="description"
    tag="p"
    :places="{ value1, value2, routerLink }"
/>

the corresponding key in my .yml file look like:

description: Lorem ipsum <nobr><strong>{value1}&#8201;%</strong></nobr> some more text <nobr><strong>{value2}&#8201;%</strong></nobr> and some more text. Go to {routerLink} for more info.

Answer 1

Try use v-html directive

<i18n
    v-html="description"
    tag="p"
    :places="{ value1, value2, routerLink }"
/>

An alternative is can be use a computed that interprets HTML entities see this