Vue Gantt Chart Component for Project Timelines

Install in Your Vue 3 App

ApexGantt for Vue requires two packages: the Vue wrapper and the core engine. It is a Vue 3 wrapper using the Composition API and requires Vue 3.3 or later (peer dependency vue ^3.3.0); Vue 2 is not supported.

npm install vue-apexgantt apexgantt
# or
pnpm add vue-apexgantt apexgantt
# or
yarn add vue-apexgantt apexgantt

A complete working Gantt chart in one Single File Component:

<template>
  <ApexGanttChart
    :tasks="tasks"
    view-mode="week"
    height="500px"
  />
</template>

<script setup lang="ts">
import { ref } from "vue"
import { ApexGanttChart } from "vue-apexgantt"
import type { TaskInput } from "vue-apexgantt"

const tasks = ref<TaskInput[]>([
  { id: "task-1", name: "Design",      startTime: "01-01-2026", endTime: "01-15-2026", progress: 75 },
  { id: "task-2", name: "Development", startTime: "01-16-2026", endTime: "02-28-2026", progress: 40, dependency: "task-1" },
  { id: "task-3", name: "QA",          startTime: "03-01-2026", endTime: "03-15-2026", progress: 0,  dependency: "task-2" }
])
</script>

Props use camelCase in script and kebab-case in templates (view-mode, class-name).

Handling Events in Vue

Vue emits use kebab-case in templates. Bind handlers with @event-name, and reach imperative methods through a template ref:

<template>
  <ApexGanttChart
    ref="ganttRef"
    :tasks="tasks"
    view-mode="week"
    height="600px"
    @task-dragged="handleTaskDragged"
    @task-resized="handleTaskResized"
    @task-update-success="handleTaskUpdateSuccess"
  />

  <button @click="ganttRef?.zoomIn()">Zoom In</button>
  <button @click="ganttRef?.zoomOut()">Zoom Out</button>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { ApexGanttChart } from "vue-apexgantt"
import type {
  TaskDraggedEventDetail,
  TaskResizedEventDetail,
  TaskUpdateSuccessEventDetail
} from "vue-apexgantt"

const ganttRef = ref<InstanceType<typeof ApexGanttChart> | null>(null)

const handleTaskDragged = (d: TaskDraggedEventDetail) => console.log("dragged", d)
const handleTaskResized = (d: TaskResizedEventDetail) => console.log("resized", d)
const handleTaskUpdateSuccess = async (d: TaskUpdateSuccessEventDetail) => {
  await fetch(`/api/tasks/${d.taskId}`, { method: "PATCH", body: JSON.stringify(d.updatedTask) })
}
</script>

The wrapper exposes six emits (taskUpdate, taskUpdateSuccess, taskValidationError, taskUpdateError, taskDragged, taskResized) and template-ref methods zoomIn, zoomOut, update, updateTask, destroy, and getInstance.

Customization and Theming

Bind :theme reactively for a runtime toggle, and pass a Partial<GanttUserOptions> through the options prop for deeper control:

<template>
  <ApexGanttChart :tasks="tasks" :theme="theme" :options="ganttOptions" />
  <button @click="theme = theme === 'light' ? 'dark' : 'light'">Toggle theme</button>
</template>

<script setup lang="ts">
import { ref } from "vue"
import type { ThemeMode, GanttUserOptions } from "vue-apexgantt"

const theme = ref<ThemeMode>("light")

const ganttOptions: Partial<GanttUserOptions> = {
  enableTaskDrag: true,
  enableTaskResize: true,
  enableTaskEdit: true,
  barBackgroundColor: "#537CFA",
  rowBackgroundColors: ["#FFFFFF", "#F8F9FA"]
}
</script>

Mapping Your API Shape with useGanttData

API responses rarely match the field names ApexGantt expects. The useGanttData composable maps any shape, including nested paths via dot notation and value transforms, without hand-written code:

<script setup lang="ts">
import { ref } from "vue"
import { ApexGanttChart, useGanttData } from "vue-apexgantt"
import type { ParsingConfig } from "vue-apexgantt"

const apiData = ref([
  {
    project: {
      task:   { id: "T1", title: "Design" },
      dates:  { start: "01-01-2026", end: "01-15-2026" },
      status: { completion: 0.75 }
    }
  }
])

const parsingConfig: ParsingConfig = {
  id:        "project.task.id",
  name:      "project.task.title",
  startTime: "project.dates.start",
  endTime:   "project.dates.end",
  progress:  { key: "project.status.completion", transform: (v) => v * 100 }
}

const tasks = useGanttData({ data: apiData, parsing: parsingConfig })
</script>

<template>
  <ApexGanttChart :tasks="tasks" />
</template>

Dot notation pulls values from nested objects; the transform function converts unit-mismatched values, here a 0–1 completion ratio into a 0–100 percentage.

TypeScript Support in Vue

vue-apexgantt ships TypeScript definitions for every public surface:

import type {
  TaskInput,
  TaskType,
  ViewMode,
  ThemeMode,
  GanttUserOptions,
  ParsingConfig,
  TaskUpdateEventDetail,
  TaskUpdateSuccessEventDetail,
  TaskDraggedEventDetail,
  TaskResizedEventDetail
} from "vue-apexgantt"

Use these to type your refs, parsing configs, and event handlers. Volar picks them up in templates and <script setup> blocks.

Commercial License Setup

If you have a commercial ApexGantt license, set it once at application start, before createApp().mount():

// main.ts
import { createApp } from "vue"
import { setApexGanttLicense } from "vue-apexgantt"
import App from "./App.vue"

setApexGanttLicense("your-license-key-here")

createApp(App).mount("#app")

The community edition runs without a license key.