Styled w Vuetify

src/App.vue

@@ -1,17 +1,27 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <my-header></my-header>
+    <server-details></server-details>
+    <servers></servers>
+    <my-footer></my-footer>
   </div>
 </template>
 
 <script>
 import HelloWorld from './components/HelloWorld.vue'
+import Footer from './components/Footer.vue'
+import Header from './components/Header.vue'
+import ServerDetails from './components/ServerDetails.vue'
+import Servers from './components/Servers.vue'
 
 export default {
   name: 'app',
   components: {
-    HelloWorld
+    'hello-world' : HelloWorld,
+    'my-header' : Header,
+    'server-details' : ServerDetails,
+    'servers' : Servers,
+    'my-footer' : Footer
   }
 }
 </script>
@@ -21,8 +31,8 @@ export default {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
+  padding: 20px;
   color: #2c3e50;
-  margin-top: 60px;
+  margin-top: 0px;
 }
 </style>

src/components/Footer.vue

@@ -0,0 +1,17 @@
+<template>
+  <v-footer class="pa-3">
+    <div>All servers managed here</div>
+    <v-spacer></v-spacer>
+    <div>&copy; {{ new Date().getFullYear() }}</div>
+  </v-footer>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/components/Header.vue

@@ -0,0 +1,15 @@
+<template>
+  <v-toolbar dense m5>
+    <v-toolbar-title>Server Status</v-toolbar-title>
+  </v-toolbar>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped>
+    .v-toolbar {margin-bottom: 20px;}
+</style>

src/components/ServerDetails.vue

@@ -0,0 +1,57 @@
+<template>
+    <v-layout row>
+        <v-flex xs12 sm6>
+        <v-card>
+            <v-toolbar color="grey">
+            <!-- <v-toolbar-side-icon></v-toolbar-side-icon> -->
+
+            <v-toolbar-title>Server Details</v-toolbar-title>
+            <v-spacer></v-spacer>
+            </v-toolbar>
+            <v-list>
+            <v-list-tile
+                v-for="item in items"
+                :key="item.id"
+                avatar
+                @click=""
+            >
+                <v-list-tile-action>
+                <v-icon v-if="item.icon" color="pink">star</v-icon>
+                </v-list-tile-action>
+
+                <v-list-tile-content>
+                    {{ item.server }} : {{ item.status }}
+                </v-list-tile-content>
+
+                <v-list-tile-avatar>
+                <!-- <img :src="item.avatar"> -->
+                <v-icon>info</v-icon>
+                </v-list-tile-avatar>
+            </v-list-tile>
+            </v-list>
+        </v-card>
+        </v-flex>
+    </v-layout>
+
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            items: [
+                { server: 'Server 1', status: 'Live' },
+                { server: 'Server 2', status: 'Live' },
+                { server: 'Server 3', status: 'Live' },
+                { server: 'Server 4', status: 'Live' },
+                { server: 'Server 5', status: 'Down' }
+            ]
+        }
+    }
+}
+</script>
+
+<style scoped>
+    .v-toolbar { color: white; padding: 0px;}
+    ul {list-style: none;}
+</style>

src/components/Servers.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <p>Servers info will update shortly.</p>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped>
+    div { padding: 20px; padding-bottom: 0px; }
+</style>