Added Vuetify to project

src/App.vue

@@ -3,27 +3,58 @@ import { RouterLink, RouterView } from "vue-router";
 </script>
 
 <template>
-    <header>
-        <div class="wrapper">
-            <nav>
-                <RouterLink to="/">Home</RouterLink>
-                <RouterLink to="/about">About</RouterLink>
-            </nav>
-        </div>
-    </header>
+    <v-app>
+        <v-app-bar fixed app>
+            <v-container class="d-flex align-center pa-0">
+                <div class="d-flex align-center">
+                    <RouterLink class="mx-2 text-decoration-none" to="/">
+                        <v-btn
+                            variant="outlined"
+                            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>
-        <RouterView />
-    </main>
+        <v-main>
+            <v-container class="align-start fill-height">
+                <RouterView />
+            </v-container>
+        </v-main>
 
-    <footer>
-        <div>Dexie.js - A Minimalistic Wrapper for IndexedDB</div>
-        <div>
-            &copy; 2014-2024
-            <a href="https://dexie.org/" target="_blank" rel="noopener">
-                Dexie.js
-            </a>
-            is the creation of David Fahlander and managed by Awarica AB.
-        </div>
-    </footer>
+        <v-footer class="d-flex flex-column">
+            <div class="d-flex w-100 align-left px-4 py-2">
+                Dexie.js - A Minimalistic Wrapper for IndexedDB
+            </div>
+            <v-divider thickness="2" width="100%"></v-divider>
+            <div class="px-4 py-2 align-left w-100">
+                &copy; 2014-2024
+                <a href="https://dexie.org/" target="_blank" rel="noopener">
+                    <v-btn variant="outlined" color="primary">Dexie.js</v-btn>
+                </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 App from './App.vue'
-import router from './router'
+import { createApp } from "vue";
+import App from "./App.vue";
+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;