JSFiddle - React, Tailwind, and code Playground

by PlĂ­nio Naves

HTML

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

<div id="app">
  <p>Hello Vue!</p>
  <ul>
    <li><router-link to="/">Home</router-link></li>
    <li><router-link to="/about">About</router-link></li>
  </ul>
  <transition name="fade">
     <router-view class="child-view"></router-view>
  </transition>
</div>

CSS

.fade-enter, .fade-leave-active {
  opacity: 0;
}

.fade-enter {
  transform: translateX(-30px);
}

.fade-enter-active, .fade-leave-active {
  transition: all 0.3s cubic-bezier(.55,0,.1,1);
}

.fade-leave-active {
  transform: translateX(30px);
}

.child-view {
  position: absolute;
}

JavaScript

var Home = { template: '<h2>Home</h2>' };
var About = { template: '<h2>About</h2>' };

new Vue({
	el: '#app',
  router: new VueRouter({
  	routes: [
    	{ path: '', component: Home },
      { path: '/about', component: About }
    ]
  })
});