Vue Gantt Quick-Start

Starter project showing how to use DHTMLX Vue Gantt in a Vue App.

Related tutorial: https://docs.dhtmlx.com/gantt/integrations/vue/quick-start/

How to start

Clone the repo and run

git clone https://github.com/dhtmlx/vue-gantt-quick-start.git
cd vue-gantt-quick-start
npm install
npm run start

Code example

The component allows simple declarative initialization:

<script setup lang="ts">
import { ref } from "vue";
import VueGantt, {
  type SerializedLink,
  type SerializedTask,
  type VueGanttDataConfig
} from "@dhtmlx/trial-vue-gantt";
import "@dhtmlx/trial-vue-gantt/dist/vue-gantt.css";

import { links as initialLinks, tasks as initialTasks } from "../demoData";

const tasks = ref<SerializedTask[]>(initialTasks);
const links = ref<SerializedLink[]>(initialLinks);

const data: VueGanttDataConfig = {
  save: (entity, action, item, id) => {
    console.log("save", { entity, action, item, id });
  }
};
</script>

<template>
    <VueGantt :tasks="tasks" :links="links" :data="data" />
</template>

Check the Online documentation to find more.

Project structure

src/
  components/
    GanttChart.vue  <- <GanttChart /> component
  demoData.ts  <- minimal task/link arrays
  App.vue      <- mounts Gantt
  main.ts

License

The code in this repository is released under the MIT License.

@dhx/vue-gantt and @dhtmlx/trial-vue-gantt are commercial libraries - use them under a valid license or evaluation agreement.

Useful links

• Learn about DHTMLX Vue Gantt
• Learn about DHTMLX Gantt
• Technical support
• Online documentation