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.

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