In NuxtJS on our home page we have a title which has the letters JS as a green color, a different color to the rest of the text. Obviously this is done by adding a span with a color of light-green. This span is then added to all the other languages we have. We then import this using v-html. So far so good. It works. Why change this?

title: 'The Intuitive  Vue Framework',
<p v-html="$t('title')"></p>

So recently we added eslint to our main website. Obviously this didn’t pass the rule where v-html is considered a bad practice. But with eslint we can just turn off the rule. Problem solved. OK but what happens if we need to change the light-green to a dark-green. Well we need to change it in the i18n file of each language. Tedious? Well we could just do a find and replace. Problem solved.

So basically it means people can translate our text and change the text and color to anything they like. But surely they wouldn’t do that. But that’s not the point. Should we really have this in our translations? Is it really necessary? Isn’t there a better way?

That’s where i18n interpolation comes into practice. With i18n, instead of using v-html we can instead use interpolation. How?

i18n gives us an <i18n> component that we can use on any of our pages or inside our components. In this component we can set up the tag to be any html element we want such as h2, div, a or whatever we want to use for that particular text.

<i18n tag="h1"></i18n>  

We then allocate it to our translation. If for example in our en-EN.js file we have homepage.title:

module.exports = {
  homepage: {
    title:
      'The Intuitive  Vue Framework'
  }
}

Then this is what we will use as the path in our <i18n> component.

<i18n
    tag="h1"
    path="homepage.title"
>
</i18n>          

#nuxt