https://www.udemy.com/vuejs-2-the-complete-guide/learn/v4/t/practice/70/submission

section7_assignment6.js

// main.js start
import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})
// main.js end

// Header.vue start
<template>
    <header>
        <h1>Server Status</h1>
    </header>
</template>

<script>
export default {}
</script>
// Header.vue end

// Footer.vue start
<template>
    <footer>
        <p>All Servers are managed here</p>
    </footer>
</template>

<script>
export default {}
</script>
// Footer.vue end

// ServerList.vue start
<template>
    <ul class="list-group">
        <li class="list-group-item" v-for="index in 5" :key="index">
            Server #{{ index }}
        </li>
    </ul>
</template>

<script>
export default {
    methods: {
        previewStatus($event) {
            console.log(index);
            console.log($event);
        }
    }
}
</script>
// ServerList.vue end

// ServerDetails.vue start
<template>
  <p>Server Details are currently not updated</p>
</template>

<script>
export default {}
</script>
// ServerDetails.vue end

// Layout.vue start
<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <fkg-header></fkg-header>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                <fkg-server-list></fkg-server-list>
            </div>
            <div class="col-xs-12 col-sm-6">
                <fkg-server-details></fkg-server-details>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-xs-12">
                <fkg-footer></fkg-footer>
            </div>
        </div>
    </div>
</template>

<script>
import Header from './Header.vue';
import Footer from './Footer.vue';
import ServerList from './ServerList.vue';
import ServerDetails from './ServerDetails.vue';
export default {
    components: {
        'fkg-header': Header,
        'fkg-server-list': ServerList,
        'fkg-server-details': ServerDetails,
        'fkg-footer': Footer
    }
}
</script>
// Layout.vue end

// App.vue start
<template>
    <fkg-layout></fkg-layout>
</template>

<script>
import Layout from './Layout.vue';
export default {
    components: {
        'fkg-layout': Layout
    }
}
</script>
// App.vue end