なんかのLog

vue-i18nでリンク付きの文を表示したい

🗓️ 2023-01-23
📑 Post 

Nuxt.js(v2)でエラー文にリンク付きの文字を出力したかった。

v-htmlはあんまり使いたくないから探したところi18nタグを使いslotで出力templateを指定できた。

https://kazupon.github.io/vue-i18n/guide/interpolation.html#slots-syntax-usage

// ja.js
{
    text: 'この文は{link}にリンクがあります',
    here: 'ここ',
}
<i18n path="text" tag="p">
    <template v-slot:link>
      <a href="/here">{{ $t('here') }}</a>
    </template>
</18n>

結果

<p>この文は<a href="/here">ここ</a>にリンクがあります</p>
🏷️ #Vue
Buy Me A Coffee