onPrehydrate · Nuxt Composables

Этот коллбэк доступен в Nuxt v3.12+.

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

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

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

onPrehydrate можно вызвать непосредственно в функции настройки компонента Vue (например, в <script setup>) или в плагине.

Она будет иметь эффект только при вызове на сервере, и не будет включена в сборку клиента.

Параметры

callback: Функция, которая будет превращена в строку и вставлена в HTML. Она не должна иметь никаких внешних зависимостей (например, автоимпортов) или ссылаться на переменные, определенные вне коллбэка. Коллбэк будет выполняться до инициализации runtime Nuxt, поэтому он не должен зависеть от контекста Nuxt или Vue.

Пример

app.vue

<script setup lang="ts">
// onPrehydrate гарантированно работает до гидратации 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>

Компонент <NuxtRouteAnnouncer> добавляет скрытый элемент с заголовком страницы, чтобы сообщать об изменениях маршрута вспомогательным технологиям.

useAppConfig

Получите доступ к реактивной конфигурации приложения, определенной в проекте.