Hooks

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

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.

Upcoming

Potentially upcoming hooks:

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

Order

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()

Page navigation, with client-side data fetching:

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