i18n completed

src/components/top-bar/Main.vue

@@ -263,6 +263,7 @@
 import { ref, onBeforeMount } from "vue";
 import { useAuthStore } from "@/stores";
 import { SELECTED_LANG } from "@/helpers";
+import i18n from "@/i18n";
 
 const searchDropdown = ref(false);
 const showSearchDropdown = () => {
@@ -289,7 +290,7 @@ const languages = [
 ];
 const onLanguageChanged = (val) => {
   selectedLang.value = val;
-  // i18n.locale = val;
+  i18n.global.locale = val;
   localStorage.setItem(SELECTED_LANG, val);
 };
 

src/i18n/index.js

@@ -1,6 +1,6 @@
 import { createI18n } from "vue-i18n";
 
-// Localization language list
+// localization language list
 import { locale as en } from "@/i18n/en";
 import { locale as tm } from "@/i18n/tm";
 import { locale as ru } from "@/i18n/ru";
@@ -10,11 +10,12 @@ import { SELECTED_LANG } from "@/helpers";
 let messages = {};
 messages = { ...messages, en, tm, ru };
 
-// get current selected language
+// get current selected language on load
 const lang = localStorage.getItem(SELECTED_LANG) || "tm";
 
-// Create VueI18n instance with options
+// create VueI18n instance with options
 const i18n = new createI18n({
+  globalInjection: true,
   fallbackLocale: ["tm", "ru", "en"],
   locale: lang, // set locale
   messages, // set locale messages

src/stores/i18n.js

@@ -1,26 +0,0 @@
-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;
-    },
-  },
-});