Vue Gantt

Vue Gantt is the official Vue wrapper for DHTMLX Gantt. It targets Vue 3 and keeps full access to the Gantt API while adding Vue-friendly props, events, and composables.

AI-assisted development

If you use an AI coding assistant, the DHTMLX Vue Gantt agent skill can help it follow correct wrapper integration patterns - matching CSS imports, providing an explicit height chain, choosing a data ownership model, normalizing dates around data.save / data.batchSave, and mapping the app theme through Gantt CSS variables. For real-time API reference, connect the DHTMLX MCP server.

What You Get With The Wrapper

• Declarative setup through props (config, templates, plugins, theme, locale)
• Data sync for tasks/links and advanced datasets
• Gantt event wiring through the events map
• Vue lifecycle entry point through @ready
• Component ref access to the underlying instance
• Typed helper factories and composables for common wrapper workflows

<script setup lang="ts">
import VueGantt from "@dhtmlx/trial-vue-gantt";
import "@dhtmlx/trial-vue-gantt/dist/vue-gantt.css";
</script>

<template>
  <div style={{height: '520px'}}>
    <VueGantt :tasks="tasks" :links="links" />
  </div>
</template>

If you want the architecture and capability map first, read Vue Gantt Overview.

Recommended Learning Path

Use this order if you are new to the wrapper:

1. Installation for package channel selection and imports
2. Quick Start to render your first chart
3. Configuration Reference for prop and callback details
4. Data Binding and State Management Basics to choose a data ownership model
5. Pinia Integration Tutorial for a store-driven implementation
6. Customization Patterns for templates, lightbox, inline editors, and modals

Wrapper Vs Low-Level JS Integration

Pick the integration path based on how much lifecycle and sync logic you want to manage yourself.

• Use the official wrapper (@dhtmlx/trial-vue-gantt or @dhx/vue-gantt) for Vue props/events, wrapper-managed synchronization, and typed helper APIs.
• Use low-level JS integration only when you want direct control over instance lifecycle and manual API orchestration.

For the low-level path, use dhtmlxGantt with Vue.js (Low-Level Integration).

Data And State Management Entry Point

Start with the state section if you already know you need store/backend synchronization:

• Data & State Management
• Data Binding and State Management Basics
• Using Vue Gantt with Pinia

Examples and evaluation resources

Browse the public Vue Gantt examples for runnable demos of the wrapper:

• Live demo - all wrapper features running in the browser
• GitHub repository - source for every sample referenced in the overview

Minimal starter projects (one wrapper feature each):

• vue-gantt-quick-start - smallest possible setup, matches the Quick Start
• vue-gantt-pinia-starter - Pinia store with batchSave and store-level undo/redo, matches the Pinia tutorial

If you're evaluating Vue Gantt, the evaluation page provides access to technical support during the evaluation period. See Installation.