`onCreateGlobalContext()` hook

Environment: server, client.
Cumulative: true.
Global: true.

Hook called whenever the globalContext object is created.

It's typically used for initializing globalContext properties:

// pages/+onCreateGlobalContext.server.ts
// Environment: server
 
import type { GlobalContextServer } from 'vike/types'
 
export async function onCreateGlobalContext(globalContext: GlobalContextServer) {
  // Common use case: fetch initial data
  globalContext.someInitialData = await fetchSomeData()
}

See also: Guides > .server.js / .client.js / .shared.js.

// pages/+config.ts
 
import type { Config } from 'vike/types'
 
export default {
   passToClient: ['someInitialData']
} satisfies Config

passToClient also works for globalContext.

// pages/+onCreateGlobalContext.client.ts
// Environment: client
 
import type { GlobalContextClient } from 'vike/types'
 
export async function onCreateGlobalContext(globalContext: GlobalContextClient) {
  // Common use case: initialize user object
  globalContext.loggedInUser = retrieveUserFromCookie()
}

See also: Integration > Authentication > SSG.

To understand when the onCreateGlobalContext() hook is called, see API > globalContext > Lifecycle.

You can also define a single hook, pages/+onCreateGlobalContext.ts, which is called on both the client- and server-side — but this is a very rare use case in practice.

Another common use case is to initialize a store:

// pages/+onCreateGlobalContext.client.ts
// Environment: client
 
import { Store } from 'some-state-management-library'
import type { GlobalContextServer } from 'vike/types'
 
export async function onCreateGlobalContext(globalContext: GlobalContextServer) {
  globalContext.store = new Store()
}

On the server-side, the store is typically initialized by using a onCreatePageContext() hook.

onCreateGlobalContext() hook

See also

`onCreateGlobalContext()` hook