migrate to Vue3

src/i18n.ts

@@ -1,7 +1,4 @@
-import Vue from 'vue'
-import VueI18n, { LocaleMessages } from 'vue-i18n'
-
-Vue.use(VueI18n)
+import { createI18n } from 'vue-i18n'
 
 const lang = navigator.language
   ?.split('-')
@@ -11,31 +8,28 @@ const lang = navigator.language
 const isLanguageSupported = (files: string[]) =>
   lang && files.find((file) => file.includes(lang))
 
-function loadLocaleMessages(): LocaleMessages {
-  const locales = require.context(
-    './locales',
-    true,
-    /[A-Za-z0-9-_,\s]+\.json$/i
-  )
-  const languages = locales.keys()
-  const messages: LocaleMessages = {}
-  languages.forEach((key) => {
-    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
+function loadLocaleMessages() {
+  const locales = import.meta.glob('./locales/*.json', { eager: true })
+  const messages: Record<string, any> = {}
+
+  for (const path in locales) {
+    const matched = path.match(/([A-Za-z0-9-_]+)\.json$/i)
     if (matched && matched.length > 1) {
       const locale = matched[1]
-      messages[locale] = locales(key)
+      messages[locale] = (locales[path] as any).default
     }
-  })
+  }
 
-  if (lang && isLanguageSupported(languages)) {
+  if (lang && Object.keys(messages).includes(lang)) {
     const html = document.querySelector('html')
     html?.setAttribute('lang', lang)
   }
   return messages
 }
 
-export default new VueI18n({
+export default createI18n({
   locale: lang || 'en',
   fallbackLocale: 'en',
-  messages: loadLocaleMessages()
+  messages: loadLocaleMessages(),
+  legacy: false
 })