Search
Docs Menu
API
Get Started
Blog
Edit

+onCreateGlobalContext() hook

Environment: client, server
Global
Cumulative
Provided by: vike

Hook called when the globalContext object is created.

// pages/+onCreateGlobalContext.js
// Environment: server & client
 
export async function onCreateGlobalContext(globalContext) {
  // Server or client — globalContext was just created
}
// pages/+onCreateGlobalContext.ts
// Environment: server & client
 
import type { GlobalContext } from 'vike/types'
 
export async function onCreateGlobalContext(globalContext: GlobalContext) {
  // Server or client — globalContext was just created
}
// pages/+onCreateGlobalContext.server.js
// Environment: server
 
export async function onCreateGlobalContext(globalContext) {
  // Server only — globalContext was just created
}
// pages/+onCreateGlobalContext.server.ts
// Environment: server
 
import type { GlobalContextServer } from 'vike/types'
 
export async function onCreateGlobalContext(globalContext: GlobalContextServer) {
  // Server only — globalContext was just created
}
// pages/+onCreateGlobalContext.client.js
// Environment: client
 
export async function onCreateGlobalContext(globalContext) {
  // Client only — globalContext was just created
}
// pages/+onCreateGlobalContext.client.ts
// Environment: client
 
import type { GlobalContextClient } from 'vike/types'
 
export async function onCreateGlobalContext(globalContext: GlobalContextClient) {
  // Client only — globalContext was just created
}

See also:

You can also define two separate hooks (+onCreateGlobalContext.server.js and +onCreateGlobalContext.client.js) instead of a single +onCreateGlobalContext.js hook.

See API > globalContext > Lifecycle to understand when onCreateGlobalContext() is called.

See also:

Use case: initialization

Initializing a globalContext property:

// pages/+onCreateGlobalContext.client.js
// Environment: client
 
export async function onCreateGlobalContext(globalContext) {
  globalContext.someInstance = new Instance()
}
// pages/+onCreateGlobalContext.client.ts
// Environment: client
 
import type { GlobalContextClient } from 'vike/types'
 
export async function onCreateGlobalContext(globalContext: GlobalContextClient) {
  globalContext.someInstance = new Instance()
}
 
declare global {
  namespace Vike {
    interface GlobalContextClient {
      someInstance: Instance
    }
  }
}

Use case: global data

Fetching global data that is accessible to all pages:

// pages/+onCreateGlobalContext.server.js
// Environment: server
 
export async function onCreateGlobalContext(globalContext) {
  globalContext.someData = await fetchSomeData()
}
// pages/+onCreateGlobalContext.server.ts
// Environment: server
 
import type { GlobalContextServer } from 'vike/types'
 
export async function onCreateGlobalContext(globalContext: GlobalContextServer) {
  globalContext.someData = await fetchSomeData()
}
 
declare global {
  namespace Vike {
    // Extend GlobalContext instead of GlobalContextServer because someData is passed to client
    interface GlobalContext {
      someData: Awaited<ReturnType<typeof fetchSomeData>>
    }
  }
}
// pages/+config.js
 
export default {
  passToClient: ['someData']
}
// pages/+config.ts
 
import type { Config } from 'vike/types'
 
export default {
  passToClient: ['someData']
} satisfies Config

+passToClient also works for globalContext.

Use case: authentication

Client-side authentication:

// pages/+onCreateGlobalContext.client.js
// Environment: client
 
export async function onCreateGlobalContext(globalContext) {
  globalContext.loggedInUser = retrieveUserFromCookie()
}
// pages/+onCreateGlobalContext.client.ts
// Environment: client
 
import type { GlobalContextClient } from 'vike/types'
 
export async function onCreateGlobalContext(globalContext: GlobalContextClient) {
  globalContext.loggedInUser = retrieveUserFromCookie()
}
 
declare global {
  namespace Vike {
    interface GlobalContextClient {
      loggedInUser: ReturnType<typeof retrieveUserFromCookie>
    }
  }
}

See also: Integration > Authentication > SSG.

Use case: store

Initializing a store on the client-side:

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

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

See also:

See also