Skip to content

⬅️ Back to Table of Contents

📄 useNProgress

📊 Analysis Summary

Metric Count
🔧 Functions 2
📦 Imports 11
🟢 Vue Composition API 1
📐 Interfaces 1
📑 Type Aliases 1

📚 Table of Contents

🛠️ File Location:

📂 packages/integrations/useNProgress/index.ts

📦 Imports

Name Source
NProgress nprogress
NProgressOptions nprogress
MaybeRefOrGetter vue
Ref vue
WritableComputedRef vue
isClient @vueuse/shared
toRef @vueuse/shared
tryOnScopeDispose @vueuse/shared
nprogress nprogress
computed vue
watchEffect vue

Vue Composition API

Name Type Reactive Variables Composables
computed computed none none

Functions

useNProgress(currentProgress: MaybeRefOrGetter<number | null | undefi…, options: UseNProgressOptions): UseNProgressReturn

Reactive progress bar.

See: https://vueuse.org/useNProgress

Raw JSDoc 
/**
 * Reactive progress bar.
 *
 * @see https://vueuse.org/useNProgress
 */

Calls:

  • toRef (from @vueuse/shared)
  • computed (from vue)
  • nprogress.start
  • nprogress.done
  • nprogress.configure
  • setProgress.call
  • watchEffect (from vue)
  • tryOnScopeDispose (from @vueuse/shared)
  • nprogress.remove
Code 
export function useNProgress(
  currentProgress: MaybeRefOrGetter<number | null | undefined> = null,
  options?: UseNProgressOptions,
): UseNProgressReturn {
  const progress = toRef(currentProgress)
  const isLoading = computed({
    set: load => load ? nprogress.start() : nprogress.done(),
    get: () => typeof progress.value === 'number' && progress.value < 1,
  })

  if (options)
    nprogress.configure(options)

  const setProgress = nprogress.set
  nprogress.set = (n: number) => {
    progress.value = n
    return setProgress.call(nprogress, n)
  }

  watchEffect(() => {
    if (typeof progress.value === 'number' && isClient)
      setProgress.call(nprogress, progress.value)
  })

  tryOnScopeDispose(nprogress.remove)

  return {
    isLoading,
    progress,
    start: nprogress.start,
    done: nprogress.done,
    remove: () => {
      progress.value = null
      nprogress.remove()
    },
  }
}

Internal helpers

Declared inside another function in this file.

remove(): void

Returns: void

Calls:

  • nprogress.remove
Code 
() => {
      progress.value = null
      nprogress.remove()
    }

Interfaces

UseNProgressReturn

Interface Code 
export interface UseNProgressReturn {
  isLoading: WritableComputedRef<boolean, boolean>
  progress: Ref<number | null | undefined>
  start: () => NProgress
  done: (force?: boolean) => NProgress
  remove: () => void
}

Properties

Name Type Optional Description
isLoading WritableComputedRef<boolean, boolean> ✗ not shown
progress Ref<number \| null \| undefined> ✗ not shown
start () => NProgress ✗ not shown
done (force?: boolean) => NProgress ✗ not shown
remove () => void ✗ not shown

Type Aliases

UseNProgressOptions

type UseNProgressOptions = Partial<NProgressOptions>;

Generated by Syntax Scribe