footer.vue

<template>
  <div class="footer">
    <div class="footer-title">
      FOOTER
    </div>
</div>
</template>
<script>
module.exports = {};
</script>
<style scoped>
.footer {
  height: 50px;
  width: 100%;
  background-color: #4d4d4d;
  position: relative;
}
.footer > .footer-title {
  display: block;
  text-align:center;
  font-size: 22px;
  color: #fff;
  padding: 10px 10px 10px 10px;
}
</style>

home.vue

<template>
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
  <router-view name="main" ></router-view>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>
</template>
<script>
module.exports = {};
</script>

nav.vue

<template>
  <div class="nav">
  <div class="nav-header">
    <div class="nav-title">
      JoGeek
    </div>
  </div>
  
  <div class="nav-links">
        <router-link  :to="{ name: 'page1'}">   
          page 1
        </router-link>
        <router-link  :to="{ name: 'page2'}">   
          page 2
        </router-link>
        <router-link  :to="{ name: 'page3'}">   
          page 3
        </router-link>
  </div>
</div>
</template>
<script>
module.exports = {};
</script>
<style scoped>
.nav {
  height: 50px;
  width: 100%;
  background-color: #4d4d4d;
  position: relative;
}

.nav > .nav-header {
  display: inline;
}

.nav > .nav-header > .nav-title {
  display: inline-block;
  font-size: 22px;
  color: #fff;
  padding: 10px 10px 10px 10px;
}

.nav > .nav-links {
  display: inline;
  float: right;
  font-size: 18px;
}

.nav > .nav-links > a {
  display: inline-block;
  padding: 13px 10px 13px 10px;
  text-decoration: none;
  color: #efefef;
}

.nav > .nav-links > a:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.nav > #nav-check {
  display: none;
}
</style>

page1.vue

<template>
  <div class="component">
    <h1>{{ title }}</h1>
    <p> COUNT IS {{count}}</p>
    <button @click="inc">Increase</button>
    <button @click="dec">Decrease</button>
    <my-component></my-component>
  </div>
</template>

<script>
module.exports = {
  components:{
    'my-component': httpVueLoader('https://gist.githubusercontent.com/muthu32/88cd0faf41e2c60517321172be012a5c/raw/1b92368a0741799f65b2b39abbd1f051a8e0e657/demo.vue')
  },
  data: function() {
    return {
      title: "Page 1",
      count: 0
    };
  },
  methods: {
  inc:function()
  {
++this.count;
  },
  dec:function()
  {
--this.count;
  }
  }
};
</script>

<style scoped>
.component {
  border: 1px solid #000;
  border-radius:15px;
  padding: 10px;
  margin: 10px;
  color: red;
}
.component > img {
  width: 100%;
}
</style>

page2.vue

<template>
  <div class="component">
    <h1>{{ title }}</h1>
    <p @click="clickRow">{{ subtitle }}</p>
    <p>{{ content }}</p> 
  </div>
</template>

<script>
module.exports = {
  data: function() {
    return {
      title: "PAGE 2",
      subtitle: "IT IS ALERT METHOD",
      content: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis cumque eius illo officia consequuntur similique illum sint assumenda harum placeat doloremque blanditiis earum, quaerat minus, fugiat voluptate, nesciunt sit enim!"
    };
  },
  methods: {
  clickRow:function()
  {
  alert("Alert");
  }
  }
};
</script>

<style scoped>
.component {
  border: 1px solid #000;
  padding: 10px;
  margin: 10px;
  color: blue;
}
.component > img {
  width: 100%;
}
</style>

page3.vue

<template>
  <div class="component">
    <h1>{{ title }}</h1>
    <p>{{ subtitle }}</p>
    <p>Choose an template </p> 
    <select v-model="selectedTemplae">
<option value="0">Select an template</option>
<option v-for="option in templates" v-bind:value="option.id" >{{ option.name }}</option>
</select>
    <component :is="computedtemplate" />
  </div>
</template>

<script>
module.exports = {
  data: function() {
    return {
      title: "PAGE 3",
      subtitle: "COMPUTED TEMPLATE",
      selectedTemplae: 0,
      loadedTemplate:{},
      templates:[{
      id:1,
      url:'https://gist.githubusercontent.com/muthu32/88cd0faf41e2c60517321172be012a5c/raw/e891ad3413eaf1bd1d2dc0a31ddbf0cfd515e841/page1.vue',
      name:'page1'
      },{
      id:2,
      url:'https://gist.githubusercontent.com/muthu32/88cd0faf41e2c60517321172be012a5c/raw/e891ad3413eaf1bd1d2dc0a31ddbf0cfd515e841/page2.vue',
      name:'page2'
      }]
    };
  },
  computed: {
   computedtemplate: function()
   {
     if(this.loadedTemplate[this.selectedTemplae])
       {
return this.loadedTemplate[this.selectedTemplae];
       }
     else if(this.selectedTemplae>0)
       {
var id = this.selectedTemplae;
const url = this.templates.find(o => o.id === id).url;
this.loadedTemplate[this.selectedTemplae] =httpVueLoader(url); 
return this.loadedTemplate[this.selectedTemplae] 
       } 
   }
   },
};
</script>

<style scoped>
.component {
  border: 1px solid #000;
  padding: 10px;
  margin: 10px;
  color: blue;
}
.component > img {
  width: 100%;
}
</style>

template.vue

<template>
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>
</template>
<script>
module.exports = {};
</script>