【nuxt3】NuxtLoadingIndicatorを使う

この記事の環境

    "nuxt": "^3.8.0"

使い方

ドキュメントはこちら

基本の使い方はこちらです。

//app.js

<template>
    <NuxtLayout>
      <NuxtLoadingIndicator :color="'#1C7C54'" :height="6" :duration="3000" :throttle="0" />
      <NuxtPage />
    </NuxtLayout>
</template>

解説

基本的には見たままなので、throttleについてだけ解説します。

throttleはローディングインディケーターの開始タイミングを遅らせるミリ秒数を指定できるのですが、デフォルトで200になっています。

もし200ミリ秒未満で読み込みが済んだ場合は表示されなくなってしまいます。

自分の場合は読み込みが早い場合でもインディケーターを表示したいため、0を指定しています。

補足

page:loading:startとpage:loading:endフックを使って、自作インディケーターも作れるようです。ドキュメント：useLoadingIndicator

いつか作ったらまた解説するかも。