usePreviewMode

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

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

const { enabled, state } = usePreviewMode()

オプション

カスタムenableチェック

プレビューモードを有効にするカスタム方法を指定できます。デフォルトでは、usePreviewModeコンポーザブルは、URLにpreviewパラメータがあり、それがtrueと等しい場合（例：https://127.0.0.1:3000?preview=true）、プレビューモードを有効にします。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('preview mode has been enabled')
  },
  onDisable: () => {
    console.log('preview mode has been disabled')
  }
})

例

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

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

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

<template>
  <div>
    Some base content
    <p v-if="enabled">
      Only preview content: {{ state.token }}
      <br>
      <button @click="enabled = false">
        disable preview mode
      </button>
    </p>
  </div>
</template>

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

npx nuxi generate
npx nuxi preview

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

?preview=true