intlify / vue-i18n

Vue I18n for Vue 3
https://vue-i18n.intlify.dev/
MIT License
2.05k stars 322 forks source link

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

Open RobinB-Gbanga opened 3 years ago

RobinB-Gbanga commented 3 years ago

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!

infinnie commented 1 month ago
<br slot="br" />