Setup top level vue components. Please read comment for more info.

frontend/components/App.vue

@@ -1,27 +1,35 @@
 <template>
 	<div class="app">
-		Musare ;)
+		<component-header></component-header>
+		<component-body></component-body>
+		<component-footer></component-footer>
 	</div>
 </template>
 
 <script>
 	// TODO: Implement these files
-	//import Header from './components/Header.vue'
-	//import Body from './components/Body.vue'
-	//import Footer from './components/Header.vue'
+	import ComponentHeader from './ComponentHeader.vue'
+	import ComponentBody from './ComponentBody.vue'
+	import ComponentFooter from './ComponentFooter.vue'
 
 	export default {
 		data() {
-			return {
-				msg: 'hello vue'
-			}
+			return {}
 		},
-		components: { /*Header, Body, Footer*/ }
+		components: { ComponentHeader, ComponentBody, ComponentFooter }
 	}
 </script>
 
 <style lang="sass">
-	body {
-		background-color: #ff0000;
+	* { box-sizing: border-box; }
+	html {
+		width: 100%;
+		height: 100%;
+		body {
+			width: 100%;
+			height: 100%;
+			margin: 0;
+			padding: 0;
+		}
 	}
 </style>

frontend/components/ComponentBody.vue

@@ -0,0 +1,25 @@
+<template>
+	<div class="body">
+		{{ title }}	
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				title: "This is thee body"
+			}
+		}
+	}
+</script>
+
+<style lang="sass" scoped>
+	.body {
+		width: 100%;
+		height: 256px;
+		line-height: 256px;
+		text-align: center;
+		background-color: green;
+	}
+</style>

frontend/components/ComponentFooter.vue

@@ -0,0 +1,25 @@
+<template>
+	<div class="footer">
+		{{ title }}	
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				title: "MusareNode is using the newest of technologies (;"
+			}
+		}
+	}
+</script>
+
+<style lang="sass" scoped>
+	.footer	{
+		width: 100%;
+		height: 64px;
+		line-height: 64px;
+		text-align: center;
+		background-color: blue;
+	}
+</style>

frontend/components/ComponentHeader.vue

@@ -0,0 +1,25 @@
+<template>
+	<div class="header">
+		{{ title }}	
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				title: "Musare ;)"
+			}
+		}
+	}
+</script>
+
+<style lang="sass" scoped>
+	.header {
+		width: 100%;
+		height: 64px;
+		line-height: 64px;
+		text-align: center;
+		background-color: red;
+	}
+</style>

frontend/main.js

@@ -1,9 +1,4 @@
 import Vue from 'vue';
 import App from './components/App.vue';
 
-new Vue({
-	el: 'body',
-	components: {
-		app: App
-	}
-});
+new Vue({ el: 'body', components: { App } });