vuetify

package.json

@@ -91,7 +91,8 @@
     "vue-draggable-plus": "^0.6.0",
     "vue-i18n": "^11.1.3",
     "vue-page-stack": "^3.2.0",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "vuetify": "^3.8.2"
   },
   "devDependencies": {
     "@eslint/compat": "^1.2.8",
@@ -155,6 +156,7 @@
     "vite-plugin-vue-devtools": "^7.7.2",
     "vite-plugin-vue-layouts": "^0.11.0",
     "vite-plugin-vue-meta-layouts": "^0.5.1",
+    "vite-plugin-vuetify": "^2.1.1",
     "vite-plugin-webfont-dl": "^3.10.4",
     "vue-component-type-helpers": "^2.2.8",
     "vue-tsc": "^2.2.8"

pnpm-lock.yaml

@@ -157,6 +157,9 @@ importers:
       vue-router:
         specifier: ^4.5.0
         version: 4.5.0(vue@3.5.13(typescript@5.8.3))
+      vuetify:
+        specifier: ^3.8.2
+        version: 3.8.2(typescript@5.8.3)(vite-plugin-vuetify@2.1.1)(vue@3.5.13(typescript@5.8.3))
     devDependencies:
       '@eslint/compat':
         specifier: ^1.2.8
@@ -341,6 +344,9 @@ importers:
       vite-plugin-vue-meta-layouts:
         specifier: ^0.5.1
         version: 0.5.1(vite@6.2.6(@types/node@22.14.0)(jiti@2.4.2)(less@4.3.0)(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0)(yaml@2.7.1))(vue-router@4.5.0(vue@3.5.13(typescript@5.8.3)))
+      vite-plugin-vuetify:
+        specifier: ^2.1.1
+        version: 2.1.1(vite@6.2.6(@types/node@22.14.0)(jiti@2.4.2)(less@4.3.0)(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0)(yaml@2.7.1))(vue@3.5.13(typescript@5.8.3))(vuetify@3.8.2)
       vite-plugin-webfont-dl:
         specifier: ^3.10.4
         version: 3.10.4(vite@6.2.6(@types/node@22.14.0)(jiti@2.4.2)(less@4.3.0)(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0)(yaml@2.7.1))
@@ -2119,6 +2125,12 @@ packages:
       vue:
         optional: true
 
+  '@vuetify/loader-shared@2.1.0':
+    resolution: {integrity: sha512-dNE6Ceym9ijFsmJKB7YGW0cxs7xbYV8+1LjU6jd4P14xOt/ji4Igtgzt0rJFbxu+ZhAzqz853lhB0z8V9Dy9cQ==}
+    peerDependencies:
+      vue: ^3.0.0
+      vuetify: ^3.0.0
+
   '@vueuse/core@10.11.1':
     resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
 
@@ -4808,6 +4820,10 @@ packages:
     resolution: {integrity: sha512-nwNCjxJTjNuLCgFr42fEak5OcLuB3ecca+9ksPFNvtfYSLpjf+iJqSIaSnIile6ZPbKYxI5k2AfXqeopGudK/g==}
     hasBin: true
 
+  upath@2.0.1:
+    resolution: {integrity: sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==}
+    engines: {node: '>=4'}
+
   update-browserslist-db@1.1.3:
     resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
     hasBin: true
@@ -4957,6 +4973,14 @@ packages:
       vite: ^6.2.6
       vue-router: '>=4.0.14'
 
+  vite-plugin-vuetify@2.1.1:
+    resolution: {integrity: sha512-Pb7bKhQH8qPMzURmEGq2aIqCJkruFNsyf1NcrrtnjsOIkqJPMcBbiP0oJoO8/uAmyB5W/1JTbbUEsyXdMM0QHQ==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      vite: ^6.2.6
+      vue: ^3.0.0
+      vuetify: ^3.0.0
+
   vite-plugin-webfont-dl@3.10.4:
     resolution: {integrity: sha512-Odn+9JO0Wz67pSiGGA0IZS7c+m3/KFRFI370WRiP5x20TZFobtaLdIcvfb1pZelRhOIzKndfsoLWrq8144mjzw==}
     peerDependencies:
@@ -5076,6 +5100,22 @@ packages:
       typescript:
         optional: true
 
+  vuetify@3.8.2:
+    resolution: {integrity: sha512-UJNFP4egmKJTQ3V3MKOq+7vIUKO7/Fko5G6yUsOW2Rm0VNBvAjgO6VY6EnK3DTqEKN6ugVXDEPw37NQSTGLZvw==}
+    engines: {node: ^12.20 || >=14.13}
+    peerDependencies:
+      typescript: '>=4.7'
+      vite-plugin-vuetify: '>=2.1.0'
+      vue: ^3.5.0
+      webpack-plugin-vuetify: '>=3.1.0'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+      vite-plugin-vuetify:
+        optional: true
+      webpack-plugin-vuetify:
+        optional: true
+
   warning@4.0.3:
     resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
 
@@ -7016,6 +7056,12 @@ snapshots:
       typescript: 5.8.3
       vue: 3.5.13(typescript@5.8.3)
 
+  '@vuetify/loader-shared@2.1.0(vue@3.5.13(typescript@5.8.3))(vuetify@3.8.2)':
+    dependencies:
+      upath: 2.0.1
+      vue: 3.5.13(typescript@5.8.3)
+      vuetify: 3.8.2(typescript@5.8.3)(vite-plugin-vuetify@2.1.1)(vue@3.5.13(typescript@5.8.3))
+
   '@vueuse/core@10.11.1(vue@3.5.13(typescript@5.8.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.20
@@ -9914,6 +9960,8 @@ snapshots:
       knitwork: 1.2.0
       scule: 1.3.0
 
+  upath@2.0.1: {}
+
   update-browserslist-db@1.1.3(browserslist@4.24.4):
     dependencies:
       browserslist: 4.24.4
@@ -10067,6 +10115,17 @@ snapshots:
       vite: 6.2.6(@types/node@22.14.0)(jiti@2.4.2)(less@4.3.0)(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0)(yaml@2.7.1)
       vue-router: 4.5.0(vue@3.5.13(typescript@5.8.3))
 
+  vite-plugin-vuetify@2.1.1(vite@6.2.6(@types/node@22.14.0)(jiti@2.4.2)(less@4.3.0)(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0)(yaml@2.7.1))(vue@3.5.13(typescript@5.8.3))(vuetify@3.8.2):
+    dependencies:
+      '@vuetify/loader-shared': 2.1.0(vue@3.5.13(typescript@5.8.3))(vuetify@3.8.2)
+      debug: 4.4.0
+      upath: 2.0.1
+      vite: 6.2.6(@types/node@22.14.0)(jiti@2.4.2)(less@4.3.0)(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0)(yaml@2.7.1)
+      vue: 3.5.13(typescript@5.8.3)
+      vuetify: 3.8.2(typescript@5.8.3)(vite-plugin-vuetify@2.1.1)(vue@3.5.13(typescript@5.8.3))
+    transitivePeerDependencies:
+      - supports-color
+
   vite-plugin-webfont-dl@3.10.4(vite@6.2.6(@types/node@22.14.0)(jiti@2.4.2)(less@4.3.0)(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0)(yaml@2.7.1)):
     dependencies:
       axios: 1.8.4
@@ -10161,6 +10220,13 @@ snapshots:
     optionalDependencies:
       typescript: 5.8.3
 
+  vuetify@3.8.2(typescript@5.8.3)(vite-plugin-vuetify@2.1.1)(vue@3.5.13(typescript@5.8.3)):
+    dependencies:
+      vue: 3.5.13(typescript@5.8.3)
+    optionalDependencies:
+      typescript: 5.8.3
+      vite-plugin-vuetify: 2.1.1(vite@6.2.6(@types/node@22.14.0)(jiti@2.4.2)(less@4.3.0)(sass-embedded@1.86.3)(sass@1.86.3)(terser@5.39.0)(yaml@2.7.1))(vue@3.5.13(typescript@5.8.3))(vuetify@3.8.2)
+
   warning@4.0.3:
     dependencies:
       loose-envify: 1.4.0

src/pages/UI-components/Components/index.page.vue

@@ -27,7 +27,15 @@ import { Input as ShaInput } from '@/shadcn/components/ui/input';
         <ShadcnButton variant="ghost">Ghost</ShadcnButton>
         <ShadcnButton variant="link">Link</ShadcnButton>
       </div>
+      <div class="demo-block">
+        <VBtn>VBtn</VBtn>
+        <v-btn variant="outlined"> Button </v-btn>
+        <v-btn variant="tonal"> Button </v-btn>
+        <v-btn variant="text"> Button </v-btn>
+        <v-btn variant="plain"> Button </v-btn>
+      </div>
     </div>
+
     <div class="demo-block">
       <a-input placeholder="Ant Design" />
       <InputText placeholder="Primevue" />

src/plugins/vuetify.ts

@@ -0,0 +1,11 @@
+import { createVuetify } from 'vuetify';
+import 'vuetify/styles';
+
+export function install({ app }: { app: import('vue').App<Element> }) {
+  const vuetify = createVuetify({
+    // components,
+    // directives,
+  });
+
+  app.use(vuetify);
+}

vite.config.plugins.ts

@@ -30,6 +30,7 @@ import { viteSingleFile } from 'vite-plugin-singlefile';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 import VueDevTools from 'vite-plugin-vue-devtools';
 import MetaLayouts from 'vite-plugin-vue-meta-layouts';
+import vuetify from 'vite-plugin-vuetify';
 import { ViteWebfontDownload } from 'vite-plugin-webfont-dl';
 
 import { viteArchiverPlugin } from './vite.config.plugin.archiver';
@@ -78,6 +79,9 @@ export function Plugins() {
       headEnabled: true,
     }),
 
+    // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#automatic-imports
+    vuetify({ autoImport: true /* styles: 'none' */ }), // Enabled by default
+
     // https://github.com/antfu/unplugin-auto-import
     UnpluginAutoImport({
       dirs: [