Adding a touch of flair to your Vue-i18n parameter

Question

If the template has the following translation:

<p>
{{ $t('Counter: {n}', {n: counter}) }}
</p>

where counter is a number returned from the script, I want to style the variable "n" (for example, make it red).

Is there a way to accomplish this?

Answer 1

Answer №1

To enhance the translation, one method could involve directly inserting HTML code. This will consistently display the counter in red:

translation:

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

template:

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

If you prefer more versatility when it comes to color selection, you can include an extra parameter:

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

Answer 2

To enhance the translation, one method could involve directly inserting HTML code. This will consistently display the counter in red:

translation:

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

template:

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

If you prefer more versatility when it comes to color selection, you can include an extra parameter:

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