Nuxt 3 アプリケーションへのページローダーの追加: ステップバイステップガイド

Question

Nuxt 3 を使用してアプリケーションを構築していますが、Web サイトが読み込まれるまでページローダーを追加したいと考えています。

Answer 1

この記事に基づいています。シンプルだが限定されたソリューションと、完全にカスタマイズされたソリューションがあります。

組み込み

次のように使用できる読み込み進行状況バーが含まれています

リーリー

ただし、事前定義された UI しかなく、これらの属性を使用してのみカスタマイズできます

• 色: 読み込みバーの色。
• 高さ: 読み込みバーの高さ (ピクセル単位) (デフォルトは 3)。
• 継続時間: 読み込みバーの継続時間 (ミリ秒単位) (デフォルトは 2000)。
• 制限: 表示と非表示をミリ秒単位で制限します (デフォルトは 200)。

カスタマイズ可能なローダー

カスタム ローダー (背景付きの全画面スピナーなど) が必要な場合は、別のアプローチが必要です。このアプローチにより、任意のローダーを作成し、必要に応じて表示することができます。

リーリー

Nuxt3 は、page:start および page:finish イベントのインターセプターを備えたアプリケーション ランタイム フックを提供します。これらを正しく使用するには、これらのフックを (app.vue またはカスタム コンポーネント内で) 次のように使用する必要があります。