Vuejs 2.5 version with Children and Flex

by jpeter06

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="main">
<div id="cabecera">TITULO</div>
  <p-menu></p-menu>
  <div id="pageCont">
    <transition :name="transitionName" >
    <keep-alive :max="2"> <!-- Cache de páginas-->
      <component v-bind:is="page"></component>
      </keep-alive>
    </transition>
  </div>
</div>

<template id="pMenu">
  <div class="menu">
    <ul>
      <li  v-bind:class="page==item ?'focused':''" v-for="item  in items" v-on:click="click(item)">
      {{item}}
      </li>
    </ul>
  </div>
</template>

<template id="container">
  <div class="container">
    <slot></slot>
  </div>
</template>

<template id="flip">
    <div class="flipContainer" v-bind:class="{ 'flip': isFlipped}">
       <div class="flipIcon" v-on:click="flip">FL</div>
       <div class="flipped upper"><slot></slot></div>
       <div class="flipped lower container-fluid">
		    <h3>Parametros:</h3>
		    <form role="form" @submit="flip" >
			    <div class="form-group">
			      <label for="text">Título:</label>
                <input type="text" class="form-control" 
                id="text" placeholder="Enter title"></input>
			    </div>
			    <button type="submit" v-on:click="flip" class="btn btn-primary">Guardar</button>
		    </form>
  </div>
</template>


<template id="mapa">
      <div class="fullsize map">
        <h5>MAP</h5>
      </div>
</template>

<template id="graph">
      <div class="fullsize graph">
        <h5>GRAPH</h5>
      </div>
</template>



<!-- PAGES...

CSS

html, body ,#main
{
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    background:#888;
    font-family:Arial;
}

#main{
  display:flex; flex-direction:column;
}
#cabecera{  flex-grow:0;height:40px;text-align:center; color:white; font-size:30px}
.menu{ flex-grow:0}
#pageCont{flex-grow:1;position:relative;}
.page{width:100%;height:100%;position:relative }
/* donde introducimos las paginas cargadas */
.page{
   position: absolute;top:0px;left:0px;
   box-sizing: border-box;
   display: block;
   padding:2px;
}

.graph{
  display: block;
    background:#ddd;
}

.table{
  display: block;
    background:lightgray;
}

.map{
  display: block;
    background:#eee;
}

.container{
  box-sizing: border-box;
  display: block;
    float:left;
    padding:2px;
 }

.fullsize{
    box-sizing: border-box;
    height:100%;
    width:100%;
    padding:2px;
}


/*** MENU ***/
.menu{
    height:60px;
    width:100%;
}

.menu ul{
    list-style:none;
    display: inline-block;
    float:left;
    margin-top:10px;
}

.menu ul li{
    display: inline-block;
    padding: 10px 20px;
    cursor:pointer;
    background-color:#eee;
    color:#7B8585;
    transition:0.3s;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}

.menu ul li:hover{
    background-color:#beecea;
}

.menu ul li.focused{
    color:#fff;
    background-color:#41c7c2;
}

.menu p{
    padding-top:12px;
    font-size:12px;
    color:white;
    float:left;
    margin-left:20px;
    font-size:20px;
    font-family:Verdana, Geneva, sans-serif;
}

/* http://davidwalsh.name/css-flip */
.flipContainer {
  position: relative;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  display:block;
}

.flipContainer > div.flipped {
  position: absolute;
  left: 0; 
  top: 0;
  width: 100%;
  height: 100%;
  background: #463;
  transition: 0.6s...

JavaScript

///////// pMenu //////////
var pMenu = Vue.extend({
  template: '#pMenu',
  data:function(){
  	return {
    		page:'page1',
    		items:['page1',"page2",'page3']
        }
  },
  methods:{
  	click:function(item){
      var isR=this.items.indexOf(item)>this.items.indexOf(this.page);
    	this.page=item;
      vv.transitionName=isR?'pageL':'pageR';
      vv.page=item;
    },
 		isFocused:function(item){
    	return item==this.page?'focused':''
    }   
  }
})
Vue.component('p-menu', pMenu);

/////////// CONTAINER ///////////////
var container = Vue.extend({
  template: '#container'
})
Vue.component('container', container);  

/////////// FLIP ///////////////
var flip = Vue.extend({
  template: '#flip',
  data: function () {
    return  {  	isFlipped:false }
  },
  methods:{
  	flip:function(event){
    	this.isFlipped=!this.isFlipped;
      event.preventDefault();
    }
  }
})
Vue.component('flip', flip);  


/////////// MAP ///////////////
var mapa = Vue.extend({
  template: '#mapa'
})
Vue.component('mapa', mapa);  

/////////// GRAPH ///////////////
var graph = Vue.extend({
  template: '#graph',
  mounted: function () { 
    addPIE(this.$el);
  }
})
Vue.component('graph', graph);  



/////////// PAGE 1 ///////////////
var page1 = Vue.extend({
  template: '#page1'
})
Vue.component('page1', page1);  

/////////// PAGE 2 ///////////////
var page2 = Vue.extend({
  template: '#page2'
})
Vue.component('page2', page2);  

/////////// PAGE 3 ///////////////
var page3 = Vue.extend({
  template: '#page3'
})
Vue.component('page3', page3);  

///////////// MAIN //////////////

var vv=new Vue({
  el: '#main',
  data: {
  	page:'page1',
    transitionName:'pageL'
  },
  computed:{
  },
  methods: {
 }
})

/////////// AUX FUNCTIONS //////////////
//WHITH PIE

function	addPIE(identificador) {


	
	    // Build the chart
	    $(identificador).highcharts({
	        chart: {
	            plotBackgroundColor: 'rgba(0,0,0,0)',
	            backgroundColor: 'rgba(0,0,0,0)',
	      ...