Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/dvlkit/nuxe/llms.txt

Use this file to discover all available pages before exploring further.

useLoadingIndicator returns a reactive state object for tracking the progress of page transitions. It drives Nuxe’s built-in <NuxeLoadingIndicator> component and is equally useful for building custom progress bars. The start() call is throttled so that instantaneous navigations never flash a half-complete bar, and finish() briefly holds progress at 100% before resetting — giving the user a satisfying sense of completion.
<NuxeLoadingIndicator> (exported from @dvlkit/nuxe) is a ready-to-use progress bar component that calls useLoadingIndicator internally and wires itself to Vue Router navigation events. Add it to your root layout and you get a top-of-page loading bar with zero configuration.

​
Signature

useLoadingIndicator(options?: UseLoadingIndicatorOptions): LoadingIndicator

​
Parameters

​
options
UseLoadingIndicatorOptions
Optional configuration for the indicator’s timing behavior.
​
options.throttle
number
default:"200"
Milliseconds to wait after start() is called before isLoading becomes true and the progress bar appears. Navigations that resolve within this window never show the indicator, preventing flicker on fast page loads.
​
options.duration
number
default:"2000"
Controls how long (in milliseconds) the indicator remains at 100% after finish() is called before it hides and resets. The actual hold time is duration / 4.

​
Return Values

​
progress
Ref<number>
The current progress value, clamped to the range 0–100. Starts at 0, briefly jumps to 66 while loading, and reaches 100 when finish() is called.
​
isLoading
Ref<boolean>
true from the moment the throttle delay has elapsed after start() until the hide timer fires after finish(). Use this to conditionally render or animate the progress bar element.
​
start
() => void
Begins a loading sequence. Resets progress to 0 immediately, then — after the throttle delay — sets isLoading to true and advances progress to 66. Calling start() while a sequence is already running cancels and restarts it.
​
finish
() => void
Completes the loading sequence. Sets progress to 100 immediately, then after duration / 4 milliseconds resets both isLoading to false and progress to 0.
​
set
(value: number) => void
Manually sets progress to any value between 0 and 100 (clamped). Does not affect isLoading. Useful for showing deterministic progress when you know the total number of steps.

​
Examples

​
Wiring to Vue Router navigation events

<!-- layouts/default.vue -->
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useLoadingIndicator } from '@dvlkit/nuxe'

const router = useRouter()
const { isLoading, progress, start, finish } = useLoadingIndicator({
  throttle: 150,
  duration: 1500,
})

router.beforeEach(() => { start() })
router.afterEach(() => { finish() })
</script>

<template>
  <div>
    <!-- Custom progress bar -->
    <div
      v-if="isLoading"
      class="progress-bar"
      :style="{ width: `${progress}%` }"
    />
    <slot />
  </div>
</template>

​
Using the built-in NuxeLoadingIndicator component

If you don’t need a custom design, drop the pre-built component into your root layout instead: 
<!-- layouts/default.vue -->
<script setup lang="ts">
import { NuxeLoadingIndicator } from '@dvlkit/nuxe'
</script>

<template>
  <NuxeLoadingIndicator />
  <slot />
</template>

​
Deterministic multi-step progress

import { useLoadingIndicator } from '@dvlkit/nuxe'

const { isLoading, progress, start, set, finish } = useLoadingIndicator()

async function importData(rows: string[]) {
  start()
  for (let i = 0; i < rows.length; i++) {
    await processRow(rows[i])
    // Show real progress rather than the default indeterminate animation
    set(Math.round(((i + 1) / rows.length) * 100))
  }
  finish()
}
The throttle option is key to preventing the “flash of loading indicator” on fast navigations. Keep it between 100–300 ms — low enough to catch slow page transitions but high enough to ignore instant ones.

Build docs developers (and LLMs) love

Get started for freeTalk to us