How can I add CSS style in nuxt-i18n?

Question

I have a following translation:

en.js

test: {
  hello: 'My name is Ben'
}

If I want to let 'name' is blue word,other word is black.

I have tried following code: en.js

test: {
  hello: 'My <span style="color:blue">name<span> is Ben'
}

But it will show
My <span style="color:blue">name<span> is Ben

How can I correct it?

Answer 1

You should not have code in your i18n JSON (just text), rather use a conditional like this in your template

<div :class="$i18n.locale === 'en' ? 'color-blue' : 'color-red'">{{ $t('hello') }}</div>