JSFiddle - React, Tailwind, and code Playground

by Thorsten

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.0-beta.1/vue-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0-beta.4/vue.min.js"></script>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/">Go to Home</router-link>
    <router-link to="/foo">Go to Foo</router-link>
  </p>
  <transition enter-active-class="fadeIn" leave-active-class="fadeOut" mode="out-in"> 
    <router-view class="animated" keep-alive></router-view> 
  </transition>
</div>

JavaScript

Vue.use(VueRouter)

var App = Vue.extend({});
var Home = Vue.extend({template: '<div>Home</div>'});
var Foo = Vue.extend({template: '<div>Foo</div>'});

const router = new VueRouter({
	routes: [
		{path: '/', component: Home},
		{path: '/foo', component: Foo},
	]
});

new Vue(Vue.util.extend({ router }, App)).$mount('#app');