chore(frontend): Add Vuetify

Add Vuetify and simple slider to about page

frontend/package-lock.json

@@ -1,15 +1,16 @@
 {
   "name": "dwengo-1-frontend",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "dwengo-1-frontend",
-      "version": "0.0.0",
+      "version": "0.0.1",
       "dependencies": {
         "vue": "^3.5.13",
-        "vue-router": "^4.5.0"
+        "vue-router": "^4.5.0",
+        "vuetify": "^3.7.12"
       },
       "devDependencies": {
         "@playwright/test": "^1.50.1",
@@ -6510,6 +6511,36 @@
         "typescript": ">=5.0.0"
       }
     },
+    "node_modules/vuetify": {
+      "version": "3.7.12",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.7.12.tgz",
+      "integrity": "sha512-cBxWXKPNl3vWc10/EEpfK4RBrCZERAHEUZCWmrJPd6v+JU0sbm4sEgIpy8IU5d1BzA1kIhknpbgYy2IqiZponA==",
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20 || >=14.13"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/johnleider"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.7",
+        "vite-plugin-vuetify": ">=1.0.0",
+        "vue": "^3.3.0",
+        "webpack-plugin-vuetify": ">=2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        },
+        "vite-plugin-vuetify": {
+          "optional": true
+        },
+        "webpack-plugin-vuetify": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",

frontend/package.json

@@ -14,7 +14,8 @@
   },
   "dependencies": {
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "vuetify": "^3.7.12"
   },
   "devDependencies": {
     "@playwright/test": "^1.50.1",

frontend/src/main.ts

@@ -1,11 +1,24 @@
 import './assets/main.css'
+import { createApp } from 'vue';
 
-import { createApp } from 'vue'
+// Vuetify
+import 'vuetify/styles';
+import { createVuetify } from 'vuetify';
+import * as components from 'vuetify/components';
+import * as directives from 'vuetify/directives';
+
+// Components
 import App from './App.vue'
 import router from './router'
 
-const app = createApp(App)
+const app = createApp(App);
 
-app.use(router)
+app.use(router);
 
-app.mount('#app')
+const vuetify = createVuetify({
+  components,
+  directives,
+});
+app.use(vuetify);
+
+app.mount('#app');

frontend/src/views/AboutView.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="about">
     <h1>This is an about page</h1>
+    <v-slider></v-slider>
   </div>
 </template>