onPrehydrate

onPrehydrate を使用して、Nuxt がページをハイドレートする直前にクライアントでコールバックを実行します。

このコンポーザブルは Nuxt v3.12+ で利用可能です。

onPrehydrate は、Nuxt がページをハイドレートする直前にクライアントでコールバックを実行できるコンポーザブルライフサイクルフックです。

これは高度なユーティリティであり、注意して使用する必要があります。例えば、nuxt-time や @nuxtjs/color-mode は、ハイドレーションの不一致を避けるために DOM を操作します。

使用法

onPrehydrate を Vue コンポーネントのセットアップ関数（例: <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 に文字列化されてインライン化されます。外部依存関係やコールバック外の変数を参照してはいけません。Nuxt ランタイムが初期化される前に実行されるため、Nuxt や Vue のコンテキストに依存してはいけません。
`key`	`string`	いいえ	（高度な）プレハイドレートスクリプトを識別するための一意のキー。複数のルートノードのような高度なシナリオで役立ちます。

戻り値

コールバック関数のみで呼び出された場合は undefined を返します。
コールバックとキーで呼び出された場合は文字列（プレハイドレート ID）を返し、高度な使用例で data-prehydrate-id 属性を設定またはアクセスするために使用できます。

例

app.vue

<script setup lang="ts">
declare const window: Window
// ---cut---
// 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>
    Hi there
  </div>
</template>

※このページは Nuxt.js 公式ドキュメントの翻訳ページ（非公式）です。

公式ドキュメントの該当ページはこちら：
https://nuxt.com/docs/3.x/api/composables/on-prehydrate