vue-i18n icon indicating copy to clipboard operation
vue-i18n copied to clipboard

Option to specify default templates/interpolations for i18n-t tag?

Open RobinB-Gbanga opened this issue 3 years ago • 1 comments

I didn't find any info on this, so I'm not sure if this feature exists.

In an effort to introduce a controlled, limited usage of html tags in our localization strings, we've decided against using v-html and using i18n-t with some controlled html templates instead. For example, we decided to add support for the <br/> tag by interpolating {br} in our locales.

For every text that should support this, we need to typically change this:

<div class="text-paragraph">
  {{ $t("leaderboard.lastScore", { score: lastScore }) }}
</div>

into this:

<i18n-t keypath="leaderboard.lastScore" tag="div" class="text-paragraph">
  <template #br>
    <br />
  </template>
  <template #score>
    {{ lastScore }}
  </template>
</i18n-t>

If we ever decide to add general support for another html tag, the boilerplate part per text will grow by another 3 lines. This really bloats the html part.

Is there a way of defining "global default templates/interpolations", maybe as an options argument when creating the i18n instance? It'd be great if I could define this once:

  <template #br>
    <br />
  </template>

and then use {br} from any <i18n/> in the whole app.

Thanks!

RobinB-Gbanga avatar Jan 08 '21 06:01 RobinB-Gbanga