【Vue.js】vue-i18nで文章内にhtmlやcssを含める方法

Vue

コード

const ja = {
  test: 'テスト',
  entry: '申込受付中です。{newline}詳しくは{here}。',
  here: 'こちら'
};

<i18n path="entry" tag="p">
  <template #newline>
    <br />
  </template>
  <template #here>
    <a href="/hoge">{{ $t('here')  }}</a>
  </template>
</i18n>

出力結果

<p>申込受付中です。<br />詳しくは<a href="/hoge">こちら</a>。

tagに指定したタグが使用される。

コード

const ja = {
  test: 'テスト',
};

<i18n path="test" tag="p"></i18n>

出力結果

<p>テスト</p>

tagを指定しなかった場合、spanタグが使用される。

コード

const ja = {
  test: 'テスト',
};

<i18n path="test"></i18n>

出力結果

<span>テスト</span>

tagを使用したくない場合、tagに false を指定する。

コード

const ja = {
  test: 'テスト',
};

<i18n path="test" :tag="false"></i18n>

出力結果

テスト