⚡
Nuxt 3.4.1 + nuxt/i18n で ロケールメッセージ内にHTMLタグを使いたい場合は nuxt/i18n 側の設定を変更する
結果
こう書くと良い
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