i18n：翻译一个单词是粗体的句子

Question

I want to translate this sentence in i18n

Select <b>branch(s)</b> you want to send selected product
after selecting Branch Click on submit

As you can see, one word in above sentence is in <b> tag.

I have this solution , But I am not sure is this is the best way to do or not.

$t('part1') <b>$t('part2')</b>  $t('part3')

so,do you know better way to translate this??

Answer 1

As per your requirement, we have to translate a message/sentence which contains HTML tag.

The solution $t('part1') <b>$t('part2')</b> $t('part3') you mentioned in OP is difficult to manage and complicated. You can avoid it using the i18n functional component . For example :

Your language JSON will look like this:

const messages = {
  en: {
    info: 'Select {branchText} you want to send selected product after selecting Branch Click on submit.',
    subText: 'branch(s)',
  }
}

Template will look like this:

<i18n path="info" tag="p">
  <template v-slot:branchText>
    <b>{{ $t('subText') }}</b>
  </template>
</i18n>

Hope this answer will help. Thanks.