<template>
   <div class="layout-wrap">
      <Header></Header>
      <Menu></Menu>
      <div class="main-wrap">
         <router-view />
      </div>
      <Footer></Footer>
   </div>
</template>
 
<script>
import Header from '../layout/Header.vue';
import Menu from '../layout/Menu.vue';
import Footer from '../layout/Footer.vue';

const App = {
   data: () => {
      return {
      }
   },

   methods: {

   },

   watch: {

   },

   computed: {

   },

   components: {
      Header: Header,
      Menu: Menu,
      Footer: Footer,
   },
   mounted: () => {
      console.log('Vue mounted');
   }
}

export default App;
</script>

<style scoped>
.layout-wrap {
   width: 100%;
   height: 100%;
   display: grid;
   grid-template-columns: 200px minmax(1234px, 1fr);
   grid-template-rows: 50px 1fr 33px;
   grid-template-areas:
      "nav header "
      "nav  main  "
      "nav  footer  "
}

.main-wrap {
   padding: 10px;
   grid-area: main;
}
</style>