onPrehydrate

ソース
onPrehydrate を使用すると、Nuxt がページをハイドレートする直前に、クライアントでコールバックを実行できます。
このコンポーザブルは Nuxt v3.12 以降で利用可能です。

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

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

使用方法

Vue コンポーネントのセットアップ関数 (例: <script setup>) またはプラグインで onPrehydrate を呼び出します。これはサーバーで呼び出された場合にのみ効果があり、クライアントビルドには含まれません。

タイプ

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

パラメーター

パラメータータイプ必須説明
コールバック((el: HTMLElement) => void) | stringはいNuxt がハイドレートする前に実行する関数 (または文字列化された関数)。これは文字列化され、HTML にインライン化されます。外部依存関係を持ったり、コールバックの外側の変数を参照したりしてはなりません。Nuxt ランタイムが初期化される前に実行されるため、Nuxt や Vue コンテキストに依存してはなりません。
キー文字列いいえ(高度) プリハイドレートスクリプトを識別するためのユニークなキー。複数のルートノードのような高度なシナリオで役立ちます。

戻り値

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

例

app/app.vue
// Run code before Nuxt hydrates
onPrehydrate(() => {
  console.log(window)
})

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

// Advanced: access/set `data-prehydrate-id` yourself
const prehydrateId = onPrehydrate((el) => {})
</script>

<template>
  <div>
    Hi there
  </div>
</template>