@gantt-pro/vue

@gantt-pro/vue

Vue 3 Gantt chart component — zero third-party runtime dependencies, enterprise-grade features, out of the box.

Vue 3 甘特图组件 — 零第三方运行时依赖，企业级功能，开箱即用。

English

Introduction

@gantt-pro/vue is the Vue 3 adapter for the gantt-pro Gantt chart component. Built on top of @gantt-pro/core, it provides a fully-featured <GanttChart> component with zero third-party runtime dependencies — no dayjs, no lodash, no sortablejs.

Installation

# pnpm (recommended)
pnpm add @gantt-pro/vue @gantt-pro/core

# or npm
npm install @gantt-pro/vue @gantt-pro/core

# or yarn
yarn add @gantt-pro/vue @gantt-pro/core

@gantt-pro/core is a peer dependency — it provides type definitions and utility functions.

Quick Start

<template>
  <div style="height: 400px;">
    <GanttChart
      :data="tasks"
      :links="links"
      :columns="columns"
      scale="day"
      :row-height="36"
      :bar-height="24"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { GanttChart } from '@gantt-pro/vue'
import '@gantt-pro/vue/style.css'
import type { GanttTask, GanttLink, GanttColumn } from '@gantt-pro/core'

const tasks = ref<GanttTask[]>([
  {
    id: 'p1',
    name: 'Phase 1',
    children: [
      { id: 't1', name: 'Requirements', startDate: '2025-01-01', endDate: '2025-01-05', progress: 100, owner: 'Alice' },
      { id: 't2', name: 'Design', startDate: '2025-01-06', endDate: '2025-01-12', progress: 60, owner: 'Bob' },
      { id: 'm1', name: 'Design Review', startDate: '2025-01-13', milestone: true },
    ],
  },
])

const links = ref<GanttLink[]>([
  { from: 't1', to: 't2', type: 'fs' },
  { from: 't2', to: 'm1', type: 'fs' },
])

const columns: GanttColumn[] = [
  { key: 'name', label: 'Task Name', width: 220 },
  { key: 'startDate', label: 'Start', width: 88, align: 'center' },
  { key: 'endDate', label: 'End', width: 88, align: 'center' },
  { key: 'progress', label: 'Progress', width: 70, align: 'center' },
]
</script>

Important: Don't forget to import the stylesheet: import '@gantt-pro/vue/style.css'

Two-Way Binding

Supports v-model:data, v-model:scale, and v-model:links:

<template>
  <GanttChart
    v-model:data="tasks"
    v-model:scale="scale"
    v-model:links="links"
  />
</template>

Advanced Features

<template>
  <GanttChart
    :data="tasks"
    :links="links"
    :show-baseline="true"          <!-- Baseline comparison -->
    :show-critical-path="true"     <!-- Critical path highlight -->
    :auto-reschedule="true"        <!-- Dependency rescheduling -->
    :editable="true"               <!-- Inline editing -->
    :row-draggable="true"          <!-- Row drag-and-drop sorting -->
    :show-checkbox="true"          <!-- Checkbox selection -->
    :context-menu="true"           <!-- Right-click menu -->
    :level-color="true"            <!-- Hierarchy row colors -->
    :linked-resize="true"          <!-- Parent-child linked resize -->
    :snap="true"                   <!-- Snap alignment -->
    :off-screen-indicator="true"   <!-- Off-screen task indicator -->
    theme="purple"
    dark
  />
</template>

Ref Methods

<template>
  <div>
    <button @click="ganttRef?.undo()">Undo</button>
    <button @click="ganttRef?.redo()">Redo</button>
    <button @click="ganttRef?.scrollToToday()">Scroll to Today</button>
    <button @click="exportPNG">Export PNG</button>
    <GanttChart ref="ganttRef" :data="tasks" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { GanttChart, type GanttRef } from '@gantt-pro/vue'

const ganttRef = ref<GanttRef>()

function exportPNG() {
  ganttRef.value?.exportData({ format: 'png' })
}
</script>

Key Props

Ref Methods

Multi-Chart Sync

import { createGanttSyncHub } from '@gantt-pro/vue'

const hub = createGanttSyncHub({
  scroll: true,
  scale: true,
  selection: true,
  expand: true,
})

// Register multiple GanttChart instances via ref
hub.add(ganttRef1.value!)
hub.add(ganttRef2.value!)

Documentation

