Vue3でvue-i18nの初期化でエラーになる

以下のようなエラーが出ていた。

Uncaught (in promise) SyntaxError: Not available in legacy mode
    at createCompileError (message-compiler.esm-bundler.js?965a:54:1)
    at createI18nError (vue-i18n.esm-bundler.js?666d:100:1)
    at useI18n (vue-i18n.esm-bundler.js?666d:2228:1)
    at setup (NovelSearch.vue?0b40:12:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:155:1)
    at setupStatefulComponent (runtime-core.esm-bundler.js?d2dd:7165:1)
    at setupComponent (runtime-core.esm-bundler.js?d2dd:7119:1)
    at mountComponent (runtime-core.esm-bundler.js?d2dd:5473:1)
    at processComponent (runtime-core.esm-bundler.js?d2dd:5448:1)
    at patch (runtime-core.esm-bundler.js?d2dd:5038:1)

Vue 3のsetupでuseI18nを構成する場合は、createI18nのlegacyオプションをfalseに設定する必要がある。

const i18n = createI18n({
  legacy: false, // you must set `false`, to use Composition API
  locale: 'ja',
  messages: {
    en: enNames,
    ja: jaNames
  }
});

const app = createApp(App)
app.use(i18n)
app.mount('#app')

参考:https://vue-i18n.intlify.dev/guide/advanced/composition.html

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です