onPrehydrate

Usa onPrehydrate para ejecutar un callback en el cliente inmediatamente antes de que Nuxt hidrate la página.

Este composable está disponible en Nuxt v3.12+.

onPrehydrate es un hook de ciclo de vida composable que te permite ejecutar un callback en el cliente inmediatamente antes de que Nuxt hidrate la página.

Esta es una utilidad avanzada y debe usarse con cuidado. Por ejemplo, nuxt-time y @nuxtjs/color-mode manipulan el DOM para evitar desajustes de hidratación.

Uso

Llama a onPrehydrate en la función setup de un componente Vue (por ejemplo, en <script setup>) o en un plugin. Solo tiene efecto cuando se llama en el servidor y no se incluirá en tu compilación del cliente.

Tipo

Signature

export function onPrehydrate(callback: (el: HTMLElement) => void): void
export function onPrehydrate(callback: string | ((el: HTMLElement) => void), key?: string): undefined | string

Parámetros

Parámetro	Tipo	Requerido	Descripción
`callback`	`((el: HTMLElement) => void) \| string`	Sí	Una función (o función en formato string) para ejecutar antes de que Nuxt hidrate. Será convertida a string e incrustada en el HTML. No debe tener dependencias externas ni referenciar variables fuera del callback. Se ejecuta antes de que el runtime de Nuxt se inicialice, por lo que no debe depender del contexto de Nuxt o Vue.
`key`	`string`	No	(Avanzado) Una clave única para identificar el script de prehidratación, útil para escenarios avanzados como múltiples nodos raíz.

Valores de Retorno

Devuelve undefined cuando se llama solo con una función de callback.
Devuelve una cadena (el id de prehidratación) cuando se llama con un callback y una clave, que puede usarse para establecer o acceder al atributo data-prehydrate-id para casos de uso avanzados.

Ejemplo

app.vue

<script setup lang="ts">
declare const window: Window
// ---cut---
// Ejecutar código antes de que Nuxt hidrate
onPrehydrate(() => {
  console.log(window)
})

// Acceder al elemento raíz
onPrehydrate((el) => {
  console.log(el.outerHTML)
  // <div data-v-inspector="app.vue:15:3" data-prehydrate-id=":b3qlvSiBeH:"> Hola </div>
})

// Avanzado: acceder/establecer `data-prehydrate-id` tú mismo
const prehydrateId = onPrehydrate((el) => {})
</script>

<template>
  <div>
    Hola
  </div>
</template>

※Esta página es una traducción no oficial de la documentación oficial de Nuxt.js.

La página correspondiente en la documentación oficial está aquí:
https://nuxt.com/docs/3.x/api/composables/on-prehydrate