onPrehydrate composable
onPrehydrate is a composable lifecycle hook that allows you to run a callback on the client immediately before Nuxt hydrates the page. It is available in Nuxt v3.12+.
composables/onprehydrate
7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
onPrehydrate signature and parameters
The onPrehydrate composable has two overloads: export function onPrehydrate (callback: (el: HTMLElement) => void): void and export function onPrehydrate (callback: string | ((el: HTMLElement) => void), key?: string): undefined | string. The first parameter 'callback' is required and should be a function or stringified function to run before Nuxt hydrates. It will be stringified and inlined in the HTML and should not have external dependencies or reference variables outside the callback. It runs before Nuxt runtime initializes, so it should not rely on Nuxt or Vue context. The second parameter 'key' is optional (string type) and is an advanced parameter to identify the prehydrate script, useful for scenarios like multiple root nodes.
onPrehydrate return values
onPrehydrate returns undefined when called with only a callback function. It returns a string (the prehydrate id) when called with a callback and a key, which can be used to set or access the data-prehydrate-id attribute for advanced use cases.
onPrehydrate callback execution context
The callback passed to onPrehydrate is called on the server within the setup function of a Vue component or in a plugin, but it is serialized and inlined into the HTML so it runs in the browser immediately before Nuxt hydrates. This means it can access browser globals like window and the DOM. The call itself only has an effect when made on the server and is stripped from your client build.
onPrehydrate implementation details
Under the hood, the callback is stringified and minified at build time, then inlined as a <script> tag in the server-rendered HTML, just before the closing </body> tag. When the callback accepts an 'el' parameter, the component's root element is tagged with a data-prehydrate-id attribute so the inlined script can find it. This is used to avoid hydration mismatches, as seen in libraries like nuxt-time and @nuxtjs/color-mode.
onPrehydrate basic usage example
Example showing onPrehydrate in app.vue: ```vue <script setup lang="ts"> onPrehydrate(() => { // Runs in the browser, right before Nuxt hydrates console.log(window) }) // Access the root element onPrehydrate((el) => { console.log(el.outerHTML) // <div data-v-inspector="app.vue:15:3" data-prehydrate-id=":b3qlvSiBeH:"> Hi there </div>) }) // Advanced: access/set `data-prehydrate-id` yourself const prehydrateId = onPrehydrate((el) => {}) </script> <template> <div> Hi there </div> </template> ``` This example demonstrates calling onPrehydrate with a callback that accesses window, with a callback that accesses the root element, and capturing the prehydrate ID.
onPrehydrate HTML output example
For the basic usage example, the rendered HTML includes something like: ```html <div data-prehydrate-id=":b3qlvSiBeH:"> Hi there </div> <script>(()=>{console.log(window)})()</script> <script>document.querySelectorAll('[data-prehydrate-id*=":b3qlvSiBeH:"]').forEach(el=>{console.log(el.outerHTML)})</script> ``` The prehydrate callbacks are stringified and inlined as script tags before the closing </body> tag, with the component root element tagged with a data-prehydrate-id attribute.