• [Full Docs](https://github.com/sodasmellguy/gant-pro/blob/HEAD/Stay tuned)
• [API Reference](https://github.com/sodasmellguy/gant-pro/blob/HEAD/Stay tuned)
• [Live Demo](https://github.com/sodasmellguy/gant-pro/blob/HEAD/Stay tuned)

License

MIT

中文

简介

@gantt-pro/vue 是 gantt-pro 甘特图组件的 Vue 3 适配层。基于 @gantt-pro/core 构建，提供功能完整的 <GanttChart> 组件，零第三方运行时依赖 — 不依赖 dayjs、lodash、sortablejs。

安装

# pnpm（推荐）
pnpm add @gantt-pro/vue @gantt-pro/core

# 或 npm
npm install @gantt-pro/vue @gantt-pro/core

# 或 yarn
yarn add @gantt-pro/vue @gantt-pro/core

@gantt-pro/core 是 peer dependency，提供类型定义和工具函数。

快速开始

<template>
  <div style="height: 400px;">
    <GanttChart
      :data="tasks"
      :links="links"
      :columns="columns"
      scale="day"
      :row-height="36"
      :bar-height="24"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { GanttChart } from '@gantt-pro/vue'
import '@gantt-pro/vue/style.css'
import type { GanttTask, GanttLink, GanttColumn } from '@gantt-pro/core'

const tasks = ref<GanttTask[]>([
  {
    id: 'p1',
    name: '项目阶段一',
    children: [
      { id: 't1', name: '需求分析', startDate: '2025-01-01', endDate: '2025-01-05', progress: 100, owner: '张三' },
      { id: 't2', name: '详细设计', startDate: '2025-01-06', endDate: '2025-01-12', progress: 60, owner: '李四' },
      { id: 'm1', name: '设计评审', startDate: '2025-01-13', milestone: true },
    ],
  },
])

const links = ref<GanttLink[]>([
  { from: 't1', to: 't2', type: 'fs' },
  { from: 't2', to: 'm1', type: 'fs' },
])

const columns: GanttColumn[] = [
  { key: 'name', label: '任务名称', width: 220 },
  { key: 'startDate', label: '开始', width: 88, align: 'center' },
  { key: 'endDate', label: '结束', width: 88, align: 'center' },
  { key: 'progress', label: '进度', width: 70, align: 'center' },
]
</script>

重要： 别忘了引入样式文件：import '@gantt-pro/vue/style.css'

双向绑定

支持 v-model:data、v-model:scale、v-model:links：

<template>
  <GanttChart
    v-model:data="tasks"
    v-model:scale="scale"
    v-model:links="links"
  />
</template>

高级功能

<template>
  <GanttChart
    :data="tasks"
    :links="links"
    :show-baseline="true"          <!-- 基准线对比 -->
    :show-critical-path="true"     <!-- 关键路径高亮 -->
    :auto-reschedule="true"        <!-- 依赖顺推 -->
    :editable="true"               <!-- 行内编辑 -->
    :row-draggable="true"          <!-- 行拖拽排序 -->
    :show-checkbox="true"          <!-- Checkbox 多选 -->
    :context-menu="true"           <!-- 右键菜单 -->
    :level-color="true"            <!-- 层级行背景色 -->
    :linked-resize="true"          <!-- 父子联动缩放 -->
    :snap="true"                   <!-- 吸附对齐 -->
    :off-screen-indicator="true"   <!-- 视口外定位指示器 -->
    theme="purple"
    dark
  />
</template>

通过 ref 调用方法

<template>
  <div>
    <button @click="ganttRef?.undo()">撤销</button>
    <button @click="ganttRef?.redo()">重做</button>
    <button @click="ganttRef?.scrollToToday()">回到今天</button>
    <button @click="exportPNG">导出图片</button>
    <GanttChart ref="ganttRef" :data="tasks" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { GanttChart, type GanttRef } from '@gantt-pro/vue'

const ganttRef = ref<GanttRef>()

function exportPNG() {
  ganttRef.value?.exportData({ format: 'png' })
}
</script>

主要 Props

Ref 方法

多图联动

import { createGanttSyncHub } from '@gantt-pro/vue'

const hub = createGanttSyncHub({
  scroll: true,    // 同步滚动
  scale: true,     // 同步缩放
  selection: true, // 同步选择
  expand: true,    // 同步展开/折叠
})

// 通过 ref 注册多个 GanttChart 实例
hub.add(ganttRef1.value!)
hub.add(ganttRef2.value!)

文档

• 完整文档
• API 参考
• 在线演示

开源协议

MIT