【Vue3】vue-i18nでレガシーモードでは使えませんとエラーがでるときの解決策

2024年10月30日

おはようございます！そうすけです！

運営者：そうすけ

30代のブロガーとエンジニア。
工場勤務→情シス→ソフトウェアエンジニア
主にフロントエンド開発を行っています。

趣味はガジェットと植物。

問題

下記のような記述で、localeをvue-i18n→useI18nから呼び出し、リアクティブになっているlocaleを変更すると、言語設定をあらかじめ設定していた場合、切り替わる様になっている。

グローバルに出力した$t関数を使用していれば、ページ全体でリアクティブに変更される仕様にしていた。

import { createI18n } from 'vue-i18n'
import messages from '@/i18n'

const mi18n = createI18n({
  locale: 'ja',
  globalInjection: true,
  messages
})
export default boot(({ app }) => {
  // Set i18n instance on app
  app.use(mi18n)
})
const $t = mi18n.global.t
export { $t }

    import { useI18n } from 'vue-i18n'
    
    // set lung locale
    const { locale } = useI18n()
    locale.value = 'en-US'

だがVue3＋Quaserのプロジェクトで多言語対応の際に、エラーが出て多言語対応ができなかった

Uncaught (in promise) SyntaxError: Not available in legacy mode

対策

デフォルトの設定ではCompositionAPIには対応してない。

なので、設定でlegacy: falseを設定してあげると、変更対応される。

import { createI18n } from 'vue-i18n'

import { boot } from 'quasar/wrappers'

import messages from '@/i18n'

const mi18n = createI18n({
  locale: 'ja',
  globalInjection: true,
  legacy: false, // Composition APIを有効にする
  messages
})
export default boot(({ app }) => {
  // Set i18n instance on app
  app.use(mi18n)
})
const $t = mi18n.global.t
export { $t }

そうすけ

Vue3のCompositionAPIの記法がスタンダードになってきているので、個人的にはここデフォルトの設定で対応しておいてほしいなぁと思いました。

参考記事

I want to lead an easy life.

Vue3でvue-i18nの初期化でエラーになる – I want to lead an easy life. 以下のようなエラーが出ていた。 Vue 3のsetupでuseI18nを構成する場合は、createI18nのlegacyオプションをfalseに設定する必要がある。参考：https://vue-i18n.intlif … …