{"id":12549,"library":"vue-progress-path","title":"Vue Progress Path","description":"Vue Progress Path is a Vue.js 2.x library offering highly customizable progress bars and loading indicators. Its primary differentiator is the ability to render progress shapes using any custom SVG path, alongside built-in options like circles and semicircles, providing extensive design flexibility. The package is currently at version `0.0.2`. Despite its initial promise for versatile progress UIs, the project is explicitly noted as 'Work In Progress' and has not seen any updates or commits in over six years, indicating it is no longer actively maintained. Consequently, there is no ongoing release cadence, and it remains exclusively compatible with Vue 2.x, rendering it unsuitable for modern Vue 3 applications. Users should be aware that no further features, bug fixes, or security patches are anticipated.","status":"abandoned","version":"0.0.2","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/Akryum/vue-progress-path","tags":["javascript"],"install":[{"cmd":"npm install vue-progress-path","lang":"bash","label":"npm"},{"cmd":"yarn add vue-progress-path","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-progress-path","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue.js 2.x runtime. The library is built for and relies on Vue 2's API.","package":"vue","optional":false}],"imports":[{"note":"This is a default import for the plugin. It registers the `` component globally when used with `Vue.use()`.","wrong":"const VueProgress = require('vue-progress-path');","symbol":"VueProgress","correct":"import VueProgress from 'vue-progress-path';"},{"note":"The core styles for the progress indicators must be imported separately as a side-effect. Omitting this import will result in unstyled components.","wrong":"import 'vue-progress-path/dist/vue-progress-path.js';","symbol":"CSS Styles","correct":"import 'vue-progress-path/dist/vue-progress-path.css';"},{"note":"The `` component is registered globally via the plugin when `Vue.use(VueProgress)` is called. It is not directly imported as a named component.","wrong":"import { LoadingProgress } from 'vue-progress-path';","symbol":"loading-progress","correct":""}],"quickstart":{"code":"import Vue from 'vue';\nimport 'vue-progress-path/dist/vue-progress-path.css';\nimport VueProgress from 'vue-progress-path';\n\nVue.use(VueProgress);\n\nnew Vue({\n el: '#app',\n data() {\n return {\n progress: 0,\n indeterminate: false,\n counterClockwise: false,\n hideBackground: false,\n };\n },\n mounted() {\n setInterval(() => {\n if (this.indeterminate) return;\n this.progress = (this.progress + 5) % 105;\n if (this.progress >= 100) {\n this.progress = 0;\n }\n }, 200);\n },\n template: `\n
\n

Vue Progress Path Demo

\n

Control progress with the input below:

\n {{ progress }}%\n
\n \n \n \n\n

Material-like Spinner

\n \n\n

Semi-circle Progress

\n \n\n

Custom SVG Path

\n \n
\n `,\n});","lang":"javascript","description":"This quickstart initializes a basic Vue 2 application, registers the vue-progress-path plugin, and demonstrates three types of progress indicators: a Material Design-like spinner, a semi-circle, and a custom SVG path. It includes controls to toggle indeterminate state, hide background, and reverse direction, along with a slider to manually adjust progress."},"warnings":[{"fix":"Consider migrating to a actively maintained progress component library, especially for Vue 3 projects.","message":"This project is abandoned. It has not been updated in over six years, and there will be no new features, bug fixes, or security updates. Usage in production environments is not recommended.","severity":"breaking","affected_versions":">=0.0.2"},{"fix":"For Vue 3 projects, seek a progress library specifically designed for Vue 3. This package requires a Vue 2 environment.","message":"The library is only compatible with Vue 2.x. It does not support Vue 3 and will likely cause runtime errors if used in a Vue 3 application due to breaking API changes in Vue's ecosystem.","severity":"breaking","affected_versions":">=0.0.2"},{"fix":"Thoroughly test components and be prepared for potential undocumented behavior or breaking changes if relying on specific internal workings.","message":"Being a v0.0.2 release, the API might not be stable, and internal implementation details could be subject to change without prior notice or adherence to semantic versioning. Documentation is sparse, and the 'Work In Progress' status implies potential instability.","severity":"gotcha","affected_versions":">=0.0.2"},{"fix":"Always include `import 'vue-progress-path/dist/vue-progress-path.css'` in your main application file or component where the progress indicator is used.","message":"The component's CSS styles are imported via a separate file (`dist/vue-progress-path.css`). Forgetting this import will result in unstyled, potentially invisible, progress components.","severity":"gotcha","affected_versions":">=0.0.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you have `import VueProgress from 'vue-progress-path'; Vue.use(VueProgress);` in your main application entry point before instantiating your Vue app.","cause":"The `VueProgress` plugin was not registered with `Vue.use()`, or the component is being used before the plugin is applied.","error":"[Vue warn]: Unknown custom element: - did you register the component correctly?"},{"fix":"Verify that your project is running Vue 2.x, and that `Vue.use(VueProgress)` is correctly called. For Vue 3, this library is incompatible.","cause":"Similar to the Vue warn, this indicates Vue cannot find the component definition. This often happens in a Vue 3 context or if `Vue.use()` was skipped.","error":"Failed to resolve component: loading-progress"},{"fix":"Check your `node_modules` directory for `vue-progress-path/dist/vue-progress-path.css`. Ensure the import statement is exactly `import 'vue-progress-path/dist/vue-progress-path.css';`.","cause":"The CSS import path is incorrect, or the file does not exist in the specified location (e.g., due to a broken npm install or missing `node_modules`).","error":"Module not found: Error: Can't resolve 'vue-progress-path/dist/vue-progress-path.css'"}],"ecosystem":"npm"}