vuetify

2025-04-20 22:42:41 +08:00
parent aacca31384
commit 9ada32765a
5 changed files with 92 additions and 1 deletions
--- a/package.json
+++ b/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"
--- a/pnpm-lock.yaml
+++ b/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
--- a/src/pages/UI-components/Components/index.page.vue
+++ b/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" />
--- a/src/plugins/vuetify.ts
+++ b/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);
+}
--- a/vite.config.plugins.ts
+++ b/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: [