pageContext
anywhereBy default pageContext
is available:
Page
.But we can make pageContext
available anywhere.
To make pageContext
available in the browser, we use passToClient
.
We can use React Context
to make pageContext
accessible from any React component.
Example:
usePageContext()
implementation)usePageContext()
to access pageContext
from any React component)<PageContextProvider>
integration)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:
usePageContext()
implementation)usePageContext()
to access pageContext
from any Vue component)setPageContext(app, pageContext)
)If we use Client Routing, we need to make pageContext
reactive:
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:
app.config.globalProperties.$pageContext = pageContext
)pageContext
from any Vue component)If we use Client Routing, we make $pageContext
reactive:
For Vue 2 we can use Vue.prototype.