onHydrationEnd() hook

You can use the onHydrationEnd() hook to implement initialization that needs to be executed once the page has finished hydrating.

The onHydrationEnd() hook requires Client Routing.

// /pages/+onHydrationEnd.js
// Environment: browser

export { onHydrationEnd }

// The onHydrationEnd() hook is called after the onRenderClient() hook finishes rendering the
// first page the user navigates to. (The onHydrationEnd() hook isn't called upon subsequent
// page navigation.)
async function onHydrationEnd(pageContext) {
  console.log('The page is now interactive')
}

TypeScript

// /pages/+onHydrationEnd.ts
// Environment: browser

export { onHydrationEnd }

import type { OnHydrationEndAsync } from 'vike/types'

const onHydrationEnd: OnHydrationEndAsync = async (
  pageContext
): ReturnType<OnHydrationEndAsync> => {
  // ...
}

Don't omit ReturnType<OnHydrationEndAsync> (don't write const onHydrationEnd: OnHydrationEndAsync = async (pageContext) => {), otherwise TypeScript won't strictly check the return type for unknown extra properties: see this TypeScript playground and issue.

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

See also