Files

T

fargo 1a822493ba format: apply repo prettier (3.8.1) to the folded skills tree

963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.

2026-08-19 14:37:17 -05:00

1.8 KiB

Raw Blame History

category
@Integrations

useNProgress

Reactive wrapper for nprogress.

Install

npm i nprogress@^0

Usage

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.

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.

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

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

Type Declarations

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>;

1.8 KiB Raw Blame History