Use Component interpolation for Poralization

[xiezht]

vue & vue-i18n version

• vue 2.5
• vue-i18n: 8.21

Description

I would like to use Poraliztion of i18n. At the same time, i want to add some style to the text which will be replaced by i18n.

en: {
    term1: 'no apple | one apple | {count} apples'
}

// I want it to be rendered like following when the variable `count` is larger 1: 
<span>
   <span class="highlight"> count </span> apples.
</span>

So i want to use the Component Interpolation to do that.

<i18n path="term1">
   <span place="count">{{ currentCount }}</span>
</i18n>

But it seems there is no way to combine Component Interpolation with Poralization feature.

Could anyone give me some suggestion to solve for this problem ?

[kazupon]

vue-i18n v9 or later, we can use plural prop at translation component
https://vue-i18n-next.intlify.dev/migration/features.html#translation-component

[kazupon]

we supported in Vue I18n v9.
https://vue-i18n.intlify.dev/api/component.html#translationprops
please try it!