feat!: upgrade to vuetify 4 (#9)

Author: kingyue737

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "type": "module",
-  "packageManager": "pnpm@10.29.3",
+  "packageManager": "pnpm@10.30.3",
   "scripts": {
     "dev": "vite --open --host",
     "build": "vite build",
@@ -16,25 +16,25 @@
     "@vueuse/core": "^14.2.1",
     "echarts": "^6.0.0",
     "pinia": "^3.0.4",
-    "vue": "^3.5.28",
+    "vue": "^3.5.29",
     "vue-echarts": "^8.0.1",
-    "vue-router": "^5.0.2",
-    "vuetify": "^3.11.8"
+    "vue-router": "^5.0.3",
+    "vuetify": "^4.0.1"
   },
   "devDependencies": {
     "@mdi/js": "^7.4.47",
-    "@nuxt/eslint-config": "^1.15.1",
+    "@nuxt/eslint-config": "^1.15.2",
     "@pinia/testing": "^1.0.3",
     "@playwright/test": "^1.58.2",
     "@testing-library/vue": "^8.1.0",
     "@tsconfig/node24": "^24.0.4",
-    "@types/jsdom": "^27.0.0",
-    "@types/node": "^24.10.13",
+    "@types/jsdom": "^28.0.0",
+    "@types/node": "^24.12.0",
     "@vitejs/plugin-vue": "^6.0.4",
     "@vue/test-utils": "^2.4.6",
-    "@vue/tsconfig": "^0.8.1",
-    "eslint": "^10.0.0",
-    "eslint-plugin-playwright": "^2.5.1",
+    "@vue/tsconfig": "^0.9.0",
+    "eslint": "^10.0.3",
+    "eslint-plugin-playwright": "^2.9.0",
     "jsdom": "^28.1.0",
     "prettier": "^3.8.1",
     "rollup-plugin-regexp": "^5.0.1",
@@ -45,7 +45,7 @@
     "vite-plugin-vue-meta-layouts": "^0.6.1",
     "vite-plugin-vuetify": "^2.1.3",
     "vitest": "^4.0.18",
-    "vue-tsc": "^3.2.4"
+    "vue-tsc": "^3.2.5"
   },
   "onlyBuiltDependencies": [
     "esbuild",

pnpm-lock.yaml

@@ -34,19 +34,18 @@ withDefaults(
         :class="`text-${color}`"
         v-text="title"
       />
-      <h3
+      <span
         class="font-weight-regular d-inline-block ml-2"
-        style="font-size: 18px"
       >
         {{ value != null ? formatter(value) : '' }}
         <small v-if="unit">{{ unit }}</small>
-      </h3>
+    </span>
       <v-divider />
     </div>
     <div class="v-alert__border" :class="`text-${color}`" />
     <div
       v-if="$slots.footer"
-      class="text-grey text-right stats-footer text-caption"
+      class="text-grey text-right stats-footer text-body-small"
     >
       <slot name="footer" />
     </div>
@@ -64,19 +63,15 @@ withDefaults(
       backdrop-filter: blur(3px);
     }
   }
-  .caption {
-    font-size: 12px;
-    letter-spacing: 0;
-  }
   .stats-icon {
     position: absolute;
     opacity: 0.3;
   }
   .stats-footer {
     :deep(span) {
       display: inline-block;
-      font-size: 12px !important;
-      letter-spacing: 0 !important;
+      font-size: 12px;
+      letter-spacing: 0;
     }
   }
 }

src/components/StatsCard.vue

@@ -56,6 +56,6 @@ const toggleDark = useToggle<true, false | null>(isDark)
   opacity: 0.5;
 }
 :deep(.v-switch__thumb .v-icon) {
-  --v-icon-size-multiplier: 1.2 !important;
+  --v-icon-size-multiplier: 1.2;
 }
 </style>

src/components/layout/AppBar.vue

@@ -40,7 +40,7 @@ drawerStored.value = lgAndUp.value && width.value !== 1280
             />
           </template>
           <v-list-item-title
-            class="text-h5 font-weight-bold"
+            class="text-display-small font-weight-bold"
             style="line-height: 2rem; text-overflow: clip"
           >
             Vitify <span class="text-primary">Admin</span>
@@ -58,8 +58,8 @@ drawerStored.value = lgAndUp.value && width.value !== 1280
     <v-spacer />
     <template #append>
       <v-list-item class="drawer-footer px-0 d-flex flex-column justify-center">
-        <div class="text-caption pt-6 pb-1 pt-md-0 text-center text-no-wrap">
-          &copy; Copyright 2023
+        <div class="text-body-small pt-6 pb-1 pt-md-0 text-center text-no-wrap">
+          &copy; Copyright 2026
           <a
             href="https://github.com/kingyue737"
             class="font-weight-bold text-primary"
@@ -83,7 +83,7 @@ drawerStored.value = lgAndUp.value && width.value !== 1280
 .v-navigation-drawer {
   transition-property:
     box-shadow, transform, visibility, width, height, left, right, top, bottom,
-    border-radius !important;
+    border-radius;
   overflow: hidden;
   &.v-navigation-drawer--rail {
     border-top-right-radius: 0px;
@@ -100,11 +100,11 @@ drawerStored.value = lgAndUp.value && width.value !== 1280
         transform: translateX(-160px);
       }
       .drawer-header-icon {
-        height: 1em !important;
-        width: 1em !important;
+        height: 1em;
+        width: 1em;
       }
       .v-list-group__items .v-list-item {
-        padding-inline-start: 8px !important;
+        padding-inline-start: 8px;
       }
     }
   }
@@ -119,9 +119,9 @@ drawerStored.value = lgAndUp.value && width.value !== 1280
     min-height: 30px;
   }
   .drawer-header-icon {
-    opacity: 1 !important;
-    height: 1.2em !important;
-    width: 1.2em !important;
+    opacity: 1;
+    height: 1.2em;
+    width: 1.2em;
     transition: all 0.2s;
     margin-right: -4px;
   }

src/components/layout/AppDrawer.vue

@@ -11,11 +11,10 @@
 </template>
 <style>
 .v-footer {
-  padding: 0px 10px !important;
+  padding: 0px 10px;
   > .v-btn--icon {
     .v-icon {
-      height: 1.25em;
-      width: 1.25em;
+      --v-icon-size-multiplier: 0.875;
     }
   }
 }

src/components/layout/AppFooter.vue

@@ -42,7 +42,7 @@ function toggleAll() {
     >
       <v-toolbar flat density="compact">
         <v-toolbar-title
-          class="font-weight-light text-body-1"
+          class="font-weight-light text-body-large"
           :text="notifications.length ? 'Notification' : 'No New Notifications'"
         />
         <v-tooltip location="top" text="Clear All Notifications">

src/components/layout/AppNotification.vue

@@ -6,7 +6,7 @@ const theme = useTheme()
 const { store } = useColorMode()
 const color = computed({
   get() {
-    return theme.themes.value.light!.colors.primary
+    return theme.themes.value.light!.colors.primary as string
   },
   set(val: string) {
     localStorage.setItem('theme-primary', val)