Search
Docs Menu
API
Get Started
Blog
Edit

+onCreatePageContext() hook

Environment: client, server
Local
Cumulative
Provided by: vike

Hook called when a pageContext object is created.

// pages/+onCreatePageContext.js
// Environment: server & client
 
export async function onCreatePageContext(pageContext) {
  // The object pageContext was just created
}
// pages/+onCreatePageContext.ts
// Environment: server & client
 
import type { PageContext } from 'vike/types'
 
export async function onCreatePageContext(pageContext: PageContext) {
  // The object pageContext was just created
}

You can define:

  • +onCreatePageContext.js => called when a pageContext is created (both client and server).
  • +onCreatePageContext.server.js => called when a pageContext is created on the server.
  • +onCreatePageContext.client.js => called when a pageContext is created on the client.
  • +onCreatePageContext.server.js and +onCreatePageContext.server.js => two different onCreatePageContext() hooks for server and client.

The onCreatePageContext() hook is called right after routing, see API > Hooks > Lifecycle.

See also:

Use cases

Init

Initializing a pageContext property:

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

Computed properties

Defining a pageContext property derived from multiple other properties:

// pages/+onCreatePageContext.server.js
// Environment: server
 
export async function onCreatePageContext(pageContext) {
  pageContext.pageURLs = pageContext.globalContext.pages.map((page) => ({
    url: page.route,
    isActive: page.route === pageContext.urlParsed.pathname
  }))
}
// pages/+onCreatePageContext.server.ts
// Environment: server
 
import type { PageContextServer } from 'vike/types'
 
export async function onCreatePageContext(pageContext: PageContextServer) {
  pageContext.pageURLs =
    pageContext.globalContext.pages
    .map(page => ({
      url: page.route,
      isActive: page.route === pageContext.urlParsed.pathname
    }))
}
 
declare global {
  namespace Vike {
    // We extend PageContext instead of PageContextServer because pageURLs is passed to the client
    interface PageContext {
      pageURLs: { url: string, isActive: boolean }[]
    }
  }
}

See also:

Store

Initializing a store on the server-side:

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

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

See also:

See also