Access pageContext anywhere

By default pageContext is available:

• only on the server-side, and
• only at the root (Vue/React/...) component Page.

Browser-side

To make pageContext available in the browser, we use passToClient.

React

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

Example:

• /boilerplates/boilerplate-react/renderer/usePageContext.jsx (hook usePageContext() implementation)
• /boilerplates/boilerplate-react/renderer/Link.jsx (using usePageContext() to access pageContext from any React component)
• /boilerplates/boilerplate-react/renderer/PageShell.jsx (<PageContextProvider> integration)

Vue 3 - Composition API

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

// app.js

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>

We can also implement a usePageContext() hook:

// usePageContext.js

import { inject } from 'vue'

export { usePageContext }
export { setPageContext }

const key = Symbol()

function usePageContext() {
  const pageContext = inject(key)
  return pageContext
}
function setPageContext(app, pageContext) {
  app.provide(key, pageContext)
}

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

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

Example:

• /boilerplates/boilerplate-vue/renderer/usePageContext.js (usePageContext() implementation)
• /boilerplates/boilerplate-vue/renderer/Link.vue (using usePageContext() to access pageContext from any Vue component)
• /boilerplates/boilerplate-vue/renderer/app.js (setPageContext(app, pageContext))

If we use Client Routing, we make pageContext reactive:

• /examples/vue-full/renderer/app.ts

Vue 3 - globalProperties

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

// app.js

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>

Example:

• /boilerplates/boilerplate-vue/renderer/app.js (@abff8de) (app.config.globalProperties.$pageContext = pageContext)
• /boilerplates/boilerplate-vue/renderer/Link.vue (@abff8de) (accessing pageContext from any Vue component)

If we use Client Routing, we make $pageContext reactive:

• /examples/vue-full/renderer/app.ts (@aca560b)

Vue 2

For Vue 2 we can use Vue.prototype.