Front refactor use i18n

frontend/package.json

@@ -14,7 +14,8 @@
     "core-js": "^3.8.3",
     "pinia": "^3.0.3",
     "quasar": "^2.16.0",
-    "vue": "^3.2.13"
+    "vue": "^3.2.13",
+    "vue-i18n": "^12.0.0-alpha.3"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

frontend/src/App.vue

@@ -6,6 +6,7 @@
       </div>
     </q-page-container>
   </q-layout>
+  {{ $t('commands.join') }}
 </template>
 
 <script setup>

frontend/src/locales/en-US/app.json

@@ -0,0 +1,3 @@
+{
+    "login-chat": "login-register"
+}

frontend/src/locales/en-US/commands.json

@@ -0,0 +1,3 @@
+{
+    "join": "Join the chat"
+}

frontend/src/locales/en-US/index.js

@@ -0,0 +1,7 @@
+import commands from './commands.json'
+import app from './app.json'
+
+export default {
+  commands,
+  app,
+}

frontend/src/locales/index.js

@@ -0,0 +1,5 @@
+import enUS from './en-US'
+
+export default {
+  'en-US': enUS,
+}

frontend/src/main.js

@@ -6,10 +6,12 @@ import './styles/app.css'
 import { createPinia } from 'pinia'
 import './plugins/axios'
 import router from './routes'
+import i18n from './plugins/i18n'
 
 const app = createApp(App);
 
 app.use(createPinia());
 app.use(router);
+app.use(i18n);
 
 app.use(Quasar, quasarUserOptions).mount('#app')

frontend/src/plugins/i18n.js

@@ -0,0 +1,10 @@
+import { createI18n } from 'vue-i18n';
+import languages from '../locales';
+
+const i18n = createI18n({
+  locale: 'en-US',
+  fallbackLocale: 'en-US',
+  messages: languages,
+});
+
+export default i18n;