Vue Progress Bar

0.7.5 · abandoned · verified Tue Apr 21

vue-progressbar is a lightweight progress bar component designed for Vue.js applications. The package, currently at version 0.7.5 and last published in April 2018, is explicitly built for Vue.js 1.x and 2.x, meaning it is not compatible with Vue 3. It provides a top-of-page progress indicator that can be controlled programmatically, typically integrated with vue-router for showing loading states during navigation. Key features include customizable colors, thickness, transition speeds, and positioning. Due to its age and lack of updates, it is now considered abandoned, and users developing with Vue 3 should seek modern alternatives.

Common errors

```
Property '$Progress' was accessed during render but is not defined on instance. (TypeError: Cannot read properties of undefined (reading 'start'))
```
cause Attempting to use `this.$Progress` in a Vue 3 application, where the global properties API has changed, or using it before the plugin is correctly installed via `app.use()` in Vue 3's new createApp context.

fix This package is not Vue 3 compatible. For Vue 3, use a dedicated Vue 3 progress bar library like `@aacassandra/vue3-progressbar` and follow its installation instructions which typically involve `app.use(VueProgressBar)` and accessing via `this.$progress` or `inject('Progressbar')`.
```
VueProgressBar is not a constructor
```
cause This error can occur if you are trying to use CommonJS `require('vue-progressbar')` in an environment that expects an ES module default export, or if the `Vue.use()` call is malformed.

fix Ensure you are using `import VueProgressBar from 'vue-progressbar'` for ES module setups. If using CommonJS, ensure your bundler or environment correctly handles the interop, or check if the package provides a direct CommonJS export that needs to be imported differently (e.g., `require('vue-progressbar').default`).

Warnings

breaking This package is incompatible with Vue 3. It explicitly supports Vue.js 1.x or 2.x. Attempting to use it in a Vue 3 project will result in runtime errors due to fundamental API changes in Vue 3.
Fix: Migrate to a Vue 3 compatible progress bar library such as `@aacassandra/vue3-progressbar`, `@jambonn/vue-next-progressbar`, or `@syncfusion/ej2-vue-progressbar`.
gotcha The package is no longer actively maintained. The last release was 8 years ago, meaning it will not receive updates for new Vue versions, bug fixes, or security patches.
Fix: Consider using a more recently maintained alternative for long-term projects, even if targeting Vue 2, to ensure ongoing support and security.

Install

npm install vue-progressbar npm
yarn add vue-progressbar yarn
pnpm add vue-progressbar pnpm

Imports

VueProgressBar
wrong:
```
import { VueProgressBar } from 'vue-progressbar'
```
correct:
```
import VueProgressBar from 'vue-progressbar'
```
The library exports a default, not named, component for global registration via Vue.use().
$Progress
wrong:
```
import { $Progress } from 'vue-progressbar'
```
correct:
```
this.$Progress.start()
```
The $Progress API is exposed directly on the Vue instance after global plugin installation, not via direct import.

Quickstart

Demonstrates the global registration of vue-progressbar with options, its integration with Vue Router for navigation progress, and manual control using the $Progress API in a Vue 2 application.

import Vue from 'vue'
import VueProgressBar from 'vue-progressbar'
import App from './App'
import router from './router' // Assuming you have a router setup

const options = {
  color: '#bffaf3',
  failedColor: '#874b4b',
  thickness: '5px',
  transition: {
    speed: '0.2s',
    opacity: '0.6s',
    termination: 300
  },
  autoRevert: true,
  location: 'left',
  inverse: false
}

Vue.use(VueProgressBar, options)

new Vue({
  router,
  ...App,
  created () {
    this.$Progress.start() // Start progress bar on app creation

    this.$router.beforeEach((to, from, next) => {
      if (to.meta.progress !== undefined) {
        let meta = to.meta.progress
        this.$Progress.parseMeta(meta)
      }
      this.$Progress.start()
      next()
    })

    this.$router.afterEach(() => {
      this.$Progress.finish()
    })
  },
  mounted () {
    this.$Progress.finish() // Finish progress bar when App.vue is mounted
  }
}).$mount('#app')

// Inside your App.vue template:
// <template>
//     <div id="app">
//         <router-view></router-view>
//         <vue-progress-bar></vue-progress-bar>
//     </div>
// </template>

view raw JSON →