Edit this page

+client.js

Environment: client
Local
Non-cumulative

Provided by: vike

You can define a +client.js file to add client-side JavaScript.

It's usually used for initializing error tracking, user tracking, cookie consent, CSS frameworks, etc.

// /pages/+client.js
// Environment: client
 
console.log("I'm the first line of client-side JavaScript.")

// /pages/+client.ts
// Environment: client
 
console.log("I'm the first line of client-side JavaScript.")

In production, it's the very first JavaScript code to be executed. In development, it's run first after Vite's HMR preamble.

The code of +client.js isn't re-executed upon client-side page navigation. For executing code upon the lifecycle of page rendering, see following hooks instead:

• API > +onHydrationEnd() hook
• +onAfterRenderClient() hook
• +onBeforeRenderClient() hook
• API > +onPageTransitionStart() hook
• +onPageTransitionEnd() hook

Currently, +client.js isn't cumulative but it's work-in-progress, see 1834 - Make +client.js cumulative.

Examples

• /examples/render-modes/pages/html-js/+client.js
• Render Modes (SPA, SSR, SSG, HTML-only) > HTML-only

See also

• API > +onHydrationEnd() hook
• +onAfterRenderClient() hook
• +onBeforeRenderClient() hook
• API > +onPageTransitionStart() hook
• +onPageTransitionEnd() hook
• API > Settings