feat: updated eslint, vite pages, vite layouts

.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "extends": [
+    "plugin:vue/base",
+    "plugin:vue/essential",
+    "plugin:import/recommended",
+    "eslint:recommended",
+    "plugin:vue/vue3-recommended",
+    "@vue/typescript/recommended",
+    "prettier"
+  ],
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "import/named": "off",
+    "import/order": [
+      "error",
+      {
+        "groups": ["builtin", "external", "internal"]
+      }
+    ],
+    "import/extensions": ["off", "ignorePackages"],
+    "@typescript-eslint/no-var-requires": "off",
+    "import/prefer-default-export": "off",
+    "no-useless-computed-key": "off",
+    "implicit-arrow-linebreak": "off",
+    "dot-notation": "off",
+    "function-paren-newline": "off",
+    "no-underscore-dangle": "off",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "warn",
+    "@typescript-eslint/ban-types": "off",
+    "no-empty-function": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "import/no-unresolved": "off",
+    "vue/multi-word-component-names": "off"
+  }
+}

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "serve": "vite preview",
     "build": "vite build",
+    "lint": "vite lint",
     "dev": "vite --host --port 3000",
     "qa": "vite --host --mode qa",
     "prod": "vite --host --mode production",
@@ -30,8 +31,6 @@
     "string-to-color": "^2.2.2",
     "swiper": "^9.3.2",
     "tailwind-config-viewer": "^1.7.1",
-    "unplugin-auto-import": "^0.8.8",
-    "unplugin-vue-components": "^0.19.6",
     "vee-validate": "^4.5.11",
     "vue": "latest",
     "vue-awesome-swiper": "^5.0.1",
@@ -53,17 +52,30 @@
     "@tailwindcss/typography": "^0.5.9",
     "@types/node": "^17.0.42",
     "@types/webfontloader": "^1.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.8",
+    "@typescript-eslint/parser": "^5.59.8",
     "@vitejs/plugin-vue": "^2.3.3",
+    "@volar/vue-language-core": "^1.6.5",
+    "@vue/eslint-config-typescript": "^11.0.3",
     "autoprefixer": "^10.4.7",
     "babel-loader": "^8.3.0",
+    "eslint": "^8.42.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-vue": "^9.14.1",
     "husky": "^8.0.3",
     "postcss": "^8.4.14",
+    "prettier": "^2.8.8",
     "rollup-plugin-visualizer": "^5.9.0",
     "tailwindcss": "^3.1.2",
     "terser": "^5.17.6",
     "typescript": "^4.5.4",
+    "unplugin-auto-import": "^0.16.4",
+    "unplugin-vue-components": "^0.25.0",
     "vite": "^3.0.0",
     "vite-plugin-checker": "^0.6.0",
+    "vite-plugin-pages": "^0.31.0",
+    "vite-plugin-vue-layouts": "^0.8.0",
     "vite-svg-loader": "^4.0.0",
     "vue-loader": "^16.8.3",
     "vue-tsc": "^0.34.7"

src/auto-imports.d.ts

