JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/vue.router/0.7.10/vue-router.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.1.0/css/bulma.min.css">
<div id="app">
	<nav class="nav has-shadow">
		<div class="container">
			<div class="nav-left">
				<a class="nav-item is-tab" v-link="{ path: '/' }">Home1</a>
				<a class="nav-item is-tab" v-link="{ path: '/items' }">Items</a>
				<a class="nav-item is-tab" v-link="{ path: '/about' }">About</a>
				<a class="nav-item is-tab" v-link="{ path: '/contact' }">Contact</a>
			</div>
		</div>
	</nav>
	<div class="container">
		<router-view></router-view>
	</div>
</div>

<template id="home">
	<section class="hero is-info is-large">
		<div class="hero-body">
			<div class="container">
				<h1 class="title">
					Home
				</h1>
				<h2 class="subtitle">
					Vue-Router Example
				</h2>
			</div>
		</div>
	</section>
</template>

<template id="items">
	<h1 class="title">Items</h1>
	<div class="card" v-for="item in items">
		<div class="card-image">
			<figure class="image is-4by3">
				<img src="http://placehold.it/300x225" alt="">
			</figure>
		</div>
		<div class="card-content">
			<div class="content">
				{{item.body}}
			</div>
		</div>
	</div>
</template>

<template id="about">
	<h1 class="title">About</h1>
	<div>Hello :)</div>
</template>

<template id="contact">
	<h1 class="title">Contact</h1>
	<p class="control">
	  <textarea class="textarea" placeholder="Please Send me a message"></textarea>
	</p>
	<p class="control">
		<button class="button is-primary">Submit</button>
		<button class="button is-link">Cancel</button>
	</p>
</template>

<template id="not-found">
	<h1 class="title">Not Found</h1>
</template>

JavaScript

/**
 * Define your components
 */

// For 404 page
var notFound = Vue.extend({
   // You can use also use template path (Thanks to @jcerdan)
   // path : '/path/to/component.html'
   template: '#not-found'
});

var homeComponent = Vue.extend({
	template: '#home'
});

var itemsComponent = Vue.extend({
   template: '#items',
	 data: function() {
	 	return {
			items: []
		} 	
	 },
	 ready: function()	{
		for(var i = 0 ; i < 10 ; i++) {
			this.items.push({ body: 'item #' + i});
		}
	 }
});

var aboutComponent = Vue.extend({
   template: '#about'
});

var contactComponent = Vue.extend({
   template: '#contact'
});


Vue.use(VueRouter);

var router = new VueRouter({
   history: false,
   root: '/'
});

// Router map for defining components
router.map({
   // For Not Found template
   '*': {
      component: notFound
   },

   '/': {
      component: homeComponent,      
   },
	 
	 '/items': {
			component: itemsComponent,
	 },
	 
   '/about': {
      component: aboutComponent,
   },

   '/contact': {
      component: contactComponent
   }
});

var App = Vue.extend()

router.start(App, '#app')