Search
Docs Menu
API
Get Started
Blog
Edit

+onCreatePageContext() hook

Environment: client, server
Local
Cumulative
Provided by: vike

Hook called when the pageContext object is created.

// pages/+onCreatePageContext.js
// Environment: server & client
 
export async function onCreatePageContext(pageContext) {
  // Server or client — pageContext was just created
}
// pages/+onCreatePageContext.ts
// Environment: server & client
 
import type { PageContext } from 'vike/types'
 
export async function onCreatePageContext(pageContext: PageContext) {
  // Server or client — pageContext was just created
}
// pages/+onCreatePageContext.server.js
// Environment: server
 
export async function onCreatePageContext(pageContext) {
  // Server only — pageContext was just created
}
// pages/+onCreatePageContext.server.ts
// Environment: server
 
import type { PageContextServer } from 'vike/types'
 
export async function onCreatePageContext(pageContext: PageContextServer) {
  // Server only — pageContext was just created
}
// pages/+onCreatePageContext.client.js
// Environment: client
 
export async function onCreatePageContext(pageContext) {
  // Client only — pageContext was just created
}
// pages/+onCreatePageContext.client.ts
// Environment: client
 
import type { PageContextClient } from 'vike/types'
 
export async function onCreatePageContext(pageContext: PageContextClient) {
  // Client only — pageContext was just created
}

See also:

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

The onCreatePageContext() hook is called right after routing, see:

You can define multiple onCreatePageContext() hooks that apply to different groups of pages (or just a single page), see API > Config Files > Inheritance.

See also:

Use case: initialization

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
    }
  }
}

Use case: 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:

Use case: store

Initializing a store on the server-side:

// pages/+onCreatePageContext.ssr.js
// Environment: server
 
import { Store } from 'aweomse-store'
 
// Note how we use `.ssr.js` instead of `.server.js` — this hook only runs during SSR,
// not during client-side navigation (`pageContext.json` requests).
 
export async function onCreatePageContext(pageContext) {
  pageContext.store = new Store()
}
// pages/+onCreatePageContext.ssr.ts
// Environment: server
 
import { Store } from 'aweomse-store'
import type { PageContextServer } from 'vike/types'
 
// Note how we use `.ssr.js` instead of `.server.js` — this hook only runs during SSR,
// not during client-side navigation (`pageContext.json` requests).
 
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