🦮
vue-i18nのi18n.t('key')で、'key'が見つからなかったときに例外をthrowする
vue-i18nはi18n.t('key')
をしたときに、I18nOptions
のmessages[locale]
に'key'
が見つからなければconsole.warn()
されますが、例外はthrowされません。
console.warn()
で大抵の場合は問題ないですが、今回特定の条件下でのみ'key'
が見つからないことがあったので、デバッグのためにthrowするようにしました。
その手順です。
(弊社メンバーの方に教えていただきました。ありがとうございます!)
結論ですが、I18nOptions
にmissing
プロパティを指定すればいけます。
nuxt/i18nでの例
動く環境↓
コード:
<!-- buttonをクリックすると、"key 'nothing' is not found in locale 'en'"と表示される('en'ロケールでの例)。 -->
<template>
<div>
<button @click="show">Click to throw</button>
</div>
</template>
<script setup lang="ts">
const i18n = useI18n({
// **Add the 'missing' property**
missing: (locale: string, key: string) => {
throw new Error(`key '${key}' is not found in locale '${locale}'`)
},
})
const show = () => {
try {
alert(i18n.t('nothing'))
} catch (e) {
alert(e)
}
}
</script>
nuxt/i18nならi18n.config.tsに指定してもいけるはずです。
素のvue-i18nなら、createI18n
に指定すればいけると思います。
(要はI18nOptions
型のmissing
プロパティを設定すればいける。)
Discussion