`onPageTransitionStart()` hook

The onPageTransitionStart() hook, together with onPageTransitionEnd(), enables you to implement page transition animations.

// /pages/+onPageTransitionStart.js
// Environment: browser
 
export { onPageTransitionStart }
 
// Create custom page transition animations
async function onPageTransitionStart(pageContext) {
  console.log('Page transition start')
  console.log('Is backwards navigation?', pageContext.isBackwardNavigation)
  document.body.classList.add('page-transition')
}

TypeScript

// /pages/+onPageTransitionStart.ts
// Environment: browser
 
export { onPageTransitionStart }
 
import type { OnPageTransitionStartAsync } from 'vike/types'
 
const onPageTransitionStart: OnPageTransitionStartAsync = async (
  pageContext
): ReturnType<OnPageTransitionStartAsync> => {
  // ...
}

Don't omit ReturnType<OnPageTransitionStartAsync> otherwise TypeScript won't strictly check the return type.

See API > pageContext > Typescript for more information on how to extend pageContext with your own extra properties.

Without `vike-{react,vue,solid}`

If you don't use a UI framework Vike extension vike-react/vike-vue/vike-solid, then make sure to use Client Routing: the onPageTransitionStart() hook requires it (it's executed upon client-side navigation).

See also