bnsgt's diary

個人的な備忘と日記

【Vue.js】i18nを使用時に<br>タグで改行させる方法

vueのtemplate内で、<br>タグを含む言語を読み込む場合、そのままマスタッシュ記法で読み込まず、v-htmlを使う。

  • vueファイル
<template>
  <!-- NG:<br>タグがエスケープされてしまう -->
  <p>{{ $t('text') }}</p>
  <!-- OK:改行される -->
  <p v-html="$t('text')"></p>
</template>
  • 言語ファイル

/locales/ja.json

export default {
  text: '改行します<br>改行されました',
}