🦮

vue-i18nのi18n.t('key')で、'key'が見つからなかったときに例外をthrowする

2025/02/06に公開

vue-i18nはi18n.t('key')をしたときに、I18nOptionsmessages[locale]'key'が見つからなければconsole.warn()されますが、例外はthrowされません。
console.warn()で大抵の場合は問題ないですが、今回特定の条件下でのみ'key'が見つからないことがあったので、デバッグのためにthrowするようにしました。

その手順です。
(弊社メンバーの方に教えていただきました。ありがとうございます!)

結論ですが、I18nOptionsmissingプロパティを指定すればいけます。

nuxt/i18nでの例

動く環境↓
https://stackblitz.com/edit/nuxt-starter-wyyzfhq5?file=app.vue

コード:

<!-- 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に指定してもいけるはずです。
https://i18n.nuxtjs.org/docs/composables/define-i18n-config

素のvue-i18nなら、createI18nに指定すればいけると思います。

(要はI18nOptions型のmissingプロパティを設定すればいける。)

Discussion