Syncfusion AI Assistant

How can I help you?

Getting Started with the Vue Gantt Chart in the Quasar Framework

20 May 20269 minutes to read

This article provides a step-by-step guide for setting up a Quasar project and integrating the Syncfusion® Vue Gantt Chart component using the Composition API.

The Quasar Framework is a Vue.js-based open-source framework that empowers developers to create high-performance and responsive applications across various platforms, such as web, mobile, and desktop.

Prerequisites

System requirements for Syncfusion® Vue Gantt Chart component

Set up the Quasar project

To initiate the creation of a new Quasar project, use the following commands:

npm init quasar

This command prompts additional configurations. Follow the steps outlined in the images below:

quasar-setup1

This generates the necessary files and prompts for project dependency installation. Respond with ‘yes’ to proceed with npm install, as shown in the image below:

quasar-setup2

Navigate to your project directory:

cd quasar-project

Now that quasar-project is ready to run with default settings, let’s add Vue Gantt Chart component to the project.

Add Syncfusion® Vue packages

Syncfusion® Vue component packages are available at npmjs.com. To use Syncfusion® Vue components in the project, install the corresponding npm package.

This article uses the Vue Gantt Chart component as an example. To use the Vue Gantt Chart component in the project, the @syncfusion/ej2-vue-gantt package needs to be installed using the following command:

npm install @syncfusion/ej2-vue-gantt

Import Syncfusion® CSS styles

In this article, the Tailwind3 theme is applied using CSS styles, which are available in installed packages. The necessary Tailwind3 CSS styles for the Gantt Chart component and its dependents were imported into the <style> section of the src/app.vue file.

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-gantt/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-treegrid/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-layouts/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
</style>

Note: When using features like editing, toolbar, filtering, or dialogs, you need to import additional component styles:

/* For editing, toolbar, and dialog features */
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css";

/* For rich text editor in dialog notes tab */
@import "../node_modules/@syncfusion/ej2-richtexteditor/styles/tailwind3.css";

The order of importing CSS styles should be in line with their dependency graph.

Create sample data

Define a simple task list with hierarchical relationships. Each task must have a StartDate and either a Duration or EndDate to render properly.

const data = [
  { TaskID: 1, TaskName: 'Project initiation', StartDate: new Date('2024-04-01'), EndDate: new Date('2024-04-15') },
  { TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('2024-04-01'), Duration: 4, Progress: 70, ParentID: 1 },
  { TaskID: 3, TaskName: 'Perform site survey', StartDate: new Date('2024-04-01'), Duration: 4, Progress: 50, ParentID: 1 },
  { TaskID: 4, TaskName: 'Soil testing', StartDate: new Date('2024-04-01'), Duration: 3, Progress: 40, ParentID: 1 },
  { TaskID: 5, TaskName: 'Project estimation', StartDate: new Date('2024-04-08'), EndDate: new Date('2024-04-18') },
  { TaskID: 6, TaskName: 'Develop floor plan', StartDate: new Date('2024-04-08'), Duration: 5, Progress: 30, ParentID: 5 },
  { TaskID: 7, TaskName: 'Estimate project cost', StartDate: new Date('2024-04-08'), Duration: 5, Progress: 20, ParentID: 5 }
]

Configure task fields

const taskFields = {
  id: 'TaskID',
  name: 'TaskName',
  startDate: 'StartDate',
  duration: 'Duration',
  progress: 'Progress',
  parentID: 'ParentID'
};

Field mapping reference

Property Description Required
id Unique task identifier Yes
name Task display name Yes
startDate Task start date Yes
duration Task duration in days Yes
progress Task completion percentage (0-100) No
parentID Parent task ID for hierarchy No

*Either duration or endDate is required for a task to render properly.

Add the Syncfusion® Vue component

Follow the below steps to add the Vue Gantt Chart component:

First, import and register the Gantt Chart component and its child directives in the script section of the src/App.vue file. If you are using the Composition API, you should add the setup attribute to the script tag to indicate that Vue will be using the Composition API.

<script setup>
   import { GanttComponent as EjsGantt} from '@syncfusion/ej2-vue-gantt';
</script>
<template>
  <ejs-gantt 
    :dataSource="data"
    :taskFields="taskFields"
  >
  </ejs-gantt>
</template>

<script setup>
  import { GanttComponent as EjsGantt} from '@syncfusion/ej2-vue-gantt';
  const data = [
    {TaskID: 1, TaskName: 'Project initiation', StartDate: new Date('2024-04-01'), EndDate: new Date('2024-04-15')},
    {TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('2024-04-01'), Duration: 4, Progress: 70, ParentID: 1},
    {TaskID: 3, TaskName: 'Perform site survey', StartDate: new Date('2024-04-01'), Duration: 4, Progress: 50, ParentID: 1},
    {TaskID: 4, TaskName: 'Soil testing', StartDate: new Date('2024-04-01'), Duration: 3, Progress: 40, ParentID: 1},
    {TaskID: 5, TaskName: 'Project estimation', StartDate: new Date('2024-04-08'), EndDate: new Date('2024-04-18')},
    {TaskID: 6, TaskName: 'Develop floor plan', StartDate: new Date('2024-04-08'), Duration: 5, Progress: 30, ParentID: 5},
    {TaskID: 7, TaskName: 'Estimate project cost', StartDate: new Date('2024-04-08'), Duration: 5, Progress: 20, ParentID: 5}
  ];
  const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-gantt/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-treegrid/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-layouts/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
</style>

Run the project

To run the project, use the following command:

npm run dev

Output

You will see a Gantt Chart with:

  • Task hierarchy with parent-child relationships
  • Timeline view showing task bars
  • Progress indicators on each task
  • Automatically calculated dates based on duration

The chart displays two parent tasks (“Project initiation” and “Project estimation”) with their subtasks shown in a tree structure. Task bars are rendered on the timeline, sized according to their duration and start dates.

Quasar output

Next Steps