NuxtLoadingIndicatorとは？

NuxtLoadingIndicatorは、Nuxtアプリケーションにおいてページ遷移中にプログレスバーを表示するためのコンポーネントです。ユーザーがページの読み込みを待つ間に視覚的なフィードバックを提供し、操作感の向上や離脱率の低減に役立ちます。

ページ遷移が発生した際に何も表示されないと、ユーザーは処理が止まっているのか、遅延しているのか判断できず不安を感じやすくなります。NuxtLoadingIndicatorを使うことで、読み込みの進捗を示し、スムーズな体験を演出できます。

まず結論：NuxtLoadingIndicatorのポイント

• ページ遷移時に自動でプログレスバーを表示し、ユーザーに読み込み状況を視覚的に伝える
• カラーや高さ、表示時間などを細かくカスタマイズ可能
• 独自の進捗推定ロジックをestimatedProgressで実装できる
• useLoadingIndicator composableを使えば手動で開始・終了を制御できる
• 完全カスタムも可能だが、まずは標準コンポーネントで十分なケースが多い

いつ使うべきか？ 使わない方がよいケースは？

使うべきケース

• SPAやSSRでページ遷移が発生し、読み込み時間が目立つ場合
• ユーザーに処理中であることを明確に示したい場合
• ページ間の切り替えでUXを向上させたいプロジェクト

使わない方がよいケース

• ページ遷移がほぼ瞬時に終わる場合（表示が一瞬で消え、かえって違和感を与えることがある）
• 独自のローディングUIをすでに実装している場合（重複表示になる可能性）
• 非同期処理の進捗をより詳細に示したい場合（NuxtLoadingIndicatorはあくまで簡易的なプログレスバー）

実務でよくあるユースケースとサンプルコード

1. 基本的な導入例

app.vueやlayouts/default.vueに配置し、全ページ共通でプログレスバーを表示します。

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

これだけで、ページ遷移時に自動的にプログレスバーが表示されます。

2. カラーや高さのカスタマイズ

ブランドカラーに合わせて色や高さを調整したい場合。

<template>
  <NuxtLoadingIndicator color="#3B8070" errorColor="#FF0000" height="4" />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

3. 手動制御で非同期処理に合わせる

useLoadingIndicator composableを使い、API呼び出しなどの非同期処理に合わせてプログレスバーを制御。

<script setup lang="ts">
import { useLoadingIndicator } from '#app'

const loading = useLoadingIndicator()

async function fetchData() {
  loading.start()
  try {
    await fetch('/api/data')
  } finally {
    loading.finish()
  }
}
</script>

<template>
  <button @click="fetchData">データ取得</button>
  <NuxtLoadingIndicator />
</template>

よくある落とし穴・注意点

SSRとHydrationの影響

NuxtLoadingIndicatorはクライアントサイドで動作するため、SSR時には表示されません。Hydration後に初めてプログレスバーが動き出すため、初回表示時の違和感を感じることがあります。特に初回ロードが速い場合は、プログレスバーが一瞬だけ表示されて逆に目立つこともあるため、throttleプロップで表示開始の遅延を調整すると良いでしょう。

パフォーマンスへの配慮

プログレスバーのアニメーションは軽量ですが、過剰にカスタマイズしたり、複数のローディングインジケーターを同時に使うとパフォーマンスに影響する可能性があります。必要最低限の設定で使うことを推奨します。

進捗推定のカスタマイズ

デフォルトの進捗推定はページ遷移の完了に近づくにつれて徐々に進みますが、長時間かかる処理では100%に達するまでの時間が短すぎることがあります。estimatedProgressに独自関数を渡して、より正確な進捗表示を実装可能ですが、複雑化しすぎるとメンテナンス性が下がるため注意してください。

まとめ

NuxtLoadingIndicatorは、Nuxtアプリケーションのページ遷移時にユーザー体験を向上させるためのシンプルかつ強力なツールです。基本的な導入は非常に簡単で、色や高さのカスタマイズも柔軟に行えます。さらに、useLoadingIndicatorを使えば非同期処理に合わせた細かな制御も可能です。

ただし、SSRやHydrationの特性を理解し、過剰なカスタマイズを避けることが重要です。適切に使うことで、ユーザーにストレスの少ないスムーズなページ遷移体験を提供できるでしょう。