useNProgress

nprogress のリアクティブラッパー。

インストール

npm i nprogress@^0

使用方法

import { useNProgress } from '@vueuse/integrations/useNProgress'

const { isLoading } = useNProgress()

function toggle() {
  isLoading.value = !isLoading.value
}

進捗率を渡す

バーがどこから始まるべきかを示すためにパーセンテージを渡すことができます。

import { useNProgress } from '@vueuse/integrations/useNProgress'

const { progress } = useNProgress(0.5)

function done() {
  progress.value = 1.0
}

進捗率を変更するには、progress.value = n と設定します。ここで n は 0..1 の間の数値です。

カスタマイズ

nprogress.css をお好みに合わせて編集するだけです。ヒント: おそらく #29d の出現箇所を見つけて置き換えるだけで済むでしょう。

オブジェクトを2番目のパラメータとして渡すことで、設定できます。

import { useNProgress } from '@vueuse/integrations/useNProgress'

useNProgress(null, {
  minimum: 0.1,
  // ...
})