Registry / web-framework / vue-progress-path

vue-progress-path

library0.0.2jsnpmunverified

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.

web-framework

npm install vue-progress-path

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-PROGRESS-PATH

vue-progress-path

web-frameworkjavascriptv0.0.2

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.

VueProgress

✓ import VueProgress from 'vue-progress-path';

✗ const VueProgress = require('vue-progress-path');

This is a default import for the plugin. It registers the `<loading-progress>` component globally when used with `Vue.use()`.

CSS Styles

✓ import 'vue-progress-path/dist/vue-progress-path.css';

✗ import 'vue-progress-path/dist/vue-progress-path.js';

The core styles for the progress indicators must be imported separately as a side-effect. Omitting this import will result in unstyled components.

loading-progress

✓ <loading-progress :progress="value" />

✗ import { LoadingProgress } from 'vue-progress-path';

The `<loading-progress>` component is registered globally via the plugin when `Vue.use(VueProgress)` is called. It is not directly imported as a named component.

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.

import Vue from 'vue'; import 'vue-progress-path/dist/vue-progress-path.css'; import VueProgress from 'vue-progress-path'; Vue.use(VueProgress); new Vue({ el: '#app', data() { return { progress: 0, indeterminate: false, counterClockwise: false, hideBackground: false, }; }, mounted() { setInterval(() => { if (this.indeterminate) return; this.progress = (this.progress + 5) % 105; if (this.progress >= 100) { this.progress = 0; } }, 200); }, template: ` <div id="app"> <h1>Vue Progress Path Demo</h1> <p>Control progress with the input below:</p> <input type="range" v-model.number="progress" min="0" max="100" /> {{ progress }}% <br> <label> <input type="checkbox" v-model="indeterminate"> Indeterminate </label> <label> <input type="checkbox" v-model="hideBackground"> Hide Background </label> <label> <input type="checkbox" v-model="counterClockwise"> Counter Clockwise </label> <h3>Material-like Spinner</h3> <loading-progress :progress="progress" :indeterminate="indeterminate" :counter-clockwise="counterClockwise" :hide-background="hideBackground" size="64" rotate fillDuration="2" rotationDuration="1" /> <h3>Semi-circle Progress</h3> <loading-progress :progress="progress" :indeterminate="indeterminate" :counter-clockwise="counterClockwise" :hide-background="hideBackground" shape="semicircle" size="64" /> <h3>Custom SVG Path</h3> <loading-progress :progress="progress" :indeterminate="indeterminate" :counter-clockwise="counterClockwise" :hide-background="hideBackground" shape="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" size="180" fill-duration="2" /> </div> `, });

Debug

Known issues

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

fix

Consider migrating to a actively maintained progress component library, especially for Vue 3 projects.

affects: >=0.0.2

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

fix

For Vue 3 projects, seek a progress library specifically designed for Vue 3. This package requires a Vue 2 environment.

affects: >=0.0.2

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

fix

Thoroughly test components and be prepared for potential undocumented behavior or breaking changes if relying on specific internal workings.

affects: >=0.0.2

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

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.

affects: >=0.0.2

Errors

Common errors & fixes

[Vue warn]: Unknown custom element: <loading-progress> - did you register the component correctly?

The `VueProgress` plugin was not registered with `Vue.use()`, or the component is being used before the plugin is applied.

fix

Ensure you have `import VueProgress from 'vue-progress-path'; Vue.use(VueProgress);` in your main application entry point before instantiating your Vue app.

Failed to resolve component: loading-progress

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.

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.

Module not found: Error: Can't resolve 'vue-progress-path/dist/vue-progress-path.css'

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

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';`.

Upgrade

Version history

0.0.2latest on npm

Audit

Dependencies

vuerequiredPeer dependency for Vue.js 2.x runtime. The library is built for and relies on Vue 2's API.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/Akryum/vue-progress-path ↗

packagehttps://www.npmjs.com/package/vue-progress-path ↗