`usePageContext()`

Environment: client, server

Provided by: vike-react/vike-vue/vike-solid

You need vike-react/vike-vue/vike-solid to be able to use useConfig(). If you don't use vike-{react,vue,solid} then see Without vike-{react,vue,solid}.

The usePageContext() hook enables any UI component to access the pageContext object.

import { usePageContext } from 'vike-react/usePageContext'
/* Or:
import { usePageContext } from 'vike-vue/usePageContext'
import { usePageContext } from 'vike-solid/usePageContext'
*/
 
/* ... */
 
// Inside any UI component
const pageContext = usePageContext()

Without `vike-{react,vue,solid}`

In case you don't use a UI framework Vike extension vike-react/vike-vue/vike-solid, you can implement usePageContext() yourself.

React

You can use React Context to make pageContext accessible from any React component.

Examples:

JavaScript: /packages/create-vike-core/boilerplate-react/renderer/usePageContext.jsx
TypeScript: /packages/create-vike-core/boilerplate-react-ts/renderer/usePageContext.tsx

Vue 3 - Composition API

You can use app.provide() with inject() to make pageContext accessible from any Vue component.

// createVueApp.js
 
const app = createSSRApp(/*...*/)
app.provide('pageContext', pageContext)

// createVueApp.ts
 
const app = createSSRApp(/*...*/)
app.provide('pageContext', pageContext)

<!-- someComponent.vue -->
 
<template>
  <!-- We can access `pageContext` here -->
  {{ pageContext.someProp }}
</template>
 
<script setup>
import { inject } from 'vue'
const pageContext = inject('pageContext')
</script>

<!-- someComponent.vue -->
 
<template>
  <!-- We can access `pageContext` here -->
  {{ pageContext.someProp }}
</template>
 
<script setup lang="ts">
import { inject } from 'vue'
const pageContext = inject('pageContext')
</script>

You can also implement a usePageContext() component hook:

// usePageContext.js
 
export { usePageContext }
export { setPageContext }
 
import { inject } from 'vue'
 
const key = Symbol()
 
function usePageContext() {
  const pageContext = inject(key)
  return pageContext
}
 
function setPageContext(app, pageContext) {
  app.provide(key, pageContext)
}

// usePageContext.ts
 
export { usePageContext }
export { setPageContext }
 
import { inject } from 'vue'
import type { App, ShallowReactive } from 'vue'
import type { PageContext } from 'vike/types'
 
const key = Symbol()
 
function usePageContext(): ShallowReactive<PageContext> {
  const pageContext = inject<ShallowReactive<PageContext>>(key)
  return pageContext
}
 
function setPageContext(app: App, pageContext: ShallowReactive<PageContext>) {
  app.provide(key, pageContext)
}

const app = createSSRApp(/*...*/)
setPageContext(app, pageContext)

<script setup>
import { usePageContext } from './path/to/usePageContext'
const pageContext = usePageContext()
</script>

<script setup lang="ts">
import { usePageContext } from './path/to/usePageContext'
const pageContext = usePageContext()
</script>

Examples:

JavaScript: /packages/create-vike-core/boilerplate-vue/renderer/usePageContext.js
TypeScript: /packages/create-vike-core/boilerplate-vue-ts/renderer/usePageContext.ts

Vue 3 - `globalProperties`

Alternatively, you can make pageContext available to all Vue components by using app.config.globalProperties.

// createVueApp.js
 
const app = createSSRApp(/*...*/)
app.config.globalProperties.$pageContext = pageContext

// createVueApp.ts
 
const app = createSSRApp(/*...*/)
app.config.globalProperties.$pageContext = pageContext

<!-- someComponent.vue -->
 
<template>
  <!-- We can access `pageContext` here -->
  {{ $pageContext.someProp }}
</template>
 
<script setup>
import { getCurrentInstance } from 'vue'
// We can access `pageContext` here
const pageContext = getCurrentInstance().appContext.config.globalProperties.$pageContext
</script>

<!-- someComponent.vue -->
 
<template>
  <!-- We can access `pageContext` here -->
  {{ $pageContext.someProp }}
</template>
 
<script setup lang="ts">
import { getCurrentInstance } from 'vue'
// We can access `pageContext` here
const pageContext = getCurrentInstance().appContext.config.globalProperties.$pageContext
</script>

Example: /packages/create-vike-core/boilerplate-vue/.

Vue 2

For Vue 2 you can use Vue.prototype.

usePageContext()

Without vike-{react,vue,solid}