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">
declare const window: Window
// ---cut---
onPrehydrate(() => {
  // Runs in the browser, right before Nuxt hydrates
  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>

Под капотом коллбэк сериализуется и минифицируется на этапе сборки, затем встраивается как тег <script> в HTML, отрендеренный на сервере, прямо перед закрывающим </body>. Для примера выше отрендеренный 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>

Когда коллбэк принимает параметр el, корневой элемент компонента помечается атрибутом data-prehydrate-id, чтобы встроенный скрипт мог его найти.