Vue Progress Path

Common errors

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

  cause 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

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

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

Warnings

• breaking 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.
  Fix: Consider migrating to a actively maintained progress component library, especially for Vue 3 projects.
• breaking 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.
  Fix: For Vue 3 projects, seek a progress library specifically designed for Vue 3. This package requires a Vue 2 environment.
• gotcha 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.
  Fix: Thoroughly test components and be prepared for potential undocumented behavior or breaking changes if relying on specific internal workings.
• gotcha 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.
  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.

Install

• npm install vue-progress-path npm
• yarn add vue-progress-path yarn
• pnpm add vue-progress-path pnpm

Imports

• VueProgress
  wrong:

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

  correct:

  import VueProgress from '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
  wrong:

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

  correct:

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

  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
  wrong:

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

  correct:

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

  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.

Quickstart

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>
  `,
});