From fd71fb47bc0e0b7d8a63798cdd7acae2f0f991cb Mon Sep 17 00:00:00 2001
From: Rene Fischer <github@renefischer.org>
Date: Sun, 24 May 2020 01:52:15 +0200
Subject: [PATCH] add vuetifyjs

---
 package-lock.json                             | 124 ++++++++++++++++--
 package.json                                  |   9 +-
 public/index.html                             |   2 +
 src/App.vue                                   |  25 +++-
 .../deckselection/DeckSelection.vue           |  29 ++--
 src/components/layout/Footer.vue              |  26 ++++
 src/components/layout/NavigationBar.vue       |  58 ++++++++
 src/components/layout/TitleBar.vue            |  19 ---
 src/main.js                                   |   2 +
 src/plugins/vuetify.js                        |  10 ++
 src/views/About.vue                           |  12 +-
 src/views/Home.vue                            |  10 +-
 vue.config.js                                 |   7 +-
 13 files changed, 274 insertions(+), 59 deletions(-)
 create mode 100644 src/components/layout/Footer.vue
 create mode 100644 src/components/layout/NavigationBar.vue
 delete mode 100644 src/components/layout/TitleBar.vue
 create mode 100644 src/plugins/vuetify.js

diff --git a/package-lock.json b/package-lock.json
index f669e7a..802b23d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1945,7 +1945,6 @@
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
       "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
       "dev": true,
-      "optional": true,
       "requires": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -2282,8 +2281,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz",
       "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "block-stream": {
       "version": "0.0.9",
@@ -2825,7 +2823,6 @@
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.0.tgz",
       "integrity": "sha512-aXAaho2VJtisB/1fg1+3nlLJqGOuewTzQpd/Tz0yTg2R0e4IGtshYvtjowyEumcBv2z+y4+kc75Mz7j5xJskcQ==",
       "dev": true,
-      "optional": true,
       "requires": {
         "anymatch": "~3.1.1",
         "braces": "~3.0.2",
@@ -2842,7 +2839,6 @@
           "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
           "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
           "dev": true,
-          "optional": true,
           "requires": {
             "fill-range": "^7.0.1"
           }
@@ -2852,7 +2848,6 @@
           "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
           "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
           "dev": true,
-          "optional": true,
           "requires": {
             "to-regex-range": "^5.0.1"
           }
@@ -2861,15 +2856,13 @@
           "version": "7.0.0",
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
           "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "to-regex-range": {
           "version": "5.0.1",
           "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
           "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
           "dev": true,
-          "optional": true,
           "requires": {
             "is-number": "^7.0.0"
           }
@@ -3122,6 +3115,17 @@
       "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
       "dev": true
     },
+    "clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
+      "requires": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      }
+    },
     "coa": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
@@ -6062,6 +6066,12 @@
         }
       }
     },
+    "interpret": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.2.0.tgz",
+      "integrity": "sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==",
+      "dev": true
+    },
     "invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -6134,7 +6144,6 @@
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
       "dev": true,
-      "optional": true,
       "requires": {
         "binary-extensions": "^2.0.0"
       }
@@ -8167,8 +8176,7 @@
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
       "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "pify": {
       "version": "4.0.1",
@@ -9208,11 +9216,19 @@
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.4.0.tgz",
       "integrity": "sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==",
       "dev": true,
-      "optional": true,
       "requires": {
         "picomatch": "^2.2.1"
       }
     },
+    "rechoir": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
+      "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
+      "dev": true,
+      "requires": {
+        "resolve": "^1.1.6"
+      }
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@@ -9591,6 +9607,36 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "sass": {
+      "version": "1.26.5",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.26.5.tgz",
+      "integrity": "sha512-FG2swzaZUiX53YzZSjSakzvGtlds0lcbF+URuU9mxOv7WBh7NhXEVDa4kPKN4hN6fC2TkOTOKqiqp6d53N9X5Q==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=2.0.0 <4.0.0"
+      }
+    },
+    "sass-loader": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.2.tgz",
+      "integrity": "sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==",
+      "dev": true,
+      "requires": {
+        "clone-deep": "^4.0.1",
+        "loader-utils": "^1.2.3",
+        "neo-async": "^2.6.1",
+        "schema-utils": "^2.6.1",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -9796,6 +9842,15 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
+      "requires": {
+        "kind-of": "^6.0.2"
+      }
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -9817,6 +9872,17 @@
       "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==",
       "dev": true
     },
