JSFiddle - React, Tailwind, and code Playground

by vamsi krishna

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div id="app">
   <div class="container">
   		<div class="row">
			<div class="col-xs-3" style="background:#eee; height: 500px">
				<side-bar></dide-bar>
			</div>
			<div class="col-xs-9">
				<p>current route is : {{currentRoute}}</p>
				 <ul class="nav nav-pills"> 
      				<router-link to="/" activeClass="active" tag="li"><a>Home</a></router-link>
       				<router-link to="/another" activeClass="active" tag="li"><a>Another route</a></router-link>
     			</ul>
				<router-view></router-view>
			</div>
		</div>
  </div>  
</div>

JavaScript

var accordianNav = {
	template:`
		<div>
			<h5>accordian nav</h5>
		</div>
	`
}


var sideBar = {
	template: `
		<div>
			<h4>Sidebar</h4>
			<accordian-nav v-if="main"></accordian-nav>
		</div>
	`,
	components: {
		accordianNav
	},
	computed:{
		main(){
			return this.$route.path === '/'
		}
	}
}
var Home = {
	template:`
		<div>
			<h2>Home component '/'</h2>
			
		</div>
	`
	
}


var Another = {
	template:`
		<div>
			<h2>another route</h2>
		</div>
	`
}




const router = new VueRouter({
  routes: [
    {path: '/', component: Home},
	{path: '/another', component: Another}
  ]
})

const app = new Vue({ 
	router,
	computed:{
		currentRoute(){
			return this.$route.path
		}
	},
	components:{
		sideBar
	}
}).$mount('#app')