diff --git a/content/en/guides/concepts/context-helpers.md b/content/en/guides/concepts/context-helpers.md index 292b3259c9..0dbd05ec4e 100644 --- a/content/en/guides/concepts/context-helpers.md +++ b/content/en/guides/concepts/context-helpers.md @@ -73,7 +73,7 @@ function (context) { // Could be asyncData, nuxtServerInit, ... // Only available on the Server-side if (process.server) { - const { req, res, beforeNuxtRender } = context + const { req, res, beforeNuxtRender, beforeSerialize } = context } // Only available on the Client-side diff --git a/content/en/guides/internals-glossary/context.md b/content/en/guides/internals-glossary/context.md index cfa4253ce6..1abc88a2d6 100644 --- a/content/en/guides/internals-glossary/context.md +++ b/content/en/guides/internals-glossary/context.md @@ -28,7 +28,7 @@ function (context) { } = context // Server-side if (process.server) { - const { req, res, beforeNuxtRender } = context + const { req, res, beforeSerialize } = context } // Client-side if (process.client) { @@ -147,6 +147,35 @@ Response from the Node.js server. If Nuxt is used as a middleware, the res objec Use this method to update `__NUXT__` variable rendered on client-side, the `fn` (can be asynchronous) is called with `{ Components, nuxtState }`, see [example](https://github.com/nuxt/nuxt.js/blob/cf6b0df45f678c5ac35535d49710c606ab34787d/test/fixtures/basic/pages/special-state.vue). +### beforeSerialize + +`beforeSerialize(fn)` (_Function_) + +Use this method to update `__NUXT__` variable rendered on client-side, the `fn` (must be synchronous) is called with `nuxtState` as argument. This method is called inside the `rendered` method of Vue SSR, allowing you to use it in components. + +Not this usage is advanced and mostly used for Nuxt modules. + +```js +export default { + // Using asyncData + asyncData({ beforeSerialize }) { + if (process.server) { + beforeSerialize(nuxtState => { + nuxtState.hello = 'world' + }) + } + }, + // Using fetch + fetch() { + if (process.server) { + this.$root.context.beforeSerialize(nuxtState => { + nuxtState.hello = 'world' + }) + } + } +} +``` + ## Client-side keys These keys are available only on client-side.