@@ -1,7 +1,19 @@
-// Generated by 'unplugin-auto-import'
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-auto-import
 export {}
 declare global {
+  const ChargerInformation: typeof import('./components/common/vehicle-detail/ChargerInformation.vue')['default']
+  const Container: typeof import('./components/base/Container.vue')['default']
   const EffectScope: typeof import('vue')['EffectScope']
+  const Header: typeof import('./components/base/Header.vue')['default']
+  const HistoryDetail: typeof import('./components/common/vehicle-detail/HistoryDetail.vue')['default']
+  const Primary: typeof import('./components/common/my-button/Button.stories.js')['Primary']
+  const Secondary: typeof import('./components/common/my-button/Button.stories.js')['Secondary']
+  const Sidebar: typeof import('./components/base/Sidebar.vue')['default']
+  const buttonStories: typeof import('./components/common/my-button/Button.stories.js')['default']
+  const chargerInput: typeof import('./components/common/charger-input/index.vue')['default']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
   const customRef: typeof import('vue')['customRef']
@@ -17,9 +29,12 @@ declare global {
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
   const markRaw: typeof import('vue')['markRaw']
+  const myButton: typeof import('./components/common/my-button/index.vue')['default']
   const nextTick: typeof import('vue')['nextTick']
   const onActivated: typeof import('vue')['onActivated']
   const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
   const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
   const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
   const onDeactivated: typeof import('vue')['onDeactivated']
@@ -43,6 +58,7 @@ declare global {
   const toRaw: typeof import('vue')['toRaw']
   const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
   const triggerRef: typeof import('vue')['triggerRef']
   const unref: typeof import('vue')['unref']
   const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
@@ -52,6 +68,7 @@ declare global {
   const useCssVars: typeof import('vue')['useCssVars']
   const useDevice: typeof import('./composables/useDevice')['useDevice']
   const useEventBus: typeof import('./composables/useEventBus')['default']
+  const useLink: typeof import('vue-router')['useLink']
   const useLoading: typeof import('./composables/useLoading')['default']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
@@ -63,3 +80,8 @@ declare global {
   const watchPostEffect: typeof import('vue')['watchPostEffect']
   const watchSyncEffect: typeof import('vue')['watchSyncEffect']
 }
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+}

src/components/categories/Categories.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tw-grid tw-grid-cols-4 tw-gap-5">
     <div v-for="category in categories" :key="category">
-      <RouterLink :to="`/${category}`">
+      <RouterLink :to="`/category/${category}`">
         <div
           class="
             tw-px-4

src/env.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-svg-loader" />
+// vite-env.d.ts
+/// <reference types="vite-plugin-pages/client" />
 
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'

src/layouts/dashboard.vue

@@ -20,7 +20,4 @@ export default defineComponent({
 
 <script lang="ts" setup>
 import Header from "@components/base/Header.vue";
-import Container from "@/components/base/Container.vue";
 </script>
-
-<style scoped></style>

src/main.ts

@@ -1,11 +1,12 @@
 import { createApp } from "vue";
-import App from "@/App.vue";
-import router from "@/router";
-import interceptors from "@/plugins/interceptors";
 import axios from "axios";
 import { createPinia } from "pinia";
 import { VueQueryPlugin } from "vue-query";
 import mitt from "mitt";
+import App from "@/App.vue";
+import interceptors from "@/plugins/interceptors";
+import router from "@/router";
+
 // Tailwind CSS
 import "@/assets/css/index.css";
 

src/middleware/auth.ts

@@ -17,10 +17,13 @@ export const auth = async (
 
       if (user) {
         next();
+
+        return Promise.resolve(user);
       }
     } catch (error) {
       localStorage.removeItem(ACCESS_TOKEN_KEY);
       next(`/login?redirect=${to.path}`);
+      return Promise.reject(error);
     }
   } else {
     next(`/login?redirect=${to.path}`);

src/pages/category/index.vue → src/pages/category/[categoryId].vue

@@ -1,3 +1,15 @@
+<script setup lang="ts">
+import { useGetProductsByCategory } from "@/api/products/query";
+import Container from "@/components/base/Container.vue";
+import ProductItem from "@/components/product/ProductItem.vue";
+
+const {
+  params: { categoryId },
+} = useRoute();
+
+const { data } = useGetProductsByCategory(categoryId as string);
+</script>
+
 <template>
   <Container>
     <article class="tw-prose tw-max-w-full tw-my-4">
@@ -13,14 +25,9 @@
   </Container>
 </template>
 
-<script setup lang="ts">
-import { useGetProductsByCategory } from "@/api/products/query";
-import Container from "@/components/base/Container.vue";
-import ProductItem from "@/components/product/ProductItem.vue";
-
-const {
-  params: { categoryId },
-} = useRoute();
-
-const { data } = useGetProductsByCategory(categoryId as string);
-</script>
+<route lang="yaml">
+name: Product In Category
+meta:
+  requiresAuth: true
+  layout: "dashboard"
+</route>

src/pages/dashboard/index.vue

@@ -12,3 +12,10 @@
 import Categories from "@/components/categories/Categories.vue";
 import Container from "@/components/base/Container.vue";
 </script>
+
+<route lang="yaml">
+name: Category
+meta:
+  requiresAuth: true
+  layout: 'dashboard'
+</route>

src/pages/forgot-password/ForgotPassword.vue

@@ -1,9 +1,9 @@
+<script setup lang="ts">
+import AuthTemplate from "@modules/auth/AuthTemplate.vue";
+</script>
+
 <template>
   <AuthTemplate> ForgotPassword </AuthTemplate>
 </template>
 
-<script setup>
-import AuthTemplate from "@modules/auth/AuthTemplate.vue";
-</script>
-
 <style></style>

src/pages/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <Container>
+    <article class="tw-prose tw-max-w-full tw-my-10">
+      <h2 class="tw-text-center">Products Categories</h2>
+    </article>
+
+    <Categories />
+  </Container>
+</template>
+
+<script lang="ts" setup>
+import Categories from "@/components/categories/Categories.vue";
+import Container from "@/components/base/Container.vue";
+</script>
+
+<route lang="yaml">
+name: Home Page
+meta:
+  requiresAuth: true
+  layout: "dashboard"
+</route>

src/pages/login/index.vue

@@ -1,3 +1,37 @@
+<script lang="ts" setup>
+import { useForm, useField } from "vee-validate";
+import * as yup from "yup";
+import AuthTemplate from "@modules/auth/AuthTemplate.vue";
+import MyInput from "@/components/common/my-input/index.vue";
+import { useAuth } from "@/composables/useAuth";
+import { IError } from "@/types/error.types";
+
+export interface LoginForm {
+  username: string;
+  password: string;
+}
+
+const { isSignInLoading, signInError, signIn } = useAuth();
+
+const validationSchema = yup.object({
+  username: yup.string().required("Username is required"),
+  password: yup
+    .string()
+    .required("Password is required")
+    .min(6, "Password must be at least 6 characters"),
+});
+
+const { handleSubmit } = useForm<LoginForm>({ validationSchema });
+const { value: username, errorMessage: usernameError } =
+  useField<string>("username");
+const { value: password, errorMessage: passwordError } =
+  useField<string>("password");
+
+const onLogin = handleSubmit(async (values) => {
+  signIn(values);
+});
+</script>
+
 <template>
   <AuthTemplate>
     <div class="tw-text-center">
@@ -96,38 +130,4 @@
   </AuthTemplate>
 </template>
 
-<script lang="ts" setup>
-import { useForm, useField } from "vee-validate";
-import * as yup from "yup";
-import AuthTemplate from "@modules/auth/AuthTemplate.vue";
-import MyInput from "@/components/common/my-input/index.vue";
-import { useAuth } from "@/composables/useAuth";
-import { IError } from "@/types/error.types";
-
-export interface LoginForm {
-  username: string;
-  password: string;
-}
-
-const { isSignInLoading, signInError, signIn } = useAuth();
-
-const validationSchema = yup.object({
-  username: yup.string().required("Username is required"),
-  password: yup
-    .string()
-    .required("Password is required")
-    .min(6, "Password must be at least 6 characters"),
-});
-
-const { handleSubmit } = useForm<LoginForm>({ validationSchema });
-const { value: username, errorMessage: usernameError } =
-  useField<string>("username");
-const { value: password, errorMessage: passwordError } =
-  useField<string>("password");
-
-const onLogin = handleSubmit(async (values) => {
-  signIn(values);
-});
-</script>
-
 <style></style>