collinglass/.pagevue.js

## .pagevue.js
Simple Multi-View Routing with Page.js and Vue.js

## app.css
html, body, #app{
	width: 100%;
	height: 100%;
}

#leftpane{
	float: left;
	width: 33%;
}

#rightpane{
	float: right;
	width: 33%;
}

#centerpane{
	display: inline-block;
	width: 33%;
}

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Simple Multi-View Routing</title>
	<script src="js/page.js"></script>
	<script src="js/vue.js"></script>
	<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
	<ul>
		<li><a href="/">Home</a></li>
		<li><a href="/page1">Page 1</a></li>
		<li><a href="/page2">Page 2</a></li>
	</ul>
	<div id="app">
		<div id="leftpane" v-view="leftView">{{leftData}}</div>
		<div id="centerpane" v-view="mainView">{{msg}}</div>
		<div id="rightpane" v-view="rightView">{{rightData}}</div>
	</div>

	<script src="js/app.js"></script>
</body>
</html>

## pagevue.js
Vue.config('debug', true)

Vue.component('home', {
	template: '<h1>Home Page</h1><content/>',
	created: function(){
		this.leftData = "Beginning Left View!"
		this.msg = "Hoooooooo ..mme!"
		this.rightData = "You will never see me !"
	}
});

Vue.component('page1', {
	template: '<h1>Page 1</h1><content/>',
	created: function(){
		this.leftData = "Page 1 and 2 Left Data!"
		this.msg = "Page 1 !"
		this.rightData = "Beginning and Page 1 Right View!"
	}
});

Vue.component('page2', {
	template: '<h1>Page 2</h1><content/>',
	created: function(){
		this.leftData = "You will never see this!"
		this.msg = "Look at page 2!"
		this.rightData = "Right View!"
	}
});

var app = new Vue({
    el: '#app',
    data: {
        leftView: 'home',
        mainView: 'home',
        rightView: 'page1'
    }
})

function index(){
	app.leftView = "home";
	app.mainView = "home";
	app.rightView = "page1";
};

function page1(){
	app.leftView = "page1";
	app.mainView = "page1";
	app.rightView = "page1";
};

function page2(){
	app.mainView = "page2";
	app.rightView = "page2";
};

page('/', index);
page('/page1', page1);
page('/page2', page2);
page();
	html, body, #app{
	width: 100%;
	height: 100%;
	}

	#leftpane{
	float: left;
	width: 33%;
	}

	#rightpane{
	float: right;
	width: 33%;
	}

	#centerpane{
	display: inline-block;
	width: 33%;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Simple Multi-View Routing</title>
	<script src="js/page.js"></script>
	<script src="js/vue.js"></script>
	<link rel="stylesheet" type="text/css" href="css/app.css">
	</head>
	<body>
	<ul>
	<li><a href="/">Home</a></li>
	<li><a href="/page1">Page 1</a></li>
	<li><a href="/page2">Page 2</a></li>
	</ul>
	<div id="app">
	<div id="leftpane" v-view="leftView">{{leftData}}</div>
	<div id="centerpane" v-view="mainView">{{msg}}</div>
	<div id="rightpane" v-view="rightView">{{rightData}}</div>
	</div>

	<script src="js/app.js"></script>
	</body>
	</html>
	Vue.config('debug', true)

	Vue.component('home', {
	template: '<h1>Home Page</h1><content/>',
	created: function(){
	this.leftData = "Beginning Left View!"
	this.msg = "Hoooooooo ..mme!"
	this.rightData = "You will never see me !"
	}
	});

	Vue.component('page1', {
	template: '<h1>Page 1</h1><content/>',
	created: function(){
	this.leftData = "Page 1 and 2 Left Data!"
	this.msg = "Page 1 !"
	this.rightData = "Beginning and Page 1 Right View!"
	}
	});

	Vue.component('page2', {
	template: '<h1>Page 2</h1><content/>',
	created: function(){
	this.leftData = "You will never see this!"
	this.msg = "Look at page 2!"
	this.rightData = "Right View!"
	}
	});

	var app = new Vue({
	el: '#app',
	data: {
	leftView: 'home',
	mainView: 'home',
	rightView: 'page1'
	}
	})

	function index(){
	app.leftView = "home";
	app.mainView = "home";
	app.rightView = "page1";
	};

	function page1(){
	app.leftView = "page1";
	app.mainView = "page1";
	app.rightView = "page1";
	};

	function page2(){
	app.mainView = "page2";
	app.rightView = "page2";
	};

	page('/', index);
	page('/page1', page1);
	page('/page2', page2);
	page();