Quick start

# Vue Gantt Quick-Start

[![dhtmlx.com](https://img.shields.io/badge/made%20by-DHTMLX-blue)](https://dhtmlx.com/)

> Starter project showing how to use [DHTMLX Vue Gantt](https://dhtmlx.com/docs/products/dhtmlxGantt-for-Vuejs/) in a Vue App.

**Related tutorial**:
[https://docs.dhtmlx.com/gantt/integrations/vue/quick-start/](https://docs.dhtmlx.com/gantt/integrations/vue/quick-start/)

![Demo screenshot](./screenshot.png)


## How to start

Clone the repo and run

```bash
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:

```vue
<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](https://docs.dhtmlx.com/gantt/integrations/vue/) 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](https://docs.dhtmlx.com/gantt/integrations/vue/)
- [Learn about DHTMLX Gantt](https://dhtmlx.com/docs/products/dhtmlxGantt/)
- [Technical support](https://forum.dhtmlx.com/c/gantt)
- [Online documentation](https://docs.dhtmlx.com/gantt/)

<script setup lang="ts">
import GanttChart from "./components/GanttChart.vue";
</script>

<template>
  <div :style="{ height: '100vh', width: '100vw' }">
    <GanttChart />
  </div>
</template>

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