JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="https://unpkg.com/vue-router@2.0.0-rc.7"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="app">
  <router-link to="/foo">Go to Foo</router-link>
  <router-link to="/bar">Go to Bar</router-link>
  <transition name="fade" mode="out-in">
  <router-view></router-view>
  </transition>
</div>

<template id="foo">
    <div>
      <h2>Foo</h2>
    </div>
</template>

<template id="bar">
    <div>
      <h2>Bar</h2>
    </div>
</template>

CSS

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}

JavaScript

const Foo = {
  template: '#foo'
}


const Bar = {
  template: '#bar'
}

const routes = [{
  path: '/foo',
  component: Foo
}, {
  path: '/bar',
  component: Bar
}];

const router = new VueRouter({
  routes
});

const app = new Vue({
  router
}).$mount('#app')