+    "shelljs": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.4.tgz",
+      "integrity": "sha512-7gk3UZ9kOfPLIAbslLzyWeGiEqx9e3rxwZM0KE6EL8GlGwjym9Mrlx5/p33bWTu9YG6vcS4MBxYZDHYr5lr8BQ==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.0.0",
+        "interpret": "^1.0.0",
+        "rechoir": "^0.6.2"
+      }
+    },
     "signal-exit": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
@@ -11336,6 +11402,24 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
       "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
     },
+    "vue-cli-plugin-vuetify": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.0.5.tgz",
+      "integrity": "sha512-jtxcidjLT5f1H9QLYKLFjo/ZG42ud4pI9bK3WNO5DXyhiMDMTwSZ7b3NcJVRH7tKYbv5/ty0VPdDGlf4w22AMA==",
+      "dev": true,
+      "requires": {
+        "semver": "^7.1.2",
+        "shelljs": "^0.8.3"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.3.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
+          "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
+          "dev": true
+        }
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.1.0.tgz",
@@ -11428,6 +11512,20 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuetify": {
+      "version": "2.2.29",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.2.29.tgz",
+      "integrity": "sha512-UI1i8kEdV+s7tNQe2yJJMPlvxGTE8cZfUAXEGV2yO4owHmeybn6p5YzFpJqimoKkfX6ok+zV29+6yIKfkyUDAA=="
+    },
+    "vuetify-loader": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/vuetify-loader/-/vuetify-loader-1.4.3.tgz",
+      "integrity": "sha512-fS0wRil682Ebsj2as+eruBoMPKaQYDhu/fDAndnTItzSY4RK4LOEIsssVL4vD6QY8dvUgoGL84SUQ6vGr777CA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.2.0"
+      }
+    },
     "watchpack": {
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.2.tgz",
diff --git a/package.json b/package.json
index 0bc0393..8656104 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
     "core-js": "^3.6.4",
     "pwa": "^1.9.7",
     "vue": "^2.6.11",
-    "vue-router": "^3.1.6"
+    "vue-router": "^3.1.6",
+    "vuetify": "^2.2.11"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.3.0",
@@ -21,7 +22,11 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "^2.6.11"
+    "sass": "^1.19.0",
+    "sass-loader": "^8.0.0",
+    "vue-cli-plugin-vuetify": "~2.0.5",
+    "vue-template-compiler": "^2.6.11",
+    "vuetify-loader": "^1.3.0"
   },
   "eslintConfig": {
     "root": true,
diff --git a/public/index.html b/public/index.html
index 4123528..bc51465 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
   </head>
   <body>
     <noscript>
diff --git a/src/App.vue b/src/App.vue
index 0074eb6..e6cf26f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,32 @@
 <template>
   <div id="app">
-    <router-view />
+    <v-app id="inspire">
+      <v-app id="sandbox">
+        <v-content>
+          <NavigationBar title="Fancy Flashcard"></NavigationBar>
+          <router-view />
+          <Footer></Footer>
+        </v-content>
+      </v-app>
+    </v-app>
   </div>
 </template>
 
+<script>
+import NavigationBar from "./components/layout/NavigationBar.vue";
+import Footer from "./components/layout/Footer.vue";
+
+export default {
+  props: {
+    title: String
+  },
+  components: {
+    NavigationBar,
+    Footer
+  }
+};
+</script>
+
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
diff --git a/src/components/deckselection/DeckSelection.vue b/src/components/deckselection/DeckSelection.vue
index 180d33d..fa662ca 100644
--- a/src/components/deckselection/DeckSelection.vue
+++ b/src/components/deckselection/DeckSelection.vue
@@ -1,29 +1,34 @@
 <template>
   <div class="DeckSelection">
-    <TitleBar v-bind:title="title"></TitleBar>
-    <button>Löschen</button>
-    <button>Neues Deck hinzufügen</button>
-    <form action="/">
-      <Deck v-for="deck in decks" :key="deck.id" v-bind:deckname="deck.deckname"></Deck>
-      <input type="submit" value="Starten" />
-    </form>
-    <hr>
-    <router-link to="/about">Example Routing - About</router-link>
+    <v-container fluid>
+      <v-row align="center" justify="center">
+        <v-col cols="10">
+          <v-card>
+            <v-card-text>
+              <v-btn text>Löschen</v-btn>
+              <v-btn text>Neues Deck hinzufügen</v-btn>
+              <Deck v-for="deck in decks" :key="deck.id" v-bind:deckname="deck.deckname"></Deck>
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn text color="primary">Starten</v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
   </div>
 </template>
 
 <script>
-import TitleBar from "../layout/TitleBar.vue";
 import Deck from "./Deck.vue";
 
 export default {
   name: "DeckSelection",
   props: {
-    title: String,
     decks: Array
   },
   components: {
-    TitleBar,
     Deck
   }
 };
diff --git a/src/components/layout/Footer.vue b/src/components/layout/Footer.vue
new file mode 100644
index 0000000..5057dba
--- /dev/null
+++ b/src/components/layout/Footer.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="footer">
+    <v-footer :inset="footer.inset" app>
+      <span class="px-4">&copy; {{ new Date().getFullYear() }} Niko Lockenvitz & Rene-Pascal Fischer</span>
+    </v-footer>
+  </div>
+</template>
+
+        
+<script>
+export default {
+  name: "Footer",
+  props: {
+    title: String
+  },
+  data: () => ({
+    footer: {
+      inset: false
+    }
+  })
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>
diff --git a/src/components/layout/NavigationBar.vue b/src/components/layout/NavigationBar.vue
new file mode 100644
index 0000000..378df4a
--- /dev/null
+++ b/src/components/layout/NavigationBar.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="NavBar">
+    <v-navigation-drawer
+      v-model="primaryDrawer.model"
+      :clipped="primaryDrawer.clipped"
+      :floating="primaryDrawer.floating"
+      :mini-variant="primaryDrawer.mini"
+      :permanent="primaryDrawer.type === 'permanent'"
+      :temporary="primaryDrawer.type === 'temporary'"
+      app
+      overflow
+    >
+      <v-list>
+        <v-list-item :to="'/'" link>
+          <v-list-item-content>
+            <v-list-item-title>Startseite</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        
+        <v-list-item :to="'/about'" link>
+          <v-list-item-content>
+            <v-list-item-title>About</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+
+    <v-app-bar :clipped-left="primaryDrawer.clipped" app>
+      <v-app-bar-nav-icon
+        v-if="primaryDrawer.type !== 'permanent'"
+        @click.stop="primaryDrawer.model = !primaryDrawer.model"
+      ></v-app-bar-nav-icon>
+      <v-toolbar-title>{{ title }}</v-toolbar-title>
+    </v-app-bar>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NavigationBar",
+  props: {
+    title: String
+  },
+  data: () => ({
+    primaryDrawer: {
+      model: null,
+      type: "default (no property)",
+      clipped: true,
+      floating: false,
+      mini: false
+    }
+  })
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>
diff --git a/src/components/layout/TitleBar.vue b/src/components/layout/TitleBar.vue
deleted file mode 100644
index 55932c0..0000000
--- a/src/components/layout/TitleBar.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <div class="titlebar">
-    <h1>{{ title }}</h1>
-    <hr />
-  </div>
-</template>
-
-<script>
-export default {
-  name: "TitleBar",
-  props: {
-    title: String
-  }
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-</style>
diff --git a/src/main.js b/src/main.js
index 659607d..598ce99 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,10 +1,12 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
+import vuetify from './plugins/vuetify';
 
 Vue.config.productionTip = false
 
 new Vue({
   router,
+  vuetify,
   render: h => h(App)
 }).$mount('#app')
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
new file mode 100644
index 0000000..45dad56
--- /dev/null
+++ b/src/plugins/vuetify.js
@@ -0,0 +1,10 @@
+import Vue from 'vue';
+import Vuetify from 'vuetify/lib';
+
+Vue.use(Vuetify);
+
+export default new Vuetify({
+    theme: {
+        dark: true,
+    },
+});
diff --git a/src/views/About.vue b/src/views/About.vue
index 3fa2807..30d569b 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,5 +1,15 @@
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <v-container fluid>
+      <v-row align="center" justify="center">
+        <v-col cols="10">
+          <v-card>
+            <v-card-text>
+              <h1>This is an about page</h1>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
   </div>
 </template>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index e2f074a..f591c5e 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="deckselection">
-    <DeckSelection title="Fancy Flashcard" v-bind:decks="decks"></DeckSelection>
+    <DeckSelection v-bind:decks="decks"></DeckSelection>
   </div>
 </template>
 
@@ -29,12 +29,4 @@ export default {
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
 </style>
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
index 6bb3860..37765b0 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,3 +1,6 @@
 module.exports = {
-    publicPath: '/ffc/',
-};
\ No newline at end of file
+  "publicPath": "/ffc/",
+  "transpileDependencies": [
+    "vuetify"
+  ]
+}
\ No newline at end of file