posva/vue-router-view-transition

Properly time out-in transitions with scrollBehavior

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

vue-router-view-transition's Issues

How can this be applied to Nuxt3?

The demo seems quite old - I'm getting this error:

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (<..path>/vue-router-view-transition/node_modules/webpack/lib/util/createHash.js:135:53)

I'd like to apply the delay in the route to a Nuxt 3 project, where I use navigateTo() from one page to another. The landing page has a transition in it, so it can't scroll to the content of these elements with #hash-based navigation until that transition is finished. How can I therefore apply this package to Nuxt3? Or is there anything newer available?