Skip to content

useNProgress ​

Category
Export Size
425 B
Package
@vueuse/integrations
Last Changed
last year

Reactive wrapper for nprogress.

Demo ​

Click to change progress status
Available in the @vueuse/integrations add-on.

Install ​

bash
npm i nprogress@^0

Usage ​

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

const { isLoading } = useNProgress()

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

Passing a progress percentage ​

You can pass a percentage to indicate where the bar should start from.

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

const { progress } = useNProgress(0.5)

function done() {
  progress.value = 1.0
}

To change the progress percentage, set progress.value = n, where n is a number between 0..1.

Customization ​

Just edit nprogress.css to your liking. Tip: you probably only want to find and replace occurrences of #29d.

You can configure it by passing an object as a second parameter.

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

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

Type Declarations ​

typescript
export type UseNProgressOptions = Partial<NProgressOptions>
/**
 * Reactive progress bar.
 *
 * @see https://vueuse.org/useNProgress
 */
export declare function useNProgress(
  currentProgress?: MaybeRefOrGetter<number | null | undefined>,
  options?: UseNProgressOptions,
): {
  isLoading: WritableComputedRef<boolean>
  progress: Ref<number | (() => number | null | undefined) | null | undefined>
  start: () => nprogress.NProgress
  done: (force?: boolean | undefined) => nprogress.NProgress
  remove: () => void
}
export type UseNProgressReturn = ReturnType<typeof useNProgress>

Source ​

Source • Demo • Docs

Contributors ​

Anthony Fu
Antério Vieira
Doctorwu
丶远方
Agénor Debriat
webfansplz
Curt Grimes
Jelf
Michael Hüneburg
Alex Kozack

Changelog ​

v10.0.0-beta.5 on 4/13/2023
cb644 - refactor!: remove isFunction and isString utils
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
v9.0.0 on 7/26/2022
a33a2 - fix: improve SSR support (#1990)

Released under the MIT License.