Registry / web-framework / vue-progressbar

vue-progressbar

library0.7.5jsnpmunverified

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.

web-framework

npm install vue-progressbar

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-PROGRESSBAR

vue-progressbar

web-frameworkjavascriptv0.7.5

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueProgressBar

✓ import VueProgressBar from 'vue-progressbar'

✗ import { VueProgressBar } from 'vue-progressbar'

The library exports a default, not named, component for global registration via Vue.use().

$Progress

✓ this.$Progress.start()

✗ import { $Progress } from 'vue-progressbar'

The $Progress API is exposed directly on the Vue instance after global plugin installation, not via direct import.

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>

Debug

Known issues

breakingThis 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`.

affects: All versions

gotchaThe 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.

affects: >=0.7.5

Errors

Common errors & fixes

Property '$Progress' was accessed during render but is not defined on instance. (TypeError: Cannot read properties of undefined (reading 'start'))

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

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`).

Upgrade

Version history

0.7.5latest on npm

Audit

Dependencies

vuerequiredRuntime dependency for Vue.js 1.x or 2.x applications.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/hilongjw/vue-progressbar ↗

packagehttps://www.npmjs.com/package/vue-progressbar ↗