vue-router 2 template

Template for vue-router 2

by waffl

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <transition :name="transitionName">
    <router-view></router-view>
  </transition>
</div>

CSS

.box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: black;
}

.slide-left-enter {
  transform: translateX(100vw);
}

.slide-left-enter-to, .slide-left-leave {
  transform: translateX(0);
}

.slide-left-leave-to {
  transform: translateX(-100vw);
}

.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.4s ease-out;
}

.slide-right-enter {
  transform: translateX(-100vw);
}

.slide-right-enter-to, .slide-right-leave {
  transform: translateX(0vw);
}

.slide-right-leave-to {
  transform: translateX(100vw);
}
.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 0.4s ease-out;
}

Babel + JSX

const Home = { template: '<div>Home</div>' }
const Foo = { template: '<div>Foo</div>' }

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

new Vue({
	router,
  el: '#app',
  data: {
    msg: 'Hello World'
  }
}
})