Added 404 page

src/components/layout/LayoutMinimal.vue

@@ -1,13 +1,18 @@
 <template>
-  <div>
+  <main>
     <BaseLogo id="logo" size="medium" center class="space-top" />
-    <BaseContainer :width="width" center class="space-bottom">
+    <BaseContainer
+      :width="width"
+      center
+      class="space-bottom"
+      :class="{ 'center-content': center }"
+    >
       <BaseTitle v-if="title" center size="huge" class="centered">
         {{ title }}
       </BaseTitle>
       <slot />
     </BaseContainer>
-  </div>
+  </main>
 </template>
 
 <script>
@@ -30,6 +35,11 @@ export default {
     title: {
       default: "",
       type: String
+    },
+    center: {
+      default: false,
+      required: false,
+      type: Boolean
     }
   }
 };
@@ -41,4 +51,7 @@ export default {
 
 .space-bottom
   margin-bottom: 5rem
+
+.center-content
+  text-align: center
 </style>

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from "vue";
 import VueRouter from "vue-router";
 import store from "../store";
 import Login from "../views/Login.vue";
+import NotFound from "../views/NotFound.vue";
 import Home from "../views/Home.vue";
 import History from "../views/History.vue";
 
@@ -42,6 +43,11 @@ const routes = [
       store.dispatch("logout");
       next("/");
     }
+  },
+  {
+    path: "*",
+    name: "NotFound",
+    component: NotFound
   }
 ];
 

src/views/NotFound.vue

@@ -0,0 +1,17 @@
+<template>
+  <LayoutMinimal center title="Couldn't find what you were looking for :(">
+    404
+  </LayoutMinimal>
+</template>
+
+<script>
+// @ is an alias to /src
+import LayoutMinimal from "@/components/layout/LayoutMinimal";
+
+export default {
+  name: "NotFound",
+  components: {
+    LayoutMinimal
+  }
+};
+</script>