以下のようなエラーが出ていた。
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