upgrade from webpack to vite + typescript

src/components/TranslateChatButton.vue

@@ -1,17 +1,20 @@
 <template>
   <div class="toggle-btn text-muted">
-    <div @click.prevent="$emit('translated', handleBtnClick())"
-         class="d-flex">
+    <div class="d-flex" @click.prevent="$emit('translated', handleBtnClick())">
       <span class="text-center mx-2">
-        <i id="toggle-off" class="fa fa-toggle-off show"/>
-        <i id="toggle-on" class="fa fa-toggle-on"/>
+        <i id="toggle-off" class="fa fa-toggle-off show" />
+        <i id="toggle-on" class="fa fa-toggle-on" />
       </span>
       <div>
-        <span :class="toggle === 'translated' ? 'text-warning' : ''"
-            class="float-start">
-          <span class="text-uppercase">Translate to {{data.browserLang}}</span>
+        <span
+          :class="toggle === 'translated' ? 'text-warning' : ''"
+          class="float-start"
+        >
+          <span class="text-uppercase"
+            >Translate to {{ data.browserLang }}</span
+          >
           <span class="loading-icon ms-2" title="Translating..">
-            <i class="fa fa-spinner fa-pulse fa-fw"/>
+            <i class="fa fa-spinner fa-pulse fa-fw" />
           </span>
         </span>
       </div>
@@ -20,82 +23,85 @@
 </template>
 
 <script>
-import {onMounted, reactive, ref} from "vue";
-import ISO6391 from 'iso-639-1'
-import {GetChatHistoryTranslated} from "@/utils";
-import {useStore} from "vuex";
+import { onMounted, reactive, ref } from "vue";
+import ISO6391 from "iso-639-1";
+import { GetChatHistoryTranslated } from "/src/utils";
+import { useStore } from "vuex";
 
 export default {
-  name: 'TranslateChatButton',
+  name: "TranslateChatButton",
   props: {
     translated: {
       type: Boolean,
-      required: true
-    }
+      required: true,
+    },
   },
   setup() {
-    const store = useStore()
+    const store = useStore();
 
     const data = reactive({
-      browserIsoCode: '',
-      browserLangCode: '',
-      browserLang: '',
-    })
+      browserIsoCode: "",
+      browserLangCode: "",
+      browserLang: "",
+    });
 
-    const toggle = ref('original')
+    const toggle = ref("original");
 
     const setLanguageVariables = () => {
-      const navLangs = navigator.languages
+      const navLangs = navigator.languages;
 
-      data.browserIsoCode = navLangs.find((l) => l.length === 5)
-      data.browserLangCode = navLangs[0]
+      data.browserIsoCode = navLangs.find((l) => l.length === 5);
+      data.browserLangCode = navLangs[0];
 
       if (ISO6391.validate(data.browserLangCode)) {
-        data.browserLang = ISO6391.getNativeName(data.browserLangCode)
+        data.browserLang = ISO6391.getNativeName(data.browserLangCode);
       } else {
-        data.browserIsoCode = 'en-US'
-        data.browserLangCode = 'en'
-        data.browserLang = 'English'
+        data.browserIsoCode = "en-US";
+        data.browserLangCode = "en";
+        data.browserLang = "English";
       }
-    }
+    };
 
     const handleBtnClick = async () => {
-      let response
+      let response;
 
-      const refreshButton = document.querySelector('.loading-icon .fa-spinner')
-      refreshButton.classList.add('show')
+      const refreshButton = document.querySelector(".loading-icon .fa-spinner");
+      refreshButton.classList.add("show");
 
-      toggleShow()
+      toggleShow();
 
-      response = await GetChatHistoryTranslated(store, store.state.matchDetails.match_id)
+      response = await GetChatHistoryTranslated(
+        store,
+        store.state.matchDetails.match_id
+      );
 
-      if (refreshButton.classList.contains('show'))
-        refreshButton.classList.remove('show')
+      if (refreshButton.classList.contains("show"))
+        refreshButton.classList.remove("show");
 
-      return [response, toggle.value]
-    }
+      return [response, toggle.value];
+    };
 
     const toggleShow = () => {
-      const offBtn = document.getElementById('toggle-off')
-      const onBtn = document.getElementById('toggle-on')
+      const offBtn = document.getElementById("toggle-off");
+      const onBtn = document.getElementById("toggle-on");
 
-      if (offBtn.classList.contains('show')) {
-        offBtn.classList.remove('show')
-        onBtn.classList.add('show')
-        toggle.value = 'translated'
-      } else if (onBtn.classList.contains('show')) {
-        onBtn.classList.remove('show')
-        offBtn.classList.add('show')
-        toggle.value = 'original'
+      if (offBtn.classList.contains("show")) {
+        offBtn.classList.remove("show");
+        onBtn.classList.add("show");
+        toggle.value = "translated";
+      } else if (onBtn.classList.contains("show")) {
+        onBtn.classList.remove("show");
+        offBtn.classList.add("show");
+        toggle.value = "original";
       }
-    }
+    };
 
     onMounted(() => {
-      setLanguageVariables()
-    })
-    return {data, toggle, handleBtnClick}
+      setLanguageVariables();
+    });
+    return { data, toggle, handleBtnClick };
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>