Added 404 page

src/router/index.js

@@ -63,6 +63,16 @@ const routes = [
         return !authorized;
       }
     }
+  },
+  {
+    path: '*',
+    name: 'NotFound',
+    component: () => import(/* webpackChunkName: "about" */ '../views/NotFound'),
+    meta: {
+      allowVisit() {
+        return true;
+      }
+    }
   }
 ]
 

src/views/NotFound.vue

@@ -0,0 +1,33 @@
+<template>
+  <b-container>
+    <b-row class="mt-3">
+      <b-col>
+    <div class="notfound">
+      <h1>404: Content not found</h1>
+      <div class="mb-5">
+        <p>It seems that you may have followed a broken link. There is nothing we can do about this. :(</p>
+        <p>You may go back to your collection now.</p>
+      </div>
+      <b-button :to="{name: 'Collections'}">Go to my collection</b-button>
+    </div>
+      </b-col>
+      <b-col>
+        <b-aspect aspect="5:4" class="py-3">
+          <video autoplay loop muted id="luna-irl">
+            <source src="@/assets/hat.mp4" type="video/mp4">
+          </video>
+        </b-aspect>
+      </b-col>
+    </b-row>
+  </b-container>
+</template>
+
+<script>
+export default {
+  name: "NotFound"
+}
+</script>
+
+<style scoped>
+
+</style>