onPrehydrate

Исходники
Используйте onPrehydrate, чтобы запустить коллбэк-функцию на клиенте непосредственно перед тем, как Nuxt гидратирует страницу.
Этот коллбэк доступен в Nuxt v3.12+.

onPrehydrate это коллбэк хука жизненного цикла, который позволяет запускать коллбэк-функцию на клиенте непосредственно перед тем, как Nuxt гидратирует страницу.

Это продвинутая утилита, и ее следует использовать с осторожностью. Например, nuxt-time и @nuxtjs/color-mode манипулирует DOM, чтобы избежать несоответствия гидратации.

Использование

Вызывайте onPrehydrate в setup-функции компонента (например в <script setup>) или в плагине. Эффект только при вызове на сервере; в клиентскую сборку не попадает.

Тип

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

Параметры

ПараметрТипОбязательныйОписание
callback((el: HTMLElement) => void) | stringДаФункция (или её строковое представление), выполняемая до гидрации Nuxt. Сериализуется и вставляется в HTML. Не должна иметь внешних зависимостей и ссылок на переменные вне коллбэка. Выполняется до инициализации runtime Nuxt — не опирайтесь на контекст Nuxt или Vue.
keystringНет(Продвинуто) Уникальный ключ скрипта prehydrate, полезен при нескольких корневых узлах.

Возвращаемые значения

  • При вызове только с коллбэком — undefined.
  • При вызове с коллбэком и key — строка (id prehydrate) для атрибута data-prehydrate-id в продвинутых сценариях.

Пример

app/app.vue
<script setup lang="ts">
// код до гидрации Nuxt

onPrehydrate
(() => {
  
console
.
log
(
window
)
})

// доступ к корневому элементу

onPrehydrate
((
el
) => {
  
console
.
log
(
el
.outerHTML)
  // <div data-v-inspector="app.vue:15:3" data-prehydrate-id=":b3qlvSiBeH:"> Hi there </div>
})

// продвинуто: задать/получить data-prehydrate-id
const 
prehydrateId
 = 
onPrehydrate
((
el
) => {})
</script>

<template>
  <
div
>
    Здравствуйте.
  </
div
>
</template>