renderer: fix i18n is not load correctly

src/renderer/main.js

@@ -6,11 +6,13 @@ import router from './router'
 import vuetify from './plugins/vuetify'
 
 import 'vuetify/dist/vuetify.min.css'
+import i18n from './plugins/i18n'
 
 const app = createApp(App)
 
 app
   .use(vuetify)
+  .use(i18n)
   .use(router)
   .use(createPinia())
 

src/renderer/plugins/i18n.js

@@ -1,5 +1,13 @@
+import { createI18n } from 'vue-i18n'
 import en from '../../locales/en.json'
 
-export default {
+// eslint-disable-next-line new-cap
+export default createI18n({
+  legacy: false,
+  locale: 'en',
+  fallbackLocale: 'en',
+  globalInjection: true,
+  messages: {
     en
   }
+})

src/renderer/plugins/vuetify.js

@@ -1,14 +1,8 @@
 import { createVuetify } from 'vuetify/dist/vuetify'
-import messages from './i18n'
 
 const vuetify = createVuetify({
   icons: {
     iconfont: 'mdi'
-  },
-  locale: {
-    defaultLocale: 'en',
-    fallbackLocale: 'en',
-    messages
   }
 })