[Vuejs]-Apply style to parameter in Vue-i18n

1👍

One approach could be adding HTML directly to the translation. This would make the counter always appear in red:

translation:

counter: 'Counter is: <span style="color: red">{n}</span>'

template:

<span v-html="$t('counter', {n: 22})" />

If you want it more flexible regarding color, you could add additional parameter:

<span v-html="$t('counter', {n: 22, color: 'green'})" />
counter: 'Counter is: <span style="color: {color}">{n}</span>'
👤equi

Leave a comment