generic reusable header

frontend/src/components/Header.vue

@@ -0,0 +1,16 @@
+<template>
+  <v-flex mb-4>
+    <h1 class="display-2 font-weight-bold mb-3">
+      Hello World!
+    </h1>
+    <p class="subheading font-weight-regular">
+      App under development, please don't submit any valuable data!
+    </p>
+  </v-flex>
+</template>
+
+<script>
+export default {
+  name: "Header"
+}
+</script>

frontend/src/views/About.vue

@@ -1,11 +1,7 @@
 <template>
   <v-container>
-    <v-flex mb-4>
+    <Header />
-      <h1 class="display-2 font-weight-bold mb-3">Hello World!</h1>
+
-      <p class="subheading font-weight-regular">
-        App under development, please don't submit any valuable data!
-      </p>
-    </v-flex>
     <p>user session: {{ sessionID }}</p>
     <v-btn @click.native="logout">Logout</v-btn>
   </v-container>
@@ -15,9 +11,15 @@
 import * as Cookies from 'js-cookie'
 import axios from '@/plugins/axios'
 
+import Header from '@/components/Header.vue'
+
 export default {
   name: 'About',
 
+  components: {
+    Header
+  },
+
   data: () => ({
     sessionID: ''
   }),

frontend/src/views/Home.vue

@@ -1,13 +1,6 @@
 <template>
   <v-container>
-    <v-flex mb-4>
+    <Header />
-      <h1 class="display-2 font-weight-bold mb-3">
-        Hello World!
-      </h1>
-      <p class="subheading font-weight-regular">
-        App under development, please don't submit any valuable data!
-      </p>
-    </v-flex>
 
     <LoginForm />
     <RegisterForm />
@@ -18,6 +11,7 @@
 import * as Cookies from 'js-cookie'
 import axios from '@/plugins/axios'
 
+import Header from '@/components/Header.vue'
 import LoginForm from '@/components/forms/Login.vue'
 import RegisterForm from '@/components/forms/Register.vue'
 
@@ -31,6 +25,7 @@ export default {
   },
 
   components: {
+    Header,
     LoginForm,
     RegisterForm
   },