{"id":15277,"library":"vue-progressbar","title":"Vue Progress Bar","description":"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.","status":"abandoned","version":"0.7.5","language":"javascript","source_language":"en","source_url":"https://github.com/hilongjw/vue-progressbar","tags":["javascript","vue","vue-progressbar","vue loading progress","vue progressbar","progressbar"],"install":[{"cmd":"npm install vue-progressbar","lang":"bash","label":"npm"},{"cmd":"yarn add vue-progressbar","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-progressbar","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for Vue.js 1.x or 2.x applications.","package":"vue","optional":false}],"imports":[{"note":"The library exports a default, not named, component for global registration via Vue.use().","wrong":"import { VueProgressBar } from 'vue-progressbar'","symbol":"VueProgressBar","correct":"import VueProgressBar from 'vue-progressbar'"},{"note":"The $Progress API is exposed directly on the Vue instance after global plugin installation, not via direct import.","wrong":"import { $Progress } from 'vue-progressbar'","symbol":"$Progress","correct":"this.$Progress.start()"}],"quickstart":{"code":"import Vue from 'vue'\nimport VueProgressBar from 'vue-progressbar'\nimport App from './App'\nimport router from './router' // Assuming you have a router setup\n\nconst options = {\n  color: '#bffaf3',\n  failedColor: '#874b4b',\n  thickness: '5px',\n  transition: {\n    speed: '0.2s',\n    opacity: '0.6s',\n    termination: 300\n  },\n  autoRevert: true,\n  location: 'left',\n  inverse: false\n}\n\nVue.use(VueProgressBar, options)\n\nnew Vue({\n  router,\n  ...App,\n  created () {\n    this.$Progress.start() // Start progress bar on app creation\n\n    this.$router.beforeEach((to, from, next) => {\n      if (to.meta.progress !== undefined) {\n        let meta = to.meta.progress\n        this.$Progress.parseMeta(meta)\n      }\n      this.$Progress.start()\n      next()\n    })\n\n    this.$router.afterEach(() => {\n      this.$Progress.finish()\n    })\n  },\n  mounted () {\n    this.$Progress.finish() // Finish progress bar when App.vue is mounted\n  }\n}).$mount('#app')\n\n// Inside your App.vue template:\n// <template>\n//     <div id=\"app\">\n//         <router-view></router-view>\n//         <vue-progress-bar></vue-progress-bar>\n//     </div>\n// </template>","lang":"javascript","description":"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."},"warnings":[{"fix":"Migrate to a Vue 3 compatible progress bar library such as `@aacassandra/vue3-progressbar`, `@jambonn/vue-next-progressbar`, or `@syncfusion/ej2-vue-progressbar`.","message":"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.","severity":"breaking","affected_versions":"All versions"},{"fix":"Consider using a more recently maintained alternative for long-term projects, even if targeting Vue 2, to ensure ongoing support and security.","message":"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.","severity":"gotcha","affected_versions":">=0.7.5"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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')`.","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.","error":"Property '$Progress' was accessed during render but is not defined on instance. (TypeError: Cannot read properties of undefined (reading 'start'))"},{"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`).","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.","error":"VueProgressBar is not a constructor"}],"ecosystem":"npm"}