翻訳されたページ このページのコンテンツは古い可能性があります。
原文を読む このページの翻訳を改善する

プレビューモード

プレビューモードを使った静的ホスティング向けのライブプレビュー

Nuxt とフルスタティックモジュールを使うことで、API や CMS を呼び出すライブプレビューをすぐに利用することができます。そして、デプロイする前に変化を確認することができます。

target:static を利用しているときのみ使用可能です

内部では $nuxt.refresh を使っており、クライアントサイドで nuxtServerInit や asyncData、fetch を呼び出しているため、プレビューモードでは自動的にページのデータが更新されます。

ライブプレビューを有効化するためには、次のプラグインを追加する必要があります：

plugins/preview.client.js
export default function ({ query, enablePreview }) {
  if (query.preview) {
    enablePreview()
  }
}
enablePreview はプラグインの context オブジェクトでのみ利用可能です。プレビューはクライアントサイドで処理されるため、プラグイン(今回の例では preview.client.js)はクライアントでのみ実行される必要があります。
nuxt.config.js
export default {
  plugins: ['~/plugins/preview.client.js']
}

一度そのプラグインを追加すれば、すぐにサイトを生成し配信することができます。

Yarn
yarn generate
yarn start
NPX
npx nuxt generate
npx nuxt start

そして以下のクエリパラメータを確認したいページの最後に追加することでプレビューを見ることができます：

?preview=true
enablePreview は yarn dev ではなく yarn start を用いてローカルでテストしてください。

まだ生成されていないページをプレビューする場合

まだ生成されていないページは API 上に存在しますが静的なページとして生成されてはいないため、SPA フォールバックは 404 ページを表示する前に API を呼び出します。

もし validate フックを設定している場合、プレビューモードで 404 ページへリダイレクトしないように validate フックを修正する必要があるでしょう。

validate({ params, query }) {
  if (query.preview) {
    return true
}

enablePreview にデータを渡す場合

enablePreview 関数にデータを渡すことができます。 そのデータは $preview コンテキストヘルパーと this.$preview で利用できます。

この次は？