vue-i18nでネストした要素を多言語化する

vue-i18nで次のようなリンク付きテキストを多言語化する場合、日本語と英語でリンクの入る位置が大きく異なります。

利用規約に同意して登録

I agree to the terms of use and register.

こういうときは、多言語化のソースに {N} プレースホルダーを置くことで、文言の途中に要素を挿入することができます。

table:文言リスト

プロパティ JA EN

terms {0} に同意して登録 I agree to {0} and register.

termsLink 利用規約 the terms of use

その上で、i18nコンポーネントを使用して文言を組み込めばOK。

code:vue

i18n.terms(tag="p" path="terms")

router-link(to="/terms") {{ $t('termsLink') }}

Ueyama.icon

上記はデフォルトスロットを用いていますが，複数の要素を組み込みたい場合は名前付きスロットを利用するといいそうです．

たとえば「2人／3人が完了」（2人を大文字）のようにしたいときは

table:文言リスト

プロパティ JA

completedRate {completedPeople}／{totalPeopleCount}人が完了

peopleCount {count}人

のようにして

code:vue

i18n.notice(tag="p" path="completedRate")

template(v-slot:completedPeople)

span.fw-bold {{ $t('peopleCount', { count: numberOfCompletedPeople}) }}

template(v-slot:totalPeopleCount) {{ numberOfPeople }}

とするとうまくいきました．

参考