Nuxt 3.4.1 + nuxt/i18n で ロケールメッセージ内にHTMLタグを使いたい場合は nuxt/i18n 側の設定を変更する

2023/04/20に公開

結果

こう書くと良い

export default defineNuxtConfig({
  i18n: {
    precompile: {
      strictMessage: false,
    },
  },
})

環境

  • Nuxt 3.4.1

背景

先日Nuxt3.4.1にアップデート後、ビルド時に以下のようなエラーが発生しました。

[9:35:04]  ERROR  Internal server error: Detected HTML in 'hoge <br/> hoge' message. (error code: undefined) in /.../locales/ja.json
  target message: hoge <br/> hoge
  target message path: hoge

  1  |  hoge <br/> hoge
   |  ^^^^^^^^^^^^^^^

  Plugin: unplugin-vue-i18n

どうやら unplugin-vue-i18nの設定でエラーになっているらしい。
ドキュメントを見ると strictMessageが影響しているらしい。
早速設定してました。

import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
export default defineNuxtConfig({
  plugins: [
    VueI18nPlugin({
      strictMessage: false
    }),
  ],
})

な、直らない、、、なぜだ、、、

と色々調べてみたら、 nuxt/i18nの設定にも strictMessageの項目を発見。
こちらで設定すると(結果欄参照)動作するようになりました。

エラー文だけ見るとunplugin-vue-i18nの設定が影響するように見えたのでちょっと混乱しました。
よかったよかった。

Discussion