Vue i18nでデフォルトの言語をユーザー環境の言語にしたいときの対応

動機

Vue とelectronでアプリを作っていて、多言語対応したいと思い、vue -18nを導入しました。どうせなら、デフォルトはユーザーの言語を自動で設定したいなと思って。

前提

• vue 3.2.13
• electron 13.0.0
• vue-i18n 9.1.10

対応

localeにnavigator.languageを使う。ブラウザUIが使っている言語が返ってくる。

const i18n = createI18n({
  legacy: false,
  locale: navigator.language,
  fallbackLocale: 'en',
  globalInjection: true,
  messages: {
    en,
    ja
  }
})

参考

Navigator.language – Web API | MDN