Getting Started with the Vue Progress Bar Component in Vue 3

25 Jul 20268 minutes to read

This article provides a step-by-step guide to creating a Vite JavaScript project and integrating the Syncfusion® Vue Progress Bar component using either the Composition API or the Options API.

The Composition API groups related logic into reusable functions. The Options API organizes component logic with options such as data, methods, and lifecycle hooks. Choose the API that best fits the application’s structure.

Prerequisites

Ensure that the development environment meets the system requirements for Syncfusion® Vue UI components.

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
    |-- @syncfusion/ej2-vue-base

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

Use a package release compatible with Vue 3 and the Node.js version used by the project. Before upgrading, check the Vue system requirements and package release notes.

Set Up the Vite Project

Create a Vite project using either npm or yarn.

npm

npm create vite@latest my-app -- --template vue

yarn

yarn create vite my-app --template vue

If Vite prompts you to install dependencies and start the project immediately, select No. The Syncfusion package is installed in a later step.

Navigate to the project directory:

cd my-app

Install the project dependencies.

npm

npm install

yarn

yarn install

Note: To create a TypeScript project, use npm create vite@latest my-app -- --template vue-ts or yarn create vite my-app --template vue-ts.

Add the Syncfusion® Vue Package

Syncfusion® Vue packages are available on npm.

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

npm

npm install @syncfusion/ej2-vue-progressbar

yarn

yarn add @syncfusion/ej2-vue-progressbar

Note: For TypeScript projects, refer to Vue 3 with the Composition API and TypeScript or Vue 3 with the Options API and TypeScript.

Add the Syncfusion® Vue Progress Bar Component

Follow these steps to add the Vue Progress Bar component using the Composition API or Options API.

Step 1: Import and Register the Component

Import the Progress Bar component in src/App.vue.

In the Composition API example, alias the component import to the name used by the custom element in the template. Components imported in <script setup> are available directly in the template.

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

export default {
  name: 'App',
  components: {
    'ejs-progressbar': ProgressBarComponent
  }
};
</script>

Step 2: Declare the Progress Bar Configuration

Define the type, value, and dimensions settings in the script section.

<script setup>
const type = 'Circular';
const value = 75;
const minimum = 0;
const maximum = 100;
const width = '250px';
const height = '250px';
</script>
<script>
export default {
  data() {
    return {
      type: 'Circular',
      value: 75,
      minimum: 0,
      maximum: 100,
      width: '250px',
      height: '250px',
    };
  }
};
</script>

Step 3: Define the Progress Bar in the Template

Add the Progress Bar component to the template section of src/App.vue.

The example uses the following properties:

  • type specifies the Progress Bar shape. Supported values include Linear and Circular.
  • value specifies the current progress value.
  • minimum specifies the minimum scale value.
  • maximum specifies the maximum scale value.
  • width specifies the component width.
  • height specifies the component height.

Keep value between minimum and maximum.

<template>
  <div id="app">
    <ejs-progressbar
      id="progressbar"
      :type="type"
      :value="value"
      :minimum="minimum"
      :maximum="maximum"
      :width="width"
      :height="height"
    ></ejs-progressbar>
  </div>
</template>

Complete App.vue Example

Here is the summarized code for the above steps. Replace the contents of src/App.vue with either the Composition API or Options API example.

<template>
  <div id="app">
    <ejs-progressbar
      id="progressbar"
      :type="type"
      :value="value"
      :minimum="minimum"
      :maximum="maximum"
      :width="width"
      :height="height"
    ></ejs-progressbar>
  </div>
</template>

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

const type = 'Circular';
const value = 75;
const minimum = 0;
const maximum = 100;
const width = '250px';
const height = '250px';
</script>
<template>
  <div id="app">
    <ejs-progressbar
      id="progressbar"
      :type="type"
      :value="value"
      :minimum="minimum"
      :maximum="maximum"
      :width="width"
      :height="height"
    ></ejs-progressbar>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    'ejs-progressbar': ProgressBarComponent
  },
  data() {
    return {
      type: 'Circular',
      value: 75,
      minimum: 0,
      maximum: 100,
      width: '250px',
      height: '250px'
    };
  }
};
</script>

Run the Project

Save src/App.vue, and then start the development server using either npm or yarn.

npm

npm run dev

yarn

yarn run dev

Open the local URL displayed in the terminal, commonly http://localhost:5173, and verify the Progress Bar displays.

Vue 3 circular Progress Bar

Sample: Explore the Vite-based Vue Progress Bar getting-started sample.

Troubleshooting

  • The Progress Bar is not rendered. Verify that the component import is aliased correctly in the Composition API or registered in components in the Options API. Confirm that valid width and height values are configured, and check the browser console for component or licensing errors.
  • The value is not displayed as expected. Verify that value is numeric and falls between minimum and maximum.
  • The circular Progress Bar is clipped. Increase the configured width and height or verify that the parent container does not restrict the component dimensions.
  • An import or runtime error is displayed. Verify that @syncfusion/ej2-vue-progressbar is installed and that its version supports the project’s Vue and Node.js versions.

For additional assistance, refer to the Vue Progress Bar API documentation.

See Also