@bprogress/vue NPM

BProgress for Vue

Create your own progress bar with Vue

Import

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

The @bprogress/vue package is a utility that lets you easily manage a progress bar, while remaining flexible with regard to the router you're using. It doesn't automatically start the progress bar when browsing, so you'll have to manage this logic yourself, unless you're using one of the integrations below.

Vue Frameworks Integrations

Soon...

Usage

<ProgressProvider>...</ProgressProvider>

Example

<script setup lang="ts">
import App from './App.vue';
import { ProgressProvider } from '@bprogress/vue';
</script>

<template>
  <ProgressProvider>
    <App />
  </ProgressProvider>
</template>

import { createApp } from 'vue';
import Root from './Root.vue';

createApp(Root).mount('#app');

<script setup lang="ts">
import { useProgress } from '@bprogress/vue';

const { start, stop, pause, resume } = useProgress();
</script>

<template>
  <button @click="start()">Start</button>
  <button @click="stop()">Stop</button>
  <button @click="pause">Pause</button>
  <button @click="resume">Resume</button>
</template>