basic install

src/App.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { RouterLink, RouterView } from "vue-router";
+</script>
+
+<template>
+  <header>Header</header>
+
+  <RouterView />
+</template>

src/main.css

@@ -0,0 +1,36 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ===== Scrollbar CSS ===== */
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #c9c9c9 transparent;
+}
+
+/* Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent; /*f1f1f1;*/
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: #c9c9c9;
+  border-radius: 12px;
+  border: 0px solid #ffffff;
+}
+
+html,
+body {
+  @apply h-full w-screen m-0 p-0 overflow-hidden bg-white;
+  height: 100svh;
+}
+
+#app {
+  @apply w-full h-full overflow-hidden flex flex-col;
+}

src/main.ts

@@ -0,0 +1,13 @@
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+
+import App from "./App.vue";
+import router from "./router";
+import "./main.css";
+
+const app = createApp(App);
+
+app.use(createPinia());
+app.use(router);
+
+app.mount("#app");

src/router/index.ts

@@ -0,0 +1,15 @@
+import { createRouter, createWebHistory } from "vue-router";
+import HomeView from "../views/HomeView.vue";
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: "/",
+      name: "home",
+      component: HomeView,
+    },
+  ],
+});
+
+export default router;

src/serverCom.ts

@@ -0,0 +1,71 @@
+import axios from "axios";
+
+const http = axios.create({
+  baseURL: "https://localhost:5000",
+  headers: {
+    "Cache-Control": "no-cache",
+    Pragma: "no-cache",
+    Expires: "0",
+  },
+});
+
+http.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem("accessToken");
+    if (token) {
+      if (config.headers) {
+        config.headers.Authorization = `Bearer ${token}`;
+      }
+    }
+
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+http.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  async (error) => {
+    const originalRequest = error.config;
+
+    // Handle token expiration and retry the request with a refreshed token
+    if (error.response && error.response.status === 401 && !originalRequest._retry) {
+      originalRequest._retry = true;
+      return await refreshToken()
+        .then(() => {
+          return http(originalRequest);
+        })
+        .catch();
+    }
+
+    return Promise.reject(error);
+  }
+);
+
+async function refreshToken(): Promise<void> {
+  return new Promise<void>(async (resolve, reject) => {
+    await http
+      .post(`/auth/refresh`, {
+        access: localStorage.getItem("accessToken"),
+        refreshToken: localStorage.getItem("refreshToken"),
+      })
+      .then((response) => {
+        const { access, refreshToken } = response.data;
+
+        localStorage.setItem("accessToken", access);
+        localStorage.setItem("refreshToken", refreshToken);
+
+        resolve();
+      })
+      .catch((error) => {
+        console.error("Error refreshing token:", error);
+        reject();
+      });
+  });
+}
+
+export { http };

src/views/HomeView.vue

@@ -0,0 +1,5 @@
+<template>
+  <p>Home</p>
+</template>
+
+<script setup lang="ts"></script>