useAnchorProgress

There are two ways to set up a progress bar that is triggered during navigation:

If the framework has a router that detects the start and end of navigation, you can use the useProgress composable to trigger the progress bar at the start of navigation and stop it when you reach the target page.
If the framework has a router that doesn't provide built-in navigation detection, you can use this useAnchorProgress composable to activate navigation detection based on <a> elements in the DOM and window.history.

Import

import { useAnchorProgress } from '@bprogress/vue';

Usage

useAnchorProgress(
  {
    shallowRouting,
    disableSameURL,
    startPosition,
    delay,
    stopDelay,
    targetPreprocessor,
    disableAnchorClick,
    startOnLoad,
  },
  [navigation],
)

Parameters

function useAnchorProgress(options: UseAnchorProgressOptions, deps: any[]): void;

Options

Prop	Type	Default
`shallowRouting`	`boolean`	`false`
`disableSameURL`	`boolean`	`true`
`startPosition`	`number`	`0`
`delay`	`number`	`0`
`stopDelay`	`number`	`0`
`targetPreprocessor`	`(url: URL) => URL`	`undefined`
`disableAnchorClick`	`boolean`	`false`
`startOnLoad`	`boolean`	`false`
`forcedStopDelay`	`number`	`0`

Example

Progress.vue

<script setup lang="ts">
import { useAnchorProgress } from '@bprogress/vue';
import { useRoute } from 'vue-router';
 
const route = useRoute();
 
useAnchorProgress(
  {
    startPosition: 0.3,
    delay: 100,
    stopDelay: 300,
    forcedStopDelay: 500,
  },
  [route.fullPath],
);
</script>

useAnchorProgress

Import

Usage

Parameters

Options

Example

On this page