vue-i18n
vue-i18n copied to clipboard
Option to specify default templates/interpolations for i18n-t tag?
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!