diff --git a/package.json b/package.json index 42b5b97..a9169a8 100644 --- 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" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7175a95..a2f754e 100644 --- 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 diff --git a/src/pages/UI-components/Components/index.page.vue b/src/pages/UI-components/Components/index.page.vue index 8dc453b..48319d1 100644 --- 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'; Ghost Link +
+ VBtn + Button + Button + Button + Button +
+
diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts new file mode 100644 index 0000000..adc4e56 --- /dev/null +++ b/src/plugins/vuetify.ts @@ -0,0 +1,11 @@ +import { createVuetify } from 'vuetify'; +import 'vuetify/styles'; + +export function install({ app }: { app: import('vue').App }) { + const vuetify = createVuetify({ + // components, + // directives, + }); + + app.use(vuetify); +} diff --git a/vite.config.plugins.ts b/vite.config.plugins.ts index 6259a0e..dfc0d42 100644 --- 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: [