JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.0.0/vuex.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.js"></script>
<div id="app">
	<Navigation></Navigation>
	<router-view></router-view>
</div>

<template id="navigation">
	<nav>
		<router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
	</nav>
</template>

<template id="home">
	<div>
		<h1>Home</h1>
		<item-list></item-list>
	</div>	
</template>

<template id="about">
	<div>
		<h1>About</h1>
	</div>
</template>

<template id="item-list">
	<div>
		<h2>Item List</h2>
		<ul>
			<li v-for="item in items">
				<Item v-bind:item=item></Item>
			</li>
		</ul>
	</div>
</template>

<template id="item">
	<div>
		{{item.title}}
	</div>
</template>

<template id="item-view">
	<div>
		ItemView
	</div>
</template>

Babel + JSX

Vue.component('Navigation', {
  template: '#navigation'
})

const Home = Vue.component('Home', {
  template: '#home'
})

const About = Vue.component('About', {
  template: '#about'
})

const ItemList = Vue.component('ItemList', {
	template: '#item-list',
	data :function() {
		return {
			items: [
				{ title: 'item 0' },
				{ title: 'item 1' },
				{ title: 'item 2' }
			]
		};
	}
});

const Item = Vue.component('Item', {
  props: ['item'],
	template: '#item'
});

const ItemView = Vue.component('ItemView', {
  props: ['item'],
	template: '#item-view'
});

const HomeRoute = { template: '#home' }
const AboutRoute = { template: '#about' }
const ItemViewRoute = { template: '#item-view' }

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
	{ path: '/item/:id', component: ItemView }
]

const router = new VueRouter({
	routes
})

const vue = new Vue({
	router,
  el: '#app'
});