Added Vuetify to project

package.json

@@ -16,8 +16,11 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
+    "@mdi/font": "^7.4.47",
+    "vite-plugin-vuetify": "^2.1.2",
     "vue": "^3.5.18",
-    "vue-router": "^4.5.1"
+    "vue-router": "^4.5.1",
+    "vuetify": "^3.10.0"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.2",
@@ -29,6 +32,7 @@
     "@vue/tsconfig": "^0.7.0",
     "jsdom": "^26.1.0",
     "npm-run-all2": "^8.0.4",
+    "sass-embedded": "^1.92.1",
     "typescript": "~5.8.0",
     "vite": "^7.0.6",
     "vite-plugin-vue-devtools": "^8.0.0",

src/App.vue

@@ -3,27 +3,58 @@ import { RouterLink, RouterView } from "vue-router";
 </script>
 
 <template>
-    <header>
+    <v-app>
-        <div class="wrapper">
+        <v-app-bar fixed app>
-            <nav>
+            <v-container class="d-flex align-center pa-0">
-                <RouterLink to="/">Home</RouterLink>
+                <div class="d-flex align-center">
-                <RouterLink to="/about">About</RouterLink>
+                    <RouterLink class="mx-2 text-decoration-none" to="/">
-            </nav>
+                        <v-btn
-        </div>
+                            variant="outlined"
-    </header>
+                            color="primary"
+                            size="large"
+                            prepend-icon="mdi-home-outline"
+                        >
+                            Home
+                        </v-btn>
+                    </RouterLink>
+                    <RouterLink class="mx-2 text-decoration-none" to="/about">
+                        <v-btn
+                            variant="outlined"
+                            color="primary"
+                            size="large"
+                            prepend-icon="mdi-chat-question-outline"
+                        >
+                            About
+                        </v-btn>
+                    </RouterLink>
+                </div>
+            </v-container>
+        </v-app-bar>
 
-    <main>
+        <v-main>
-        <RouterView />
+            <v-container class="align-start fill-height">
-    </main>
+                <RouterView />
+            </v-container>
+        </v-main>
 
-    <footer>
+        <v-footer class="d-flex flex-column">
-        <div>Dexie.js - A Minimalistic Wrapper for IndexedDB</div>
+            <div class="d-flex w-100 align-left px-4 py-2">
-        <div>
+                Dexie.js - A Minimalistic Wrapper for IndexedDB
-            &copy; 2014-2024
+            </div>
-            <a href="https://dexie.org/" target="_blank" rel="noopener">
+            <v-divider thickness="2" width="100%"></v-divider>
-                Dexie.js
+            <div class="px-4 py-2 align-left w-100">
-            </a>
+                &copy; 2014-2024
-            is the creation of David Fahlander and managed by Awarica AB.
+                <a href="https://dexie.org/" target="_blank" rel="noopener">
-        </div>
+                    <v-btn variant="outlined" color="primary">Dexie.js</v-btn>
-    </footer>
+                </a>
+                is the creation of David Fahlander and managed by Awarica AB.
+            </div>
+        </v-footer>
+    </v-app>
 </template>
+
+<style lang="scss" scoped>
+.fill-height {
+    min-height: calc(100vh - 180px);
+}
+</style>

src/main.ts

@@ -1,11 +1,13 @@
-import './assets/main.css'
+import "./assets/main.css";
 
-import { createApp } from 'vue'
+import { createApp } from "vue";
-import App from './App.vue'
+import App from "./App.vue";
-import router from './router'
+import vuetify from "./plugins/vuetify";
+import router from "./router";
 
-const app = createApp(App)
+const app = createApp(App);
 
-app.use(router)
+app.use(vuetify);
+app.use(router);
 
-app.mount('#app')
+app.mount("#app");

src/plugins/vuetify.ts

@@ -0,0 +1,15 @@
+import "@mdi/font/css/materialdesignicons.css";
+import "vuetify/styles";
+import { createVuetify } from "vuetify";
+import * as components from "vuetify/components";
+import * as directives from "vuetify/directives";
+
+const vuetify = createVuetify({
+  components,
+  directives,
+  theme: {
+    defaultTheme: "dark",
+  },
+});
+
+export default vuetify;

vite.config.ts

@@ -3,10 +3,17 @@ import { fileURLToPath, URL } from "node:url";
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import vueDevTools from "vite-plugin-vue-devtools";
+import vuetify from "vite-plugin-vuetify";
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [vue(), vueDevTools()],
+  plugins: [
+    vue(),
+    vueDevTools(),
+    vuetify({
+      autoImport: true,
+    }),
+  ],
   resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url)),