usePreviewMode

プレビューモードを使用すると、ユーザーに公開することなく、変更がライブサイトでどのように表示されるかを確認できます。

組み込みのusePreviewModeコンポーザブルを使用して、Nuxtでプレビュー状態にアクセスし、制御することができます。コンポーザブルがプレビューモードを検出すると、useAsyncDataやuseFetchのプレビューコンテンツを再レンダリングするために必要な更新を自動的に強制します。

const { enabled, state } = usePreviewMode()

オプション

カスタムenableチェック

プレビューモードを有効にするカスタム方法を指定できます。デフォルトでは、URLにpreviewパラメータがtrueである場合（例: http://localhost:3000?preview=true）、usePreviewModeコンポーザブルはプレビューモードを有効にします。usePreviewModeをカスタムコンポーザブルにラップして、使用法全体でオプションを一貫させ、エラーを防ぐことができます。

export function useMyPreviewMode () {
  return usePreviewMode({
    shouldEnable: () => {
      return !!route.query.customPreview
    }
  });
}

デフォルト状態の変更

usePreviewModeは、URLからtokenパラメータの値を状態に保存しようとします。この状態を変更することができ、すべてのusePreviewMode呼び出しで利用可能になります。

const data1 = ref('data1')

const { enabled, state } = usePreviewMode({
  getState: (currentState) => {
    return { data1, data2: 'data2' }
  }
})

onEnableとonDisableコールバックのカスタマイズ

デフォルトでは、usePreviewModeが有効になると、すべてのデータをサーバーから再取得するためにrefreshNuxtData()を呼び出します。

プレビューモードが無効になると、コンポーザブルは後続のルーターナビゲーション後に実行するためにrefreshNuxtData()を呼び出すコールバックをアタッチします。

onEnableとonDisableオプションに独自の関数を提供することで、トリガーされるカスタムコールバックを指定できます。

const { enabled, state } = usePreviewMode({
  onEnable: () => {
    console.log('プレビューモードが有効になりました')
  },
  onDisable: () => {
    console.log('プレビューモードが無効になりました')
  }
})

例

以下の例では、コンテンツの一部がプレビューモードでのみレンダリングされるページを作成します。

<script setup>
const { enabled, state } = usePreviewMode()

const { data } = await useFetch('/api/preview', {
  query: {
    apiKey: state.token
  }
})
</script>

<template>
  <div>
    一部の基本コンテンツ
    <p v-if="enabled">
      プレビュー専用コンテンツ: {{ state.token }}
      <br>
      <button @click="enabled = false">
        プレビューモードを無効にする
      </button>
    </p>
  </div>
</template>

これでサイトを生成して提供できます：

npx nuxt generate
npx nuxt preview

その後、表示したいページの末尾にクエリパラメータpreviewを追加することでプレビューページを確認できます：

?preview=true