onCreateGlobalContext()
hook
Environment: server
, client
Cumulative: true
Global: true
Hook called when the globalContext
object is created.
// pages/+onCreateGlobalContext.ts
// Environment: server & client
import type { GlobalContext } from 'vike/types'
export async function onCreateGlobalContext(globalContext: GlobalContext) {
// The object globalContext was just created
}
You can define:
+onCreateGlobalContext.js
=> called whenglobalContext
is created (both client and server).+onCreateGlobalContext.server.js
=> called whenglobalContext
is created on the server.+onCreateGlobalContext.client.js
=> called whenglobalContext
is created on the client.+onCreateGlobalContext.server.js
and+onCreateGlobalContext.server.js
=> two differentonCreateGlobalContext()
hooks for server and client.
See API >
globalContext
> Lifecycle for details whenonCreateGlobalContext()
called.
See also:
Use cases
Init
Initializing a globalContext
property:
// 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
}
}
}
Global data
Fetching global data that is accessible to all pages:
// 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.ts
import type { Config } from 'vike/types'
export default {
passToClient: ['someData']
} satisfies Config
passToClient
also works forglobalContext
.
Authentication
Client-side authentication:
// 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.
Store
Initializing a store on the client-side:
// 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()
}
declare global {
namespace Vike {
interface GlobalContextServer {
store: Store
}
}
}
On the server-side, the store is typically initialized by using a onCreatePageContext()
hook.
See also:
-
API >
onCreatePageContext()
hook > Store - Integration > Store (State Management) > Manual integration