Getting Started with the Vue Progress Bar Component in Vue 2

25 Jul 20264 minutes to read

This section provides a step-by-step guide to creating a Vue 2 application using Vue CLI and integrating the Syncfusion® Vue Progress Bar component. It explains how to configure a project and render an animated circular Progress Bar.

Prerequisites

Ensure that the development environment meets the requirements listed in https://ej2.syncfusion.com/vue/documentation/system-requirements.

This guide uses the Vue 2 Options API. Use a supported Node.js version and a Vue CLI version that allows creating Vue 2 projects.

Dependencies

The following are the minimum dependencies required to use the Vue Progress Bar component:

  |-- @syncfusion/ej2-vue-progressbar
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-svg-base

Only the @syncfusion/ej2-vue-progressbar package must be installed directly. Its required dependencies are installed automatically.

Set Up the Vue 2 Project

Install Vue CLI globally using either npm or Yarn, and create a project with the vue create command.

npm

npm install -g @vue/cli
vue create quickstart

Yarn

yarn global add @vue/cli
vue create quickstart

When creating the project, select Default ([Vue 2] babel, eslint) from the menu. If this option is unavailable, manually select Vue 2 when configuring the project.

Vue 2 project

After the project is created, navigate to its directory:

cd quickstart

Use either npm or Yarn consistently throughout the project to avoid generating multiple lock files.

Add the Syncfusion® Vue Package

Syncfusion Vue packages are available on npmjs.com.

Install the @syncfusion/ej2-vue-progressbar package using either npm or Yarn.

npm

npm install @syncfusion/ej2-vue-progressbar --save

Yarn

yarn add @syncfusion/ej2-vue-progressbar

Note: npm v5 and later save installed packages to the dependencies section of package.json by default. The --save option is not required.

Add the Syncfusion® Vue Progress Bar Component

Import and register the Progress Bar component, and then define it in the template of the src/App.vue file.

The following example renders a circular Progress Bar with a value of 100.

<template>
  <div id="container">
    <ejs-progressbar
      id="percentage"
      type="Circular"
      :value="value"
    ></ejs-progressbar>
  </div>
</template>

<script>
import { ProgressBarComponent } from '@syncfusion/ej2-vue-progressbar';

export default {
  name: 'App',
  components: {
    'ejs-progressbar': ProgressBarComponent
  },
  data() {
    return {
      value: 100
    };
  }
};
</script>

The example uses the following properties:

  • type specifies the Progress Bar type. Supported types include Linear and Circular.
  • value specifies the current progress value.
    Ensure that the value is within the range defined by the component’s minimum and maximum properties.

Run the Project

Save the changes and start the development server using either npm or Yarn.

npm

npm run serve

Yarn

yarn run serve

Open the local URL displayed in the terminal, such as http://localhost:8080, in a browser. The application displays an animated circular Progress Bar with a value of 100.

Module Injection

The Progress Bar component is divided into feature-specific modules. Register only the modules required by the application using the component’s provide option.

The ProgressAnnotationService module enables annotation support in the Progress Bar.

The following example registers the annotation service:

import { ProgressBarComponent, ProgressAnnotationService } from "@syncfusion/ej2-vue-progressbar";

export default {
  components: {
    'ejs-progressbar': ProgressBarComponent
  },
  provide: {
    progressbar: [ProgressAnnotationService]
  }
};

Register ProgressAnnotationService only when annotations are used.

Note: Register only the modules required by the application to keep the bundle size smaller.

Troubleshooting

  • The Progress Bar is not rendered. Verify that ProgressBarComponent is imported, and the browser console does not contain component resolution or package errors.

  • The Progress Bar package cannot be resolved. Confirm that @syncfusion/ej2-vue-progressbar is listed in the dependencies section of package.json, and reinstall the project dependencies if necessary.

  • The displayed progress is incorrect. Verify that value is within the range specified by minimum and maximum.

See Also