i18n added

package.json

@@ -39,6 +39,7 @@
     "toastify-js": "^1.9.3",
     "tom-select": "^1.7.5",
     "vue": "^3.2.25",
+    "vue-i18n": "9",
     "vue-router": "4",
     "xlsx": "^0.16.9",
     "zoom-vanilla.js": "^2.0.6"

src/components/top-bar/Main.vue

@@ -287,6 +287,11 @@ const languages = [
     label: "English",
   },
 ];
+const onLanguageChanged = (val) => {
+  selectedLang.value = val;
+  // i18n.locale = val;
+  localStorage.setItem(SELECTED_LANG, val);
+};
 
 const onLogout = () => {
   console.log("Logout");
@@ -294,12 +299,6 @@ const onLogout = () => {
   return authStore.logout();
 };
 
-const onLanguageChanged = (val) => {
-  selectedLang.value = val;
-  // i18n.locale = val;
-  localStorage.setItem(SELECTED_LANG, val);
-};
-
 onBeforeMount(() => {
   const lang = localStorage.getItem(SELECTED_LANG);
 

src/i18n/en.js

@@ -0,0 +1,3 @@
+export const locale = {
+  GENERAL_REPORT: "General Report",
+};

src/i18n/index.js

@@ -0,0 +1,23 @@
+import { createI18n } from "vue-i18n";
+
+// Localization language list
+import { locale as en } from "@/i18n/en";
+import { locale as tm } from "@/i18n/tm";
+import { locale as ru } from "@/i18n/ru";
+
+import { SELECTED_LANG } from "@/helpers";
+
+let messages = {};
+messages = { ...messages, en, tm, ru };
+
+// get current selected language
+const lang = localStorage.getItem(SELECTED_LANG) || "tm";
+
+// Create VueI18n instance with options
+const i18n = new createI18n({
+  fallbackLocale: ["tm", "ru", "en"],
+  locale: lang, // set locale
+  messages, // set locale messages
+});
+
+export default i18n;

src/i18n/ru.js

@@ -0,0 +1,3 @@
+export const locale = {
+  GENERAL_REPORT: "Общий отчет",
+};

src/i18n/tm.js

@@ -0,0 +1,3 @@
+export const locale = {
+  GENERAL_REPORT: "Umumy hasabat",
+};

src/main.js

@@ -2,11 +2,12 @@ import { createApp } from "vue";
 import { createPinia } from "pinia";
 import App from "./App.vue";
 import router from "./router";
+import i18n from "./i18n";
 import globalComponents from "./global-components";
 import utils from "./utils";
 import "./assets/css/app.css";
 
-const app = createApp(App).use(router).use(createPinia());
+const app = createApp(App).use(router).use(i18n).use(createPinia());
 
 globalComponents(app);
 utils(app);

src/stores/i18n.js

@@ -0,0 +1,26 @@
+import { defineStore } from "pinia";
+import { SELECTED_LANG } from "@/helpers";
+
+export const useColorSchemeStore = defineStore("i18n", {
+  state: () => ({
+    langValue:
+      localStorage.getItem(SELECTED_LANG) === null
+        ? "tm"
+        : localStorage.getItem(SELECTED_LANG),
+  }),
+  getters: {
+    colorScheme(state) {
+      if (localStorage.getItem(SELECTED_LANG) === null) {
+        localStorage.setItem(SELECTED_LANG, "tm");
+      }
+
+      return state.langValue;
+    },
+  },
+  actions: {
+    setColorScheme(selectedLang) {
+      localStorage.setItem(SELECTED_LANG, selectedLang);
+      this.langValue = selectedLang;
+    },
+  },
+});

src/views/dashboard-overview-1/Main.vue

@@ -5,7 +5,9 @@
         <!-- BEGIN: General Report -->
         <div class="col-span-12 mt-8">
           <div class="intro-y flex items-center h-10">
-            <h2 class="text-lg font-medium truncate mr-5">General Report</h2>
+            <h2 class="text-lg font-medium truncate mr-5">
+              {{ $t("GENERAL_REPORT") }}
+            </h2>
             <a href="" class="ml-auto flex items-center text-primary">
               <RefreshCcwIcon class="w-4 h-4 mr-3" /> Reload Data
             </a>