vue.jsinternationalizationnuxt.jsvue-i18n

i18n : translate a sentence that one of words is bold


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 ??


Solution

  • 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.