Skip to content

useNProgress

Category
Export Size
531 B
Package
@vueuse/integrations
Last Changed
7 months ago

Reactive wrapper for nprogress.

Demo

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

Install

bash
npm i nprogress@^0

Usage

ts
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.

ts
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.

ts
import { 
useNProgress
} from '@vueuse/integrations/useNProgress'
useNProgress
(null, {
minimum
: 0.1,
// ... })

Type Declarations

ts
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, boolean>
progress
:
Ref
<number | null | undefined, number | null | undefined>
start
: () => nprogress.
NProgress
done
: (
force
?: boolean) => nprogress.
NProgress
remove
: () => void
} export type
UseNProgressReturn
=
ReturnType
<typeof
useNProgress
>

Source

SourceDemoDocs

Contributors

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

Changelog

v12.8.0 on
7432f - feat(types): deprecate MaybeRef and MaybeRefOrGetter in favor of Vue's native (#4636)
v12.0.0-beta.1 on
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)

Released under the MIT License.

Build faster with AI
New Masterclass to help you leverage AI in your Vue workflow
Get Early Access