diff --git a/packages/ui/client/components/Navigation.vue b/packages/ui/client/components/Navigation.vue
index 37cc520d4..5886a60bd 100644
--- a/packages/ui/client/components/Navigation.vue
+++ b/packages/ui/client/components/Navigation.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { isDark, toggleDark } from '~/composables'
+
+const onClickToggle = () => toggleDark()
+
 </script>
 
 <template>
@@ -38,7 +41,7 @@ import { isDark, toggleDark } from '~/composables'
           'i-carbon-moon': isDark,
           'i-carbon-sun': !isDark
         }"
-        @click="toggleDark"
+        @click="onClickToggle"
       />
     </div>
     <Suites />
diff --git a/packages/ui/client/shim.d.ts b/packages/ui/client/shim.d.ts
new file mode 100644
index 000000000..aafef9509
--- /dev/null
+++ b/packages/ui/client/shim.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index c63c9f375..bf10410c8 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -23,6 +23,7 @@
   "devDependencies": {
     "@types/ws": "^8.2.2",
     "@unocss/reset": "^0.16.4",
+    "@vitejs/plugin-vue": "^2.0.1",
     "unocss": "^0.16.4",
     "unplugin-auto-import": "^0.5.3",
     "unplugin-vue-components": "^0.17.9"
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index f264cd9af..08b3fd90b 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -1,4 +1,9 @@
 {
   "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "paths": {
+      "~/*": ["./client/*"]
+    }
+  },
   "exclude": ["dist", "node_modules"]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 188bd3d92..26d4927fd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -93,6 +93,7 @@ importers:
     specifiers:
       '@types/ws': ^8.2.2
       '@unocss/reset': ^0.16.4
+      '@vitejs/plugin-vue': ^2.0.1
       '@vueuse/core': ^7.3.0
       sirv: ^1.0.19
       unocss: ^0.16.4
@@ -106,6 +107,7 @@ importers:
     devDependencies:
       '@types/ws': 8.2.2
       '@unocss/reset': 0.16.4
+      '@vitejs/plugin-vue': 2.0.1_vite@2.7.4+vue@3.2.26
       unocss: 0.16.4
       unplugin-auto-import: 0.5.3_@vueuse+core@7.3.0+vite@2.7.4
       unplugin-vue-components: 0.17.9_vite@2.7.4+vue@3.2.26
@@ -6553,11 +6555,6 @@ packages:
     engines: {node: '>=14.0.0'}
     dev: false
 
-  /tinyspy/0.1.2:
-    resolution: {integrity: sha512-ReLcUvHQeyg6FCXWoaajS2FdikgKWSuwrbrKdq4lr0lBAHK57JqBPEF0RZVqxVC+ap5+ktQemTBJJc9XDO+fgg==}
-    engines: {node: '>=14.0.0'}
-    dev: false
-
   /tinyspy/0.2.1:
     resolution: {integrity: sha512-5iI2IXXrXVm2vipLylJpQjBGUoA992ir3ZFnRb/pPYZX8AHXr4a3XevUO1+611Utiqr0/EYnxhGU3Fux5vwfJQ==}
     engines: {node: '>=14.0.0'}