+passToClient
Most pageContext
and globalContext
properties are available only on the server-side, but you can use passToClient
to make properties available on the client-side.
// /pages/+config.ts
// Environment: config
import type { Config } from 'vike/types'
export default {
passToClient: [
// pageContext.someData
'someData',
// pageContext.user.id
'user.id', // nested
// pageContext.user.info.avatar.url
'user.avatar.url', // deeply nested
]
} satisfies Config
// /pages/+onHydrationEnd.ts
// Environment: client
import type { PageContextClient } from 'vike/types'
export { onHydrationEnd }
async function onHydrationEnd(pageContext: PageContextClient) {
// Available here on the client-side thanks to passToClient
console.log(pageContext.someData)
console.log(pageContext.user.id)
console.log(pageContext.user.avatar.url)
// ...
}
Some values, such as pageContext.data
, are already passed to the client-side by default, see Default.
Default
When using Client Routing, the following are also available on the client-side by default:
pageContext.Page
pageContext.data
pageContext.config
pageContext.isHydration
pageContext.isBackwardNavigation
pageContext.routeParams
pageContext.urlOriginal
pageContext.urlPathname
pageContext.urlParsed
When using Server Routing, the following are also available on the client-side by default:
pageContext.Page
pageContext.data
pageContext.config
pageContext.routeParams
Serialization
Serialization is done with @brillout/json-serializer
.
User-defined classes are lost during serialization:
class MyClass {
prop = 42
}
// On the server-side:
const obj = new MyClass()
console.log(obj) // MyClass { prop: 42 }
console.log(obj instanceof MyClass) // true
// On the browser-side, after `obj` was (de)serialized:
console.log(obj) // { prop: 42 }
console.log(obj instanceof MyClass) // false
See GitHub > brillout/json-serializer
> #3 Support user-defined classes.
Escape .
In the (unlikely) event you need to pass properties that include .
in their name:
// /pages/+config.ts
// Environment: config
import type { Config } from 'vike/types'
export default {
passToClient: [
// pageContext['some-weird.prop-name']
'some-weird\\.prop-name',
// pageContext['some-weird\\.prop-name']
'some-weird\\\\.prop-name',
// pageContext['some-weird\\\\.prop-name']
'some-weird\\\\\\.prop-name'
]
} satisfies Config