vue-router-view-transition

A transition wrapper for router-view that is compatible with scrollBehavior

Installation

npm install vue-router-view-transition
# or
yarn add vue-router-view-transition

Usage

This library exports one component and one function. You need to use both:

First, you can either globally install the component RouterViewTransition:

import { RouterViewTransition } from 'vue-router-view-transition'

Vue.component('RouterViewTransition', RouterViewTransition)

or import it locally in any Vue component:

import { RouterViewTransition } from 'vue-router-view-transition'

export default {
  components: { RouterViewTransition },
}

Then you should replace your router-view with this router-view-transition:

<router-view-transition transition="fade" mode="out-in" />

Here the transition prop refers to the name of the transition (prop named name for the transition component) while the mode is exactly the same as the prop with the same name in the transition component.

Then you must import the waitForTransition function and wrap your scrollBehavior function:

// probably your router.js file
const router = new Router({
  mode: 'history',
  routes: [
    // your routes
  ],
  scrollBehavior: waitForTransition((to, from, savedPosition) => {
    // this code will get executed only once the transition wrapping router-view is finished
    // this ensures
    if (savedPosition) {
      return savedPosition
    } else {
      // this ensures we go to the top of the page when navigating to a new page
      return { x: 0, y: 0 }
    }
  }),
})

Note: You may also want to enable manual scroll restoration:

history.scrollRestoration = 'manual'

Related

• Vue Router: https://github.com/vuejs/vue-router

License

MIT