3

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

Debug Diva
  • 26,058
  • 13
  • 70
  • 123
morteza mortezaie
  • 1,002
  • 14
  • 37

1 Answers1

4

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.

Michal Levý
  • 33,064
  • 4
  • 68
  • 86
Debug Diva
  • 26,058
  • 13
  • 70
  • 123
  • 2
    ...although I agree that in this case where you are in complete control of HTML, using `v-html` would be just fine too – Michal Levý Jan 18 '22 at 08:38
  • 2
    @MichalLevý I'd say, who knows: better safe than sorry. If it adds a layer of security (if your locale files are stored in a less safer place or exposed to your product team idk), it's fine to have it like this. Of course, you can also add a sanitizer on top of the `v-html` too. – kissu Jan 18 '22 at 18:49