upgrade from webpack to vite + typescript

src/components/InfoModal.vue

@@ -1,17 +1,26 @@
 <template>
   <div v-if="infos.data" id="modal">
     <div v-for="(info, id) in infos.data" :key="id" class="custom-modal">
-      <div :class="info.type === 'error'
-              ? 'bg-danger text-white'
-              : info.type === 'warning'
-              ? 'bg-warning text-secondary'
-              : info.type === 'success'
-              ? 'bg-success text-white'
-              : 'bg-secondary text-white'"
-           class="card">
+      <div
+        :class="
+          info.type === 'error'
+            ? 'bg-danger text-white'
+            : info.type === 'warning'
+            ? 'bg-warning text-secondary'
+            : info.type === 'success'
+            ? 'bg-success text-white'
+            : 'bg-secondary text-white'
+        "
+        class="card"
+      >
         <div class="card-body d-flex justify-content-between">
           <span class="info-text">{{ info.message }}</span>
-          <button aria-label="Close" class="btn-close" type="button" @click="closeModal(id)"/>
+          <button
+            aria-label="Close"
+            class="btn-close"
+            type="button"
+            @click="closeModal(id)"
+          />
         </div>
       </div>
     </div>
@@ -19,36 +28,36 @@
 </template>
 
 <script>
-import {useStore} from "vuex";
-import {onMounted, reactive} from "vue";
+import { useStore } from "vuex";
+import { onMounted, reactive } from "vue";
 
 export default {
   name: "InfoModal",
   setup() {
-    const store = useStore()
+    const store = useStore();
     const infos = reactive({
-      data: []
-    })
+      data: [],
+    });
 
     const closeModal = (id) => {
-      store.commit('removeInfoState', id)
-    }
+      store.commit("removeInfoState", id);
+    };
 
     onMounted(() => {
-      store.subscribe(((mutation, state) => {
-        if (mutation.type === 'changeInfoState') {
-          infos.data = state.info
+      store.subscribe((mutation, state) => {
+        if (mutation.type === "changeInfoState") {
+          infos.data = state.info;
 
           setTimeout(() => {
-            closeModal(store.state.info.length - 1)
-          }, 5000)
+            closeModal(store.state.info.length - 1);
+          }, 5000);
         }
-      }))
-    })
+      });
+    });
 
-    return {infos, closeModal}
-  }
-}
+    return { infos, closeModal };
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -59,17 +68,17 @@ export default {
     z-index: 10;
     position: absolute;
     right: 1rem;
-    opacity: .8;
+    opacity: 0.8;
     width: min(100vw - 2rem, 50ch);
     height: var(--height);
 
     .btn-close {
       background-color: white;
-      opacity: .5;
+      opacity: 0.5;
     }
 
     .info-text {
-      font-size: .8rem;
+      font-size: 0.8rem;
     }
   }