onPrehydrate
Nuxtがページをハイドレートする直前に、クライアント側でコールバックを実行するには、onPrehydrateを使用します。
このコンポーザブルは、Nuxt v3.12以降で使用できます。
onPrehydrateは、Nuxtがページをハイドレートする直前にクライアント側でコールバックを実行できるコンポーザブルライフサイクルフックです。
これは高度なユーティリティであり、注意して使用する必要があります。例えば、
nuxt-timeと@nuxtjs/@color-modeは、ハイドレーションの不一致を回避するためにDOMを操作します。使用方法
onPrehydrateは、Vueコンポーネントのsetup関数（例えば、<script setup>内）やプラグイン内で直接呼び出すことができます。これはサーバーで呼び出された場合にのみ効果があり、クライアント側のビルドには含まれません。
パラメータ
callback:文字列化されてHTMLにインライン化される関数です。外部依存関係（自動インポートなど）を持つべきではなく、コールバックの外部で定義された変数を参照するべきではありません。コールバックはNuxtランタイムが初期化される前に実行されるため、NuxtまたはVueのコンテキストに依存するべきではありません。
例
app.vue
<script setup lang="ts">
// onPrehydrate is guaranteed to run before Nuxt hydrates
onPrehydrate(() => {
console.log(window)
})
// As long as it only has one root node, you can access the element
onPrehydrate((el) => {
console.log(el.outerHTML)
// <div data-v-inspector="app.vue:15:3" data-prehydrate-id=":b3qlvSiBeH:"> Hi there </div>
})
// For _very_ advanced use cases (such as not having a single root node) you
// can access/set `data-prehydrate-id` yourself
const prehydrateId = onPrehydrate((el) => {})
</script>
<template>
<div>
Hi there
</div>
</template>