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"
    :pixels-per-day="25.7"
    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 (pixels-per-day, 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"
    :pixels-per-day="25.7"
    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 emits every core event, 20 with apexgantt 3.20, from taskUpdate and taskUpdateSuccess to taskProgressChanged, dependencyAdded, historyChange, and sortChange, bound in kebab-case. The template-ref methods are zoomIn, zoomOut, update, updateTask, destroy, and getInstance, which returns the chart instance for the rest of the API.

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 { ApexGanttChart } from "vue-apexgantt"
import type { ThemeMode, GanttUserOptions, 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" }
])

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

Licence Key Setup

Set your licence key 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")

ApexGantt is included in the Premium plan and above and has no free tier. Without a key it renders with a trial watermark for evaluation.