Nuxt.jsおよびnuxt/axiosを使用している環境で、特定のページもしくは特定のリクエストのみプログレスバーを非表示にする方法を紹介します。
すべてのページで非表示にするには?
すべてのページでローディングバーを非表示にするには、nuxt.config.jsでloadingオプションをfalseにします。
export default {
loading:false
}
これだけでローディングバーは表示されなくなります。
特定のページだけバーを非表示にするには?
では、特定のページだけローディングバーを表示させたくないときは、どのようにするのでしょうか。
実はまったく方法は変わりません。非表示にしたいページのexport default内にloading:false
を指定するだけです。
<template>
</template>
<script>
export default {
loading:false
}
</script>
loading:false
が指定されているページのみ、ローディングバーが表示されなくなります。
特定のリクエストだけバーを非表示にする
さらに特定のリクエストだけバーを非表示にさせるには、どうすればよいのでしょうか。
例えば、/api/mainへのアクセス時はプログレスバーを表示したいが、/api/subに対するアクセスではバーを表示させなくてよいというケースです。
こういったときは、nuxt/axiosのprogressオプションを活用します。
this.$axios.$get('/api/sub', { progress: false })
バーを表示させたくないaxiosのオプションにprogress:false
を指定します。すると、そのリクエストだけローディングバーが表示されなくなります。
バックグラウンドで定期的にデータを取得させる場合など、いちいちバーを表示させる必要がないときに使える手法です。
ドキュメント
Nuxt/jsのローディングバーに関しては、ほかにもさまざまなオプションが用意されており、バーの色や太さもかんたんに変更することができます。
![](https://v2.nuxt.com/preview.png)
Loading
Out of the box, Nuxt gives you its own loading progress bar component that's shown between routes. You can customize it,...
公式ドキュメントにまとめられていますので、確認してみることをおすすめします。
コメント