プレビューモード
プレビューモードを使った静的ホスティング向けのライブプレビュー
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
で利用できます。
この次は?
ディレクトリ構造のドキュメント について確認しましょう。
このページをGitHubで編集する
更新日 Mon, Aug 19, 2024












































