@greene48 said in Transitions between pages, routes, vues: I know this was a while ago, but in case anyone comes along, this is how I got the “subpage” sliding in from the right to work: <template> <div> <transition :name="transitionName"> <keep-alive> <router-view class="child-slide"></router-view> </keep-alive> </transition> </div> </template> <script> export default { data () { return { transitionName: '' } }, beforeRouteUpdate (to, from, next) { const toDepth = to.path.split('/').length const fromDepth = from.path.split('/').length this.transitionName = toDepth < fromDepth ? 'overlap-left' : 'overlap-right' next() } } </script> <style> .child-slide { width: 100%; position: absolute; transition: all 0.3s; } .overlap-left-enter, .overlap-left-enter-active { opacity: 0; } .overlap-left-enter-to { opacity: 1; } .overlap-left-leave-active { transform: translate(100%, 0); } .overlap-right-leave-active { z-index: -1; opacity: 1; transform: translate(-30px, 0); } .overlap-right-enter { transform: translate(100%, 0); } </style> This is a bit jumpy. Was wondering if you had to a more updated version of this. Thanks!