<NuxtLoadingIndicator>

ページ遷移間でプログレスバーを表示します。

使用法

app.vue または layouts/ に <NuxtLoadingIndicator/> を追加します。

app.vue

<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

サンプルコードの編集とプレビューexamples > routing > pages

ローディングインジケーターのデフォルトスロットを通じてカスタムHTMLやコンポーネントを渡すことができます。

color: ローディングバーの色。明示的な色のスタイリングをオフにするには false に設定できます。
errorColor: error が true に設定されたときのローディングバーの色。
height: ローディングバーの高さ（ピクセル単位、デフォルトは 3）。
duration: ローディングバーの持続時間（ミリ秒単位、デフォルトは 2000）。
throttle: 表示と非表示のスロットル（ミリ秒単位、デフォルトは 200）。
estimatedProgress: デフォルトでは、Nuxtは100%に近づくにつれてバックオフします。カスタム関数を提供して進捗推定をカスタマイズできます。この関数は、上記のローディングバーの持続時間と経過時間を受け取り、0から100の間の値を返す必要があります。

このコンポーネントはオプションです。 :br 完全なカスタマイズを実現するには、ソースコードに基づいて独自のものを実装できます。

useLoadingIndicator composable を使用して、基礎となるインジケーターインスタンスにフックすることができます。これにより、開始/終了イベントを自分でトリガーできます。

ローディングインジケーターの速度は、estimatedProgress によって制御される特定のポイントに達した後、徐々に減少します。この調整により、長いページ読み込み時間をより正確に反映し、インジケーターが100%完了を早まって表示するのを防ぎます。

※このページは Nuxt.js 公式ドキュメントの翻訳ページ（非公式）です。