Nuxt.jsのローディングバーを非表示にするには？ページ・リクエストごとに設定するには？

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のローディングバーに関しては、ほかにもさまざまなオプションが用意されており、バーの色や太さもかんたんに変更することができます。

公式ドキュメントにまとめられていますので、確認してみることをおすすめします。