Hooks

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

Basic

• data(): server (configurable) Called before the page is rendered, for fetching data.
• guard(): server (configurable) Protect pages from unprivileged access.
• onHydrationEnd(): client Called after the page is hydrated.
• onPageTransitionStart(): client Called upon page navigation, before the new page starts rendering.
• onPageTransitionEnd(): client Called upon page navigation, after the new page has finished rendering.
• onBeforePrerenderStart(): server Called before the whole pre-rendering process starts.
• onPrerenderStart(): server Global hook called when pre-rendering starts.
• onCreateApp(): server & client vike-vue Called after creating Vue's app instance.

Advanced

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

• onBeforeRender(): server (configurable) Called before the page is rendered, lower-level and usually for advanced integrations with data fetching tools.
• onRenderHtml(): server Called when a page is rendered to HTML on the server-side.
• onRenderClient(): client Called when a page is rendered on the client-side.
• onBeforeRoute(): server & client Called before the URL is routed to a page.
• onBeforeRenderClient(): client Called at the beginning of onRenderClient().
• onAfterRenderClient(): client Called at the end of onRenderClient().
• onBeforeRenderHtml(): server Called at the beginning of onRenderHtml().
• onAfterRenderHtml(): server Called at the end of onRenderHtml().

Upcoming

Potentially upcoming hooks:

• New hook onBoot()
• New hook onRequestBegin()
• New hook onLog()
• New hook onRenderContent(): generate non-HTML files with arbitrary content

Order

The order in which the hooks are called.

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

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 guard()
5. server data()
6. server onBeforeRender()
7. server onRenderHtml()
8. client onRenderClient()
9. client onHydrationEnd()

Page navigation

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

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

6. server guard()
7. server data()
8. server onBeforeRender()
9. client onRenderClient()
10. 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 onRenderHtml()
5. client guard()
6. client data()
7. client onBeforeRender()
8. client onRenderClient()
9. client onHydrationEnd()

Page navigation

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

See also

• API > Settings
• API > Config Files