Search
Docs Menu
API
Get Started
Blog
Edit

getPageContext()

The getPageContext() function allows you to access the pageContext object inside Vike hooks.

It's only useful if you're building a Vike extension and you want to implement a universal hook. If you aren't building a Vike extension, then you don't need to know about getPageContext().

For example:

// /pages/some-page/+data.js
 
export { data }
 
import { getPageContext } from 'vike/getPageContext'
 
function data() {
  const pageContext = getPageContext()
 
  // ...
}
// /pages/some-page/+data.ts
 
export { data }
export type Data = Awaited<ReturnType<typeof data>>
 
import { getPageContext } from 'vike/getPageContext'
 
function data() {
  const pageContext = getPageContext()
 
  // ...
}

It's the same object than the function data(pageContext) argument and the following is equivalent:

// /pages/some-page/+data.js
 
export { data }
 
import { getPageContext } from 'vike/getPageContext'
 
function data() {
 const pageContext = getPageContext()
function data(pageContext) {
  // ...
}
// /pages/some-page/+data.ts
 
export { data }
export type Data = Awaited<ReturnType<typeof data>>
 
import { getPageContext } from 'vike/getPageContext'
import type { PageContextServer } from 'vike/types'
 
function data() {
 const pageContext = getPageContext()
function data(pageContext: PageContextServer) {
  // ...
}

You may ask yourself what the purpose of getPageContext() is and, indeed, it's useless for Vike users.

It's useful when implementing a Vike extension that exports a universal hook, see Example.

Universal Hooks

A universal hook (e.g. useConfig()) is a component hook that also works inside Vike hooks.

// /components/SomeReactComponent.jsx
 
import { useConfig } from 'vike-react/useConfig' // or vike-{vue,solid}
 
function SomeReactComponent() {
  // useConfig() can be used inside a component, and can ...
  const config = useConfig()
}
 // /components/SomeReactComponent.tsx
 
import { useConfig } from 'vike-react/useConfig' // or vike-{vue,solid}
 
function SomeReactComponent() {
  // useConfig() can be used inside a component, and can ...
  const config = useConfig()
}
// /pages/some-page/+data.js
 
import { useConfig } from 'vike-react/useConfig'
 
export function data() {
  // ... also be used inside a Vike hook.
  const config = useConfig()
}
 // /pages/some-page/+data.ts
 
import { useConfig } from 'vike-react/useConfig'
 
export function data() {
  // ... also be used inside a Vike hook.
  const config = useConfig()
}

Example

In order to make useConfig() a universal hook (see Universal Hooks), the useConfig() implementation uses getPageContext():

// node_modules/vike-{react,vue,solid}/dist/hooks/useConfig.js
 
import { usePageContext } from './usePageContext'
import { getPageContext } from 'vike/getPageContext'
 
export function useConfig() {
  // useConfig() needs to access the pageContext object
 
  // If useConfig() is used inside a Vike hook
  let pageContext = getPageContext()
 
  // If useConfig() is used inside a React/Vue/Solid component
  if (!pageContext) {
    pageContext = usePageContext()
  }
 
  // ...
}

See also