List of built-in hooks. (You can create your own.)

See also: API > Settings.

Basics

Pre-rendering

vike-vue

Advanced

Most users don't need to know about these hooks.

Upcoming

Potentially upcoming hooks:

Lifecycle

See also:

The order in which the hooks are called (the hook flow).

The following doesn't contain the hooks of the Vike extensions vike-react/vike-vue/vike-solid such as onAfterRenderHtml() or onAfterRenderClient().

The onCreateGlobalContext() hook is called when the globalContext object is created, see API > globalContext > Lifecycle.

Default

If you didn't change the environment of data() nor onBeforeRender():

First render

  1. server renderPage()
  2. server onBeforeRoute()
  3. server Routing

    The routing executes your Route Functions (of all your pages).

  4. server onCreatePageContext()
  5. server guard()
  6. server data()
  7. server onData()
  8. server onBeforeRender()
  9. server onRenderHtml()
  10. client onCreatePageContext()
  11. client onRenderClient()
  12. client onHydrationEnd()

Client-side navigation

  1. client onPageTransitionStart()
  2. client onBeforeRoute()
  3. client Routing
  4. client onCreatePageContext()
  5. server onBeforeRoute()
  6. server Routing
  7. server onCreatePageContext()

    The routing is executed twice: once for the client and once for the server.

  8. server guard()
  9. server data()
  10. server onBeforeRender()
  11. client onData()
  12. client onRenderClient()
  13. client onPageTransitionEnd()

Client-side only data()

If you configured data() and onBeforeRender() as well to run only on the client-side:

First render

  1. server renderPage()
  2. server onBeforeRoute()
  3. server Routing

    The routing executes your Route Functions (of all your pages).

  4. server onCreatePageContext()
  5. server onRenderHtml()
  6. client onCreatePageContext()
  7. client guard()
  8. client data()
  9. client onData()
  10. client onBeforeRender()
  11. client onRenderClient()
  12. client onHydrationEnd()

Client-side navigation

  1. client onPageTransitionStart()
  2. client onBeforeRoute()
  3. client Routing
  4. client onCreatePageContext()
  5. client guard()
  6. client data()
  7. client onData()
  8. client onBeforeRender()
  9. client onRenderClient()
  10. client onPageTransitionEnd()

See also