<br>
<br>

<p align="center">
  <a href="https://bryntum.com/" rel="noopener" target="_blank">
    <img height="50" src="https://bryntum.com/resources/bryntum_logo_blue.svg" alt="Bryntum logo">
  </a>
  &emsp;&emsp;&emsp;&emsp;&emsp;
  <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/vue.svg" alt="Vue" height="55">
</p>

<br>

# Vue 3 wrapper for Bryntum Gantt

This package provides a wrapper that turns Bryntum Gantt into a Vue 3 component, exposing configuration options,
properties, features, and events.

## Version Requirement

* Vue: `3.2` or higher
* TypeScript: `4.2` or higher
* Vite `5` or higher

## Package Contents

| Path         | Description                                    |
|--------------|------------------------------------------------|
| `lib/`       | Vue 3 wrapper components (BryntumGantt etc.) |
| `src/`       | Original Vue source files                      |
| `src/*.d.ts` | TypeScript type definitions                    |

**Note:** This is a wrapper package. The core `@bryntum/gantt` package must be installed separately.

## Installation

### Vue 3 Wrapper

```bash
npm install @bryntum/gantt-vue-3@latest
```

### Component Package (Required)

```bash
npm install @bryntum/gantt@latest
```

## Try Bryntum Online Demos

* [View Online Vue Demos](https://bryntum.com/products/gantt/examples/?framework=vue)

## Quick Start

Edit the `src/App.vue` file and replace the content with the following:

```typescript
<script setup>
import { BryntumGantt } from '@bryntum/gantt-vue-3';
import { ganttProps } from './AppConfig.js';
</script>

<template>
    <bryntum-gantt
        v-bind="ganttProps"
    />
</template>

<style lang="scss">
@import './App.scss';
</style>
```

Create a `GanttConfig.ts` file in the `src/` directory with the following content:

```typescript
import type { TaskModel } from '@bryntum/gantt';
import { StringHelper } from '@bryntum/gantt';
import { type BryntumGanttProps } from '@bryntum/gantt-vue-3';

export const ganttConfig : BryntumGanttProps = {
    startDate : new Date(2026, 0, 1),
    endDate   : new Date(2026, 2, 1),

    dependencyIdField : 'sequenceNumber',
    rowHeight         : 45,
    tickSize          : 45,
    barMargin         : 8,
    project           : {
        autoSetConstraints : true, // automatically introduce `startnoearlier` constraint if tasks do not use constraints, dependencies, or manuallyScheduled
        autoLoad           : true,
        loadUrl : 'data/data.json'
    },

    columns : [{ type : 'name', width : 250 }],

    // Custom task content, display task name on child tasks
    taskRenderer({ taskRecord } : { taskRecord: TaskModel }) {
        if (taskRecord.isLeaf && !taskRecord.isMilestone) {
            return StringHelper.encodeHtml(taskRecord.name);
        }
        return '';
    }
};
```

<details>
<summary>Create sample data (click to expand)</summary>

Create a `public/data/data.json` file for example data and add the following JSON data to it:

```json
{
  "success": "true",
  "tasks": {
    "rows": [
      {
        "id": 1,
        "name": "Documentation Project",
        "expanded": true,
        "children": [
          {
            "id": 2,
            "name": "Preparation",
            "expanded": true,
            "children": [
              { "id": 6, "name": "Proof-read docs", "startDate": "2026-01-02", "endDate": "2026-01-09" },
              { "id": 3, "name": "Release docs",    "startDate": "2026-01-09", "endDate": "2026-01-10" }
            ]
          },
          {
            "id": 4,
            "name": "Development",
            "expanded": true,
            "children": [
              { "id": 7, "name": "Write API docs",  "startDate": "2026-01-05", "endDate": "2026-01-12" },
              { "id": 8, "name": "Write tutorials", "startDate": "2026-01-10", "endDate": "2026-01-16" },
              { "id": 9, "name": "Create examples", "startDate": "2026-01-12", "endDate": "2026-01-18" }
            ]
          },
          {
            "id": 5,
            "name": "Review & Release",
            "expanded": true,
            "children": [
              { "id": 10, "name": "Team review",     "startDate": "2026-01-18", "endDate": "2026-01-20" },
              { "id": 11, "name": "Final approval",  "startDate": "2026-01-20", "endDate": "2026-01-21" },
              { "id": 12, "name": "Public release",  "startDate": "2026-01-22", "endDate": "2026-01-22" }
            ]
          }
        ]
      }
    ]
  },
  "dependencies": {
    "rows": [
      { "fromTask": 6,  "toTask": 3  },
      { "fromTask": 7,  "toTask": 8  },
      { "fromTask": 8,  "toTask": 9  },
      { "fromTask": 9,  "toTask": 10 },
      { "fromTask": 10, "toTask": 11 },
      { "fromTask": 11, "toTask": 12 }
    ]
  }
}
```

This is the data the Bryntum Gantt will use.

</details>

Lastly, add some styling to your `src/style.css`:

```css
/* FontAwesome is used for icons */
@import '@bryntum/gantt/fontawesome/css/fontawesome.css';
@import '@bryntum/gantt/fontawesome/css/solid.css';
/* Structural CSS */
@import "@bryntum/gantt/gantt.css";
/* Bryntum theme of your choice */
@import "@bryntum/gantt/svalbard-light.css";
```

## Integration Guide

For details on installing and using this package, see the
[Vue Integration Guide](https://bryntum.com/products/gantt/docs/guide/Gantt/integration/vue/guide).

## Wrappers

Vue wrappers encapsulate Bryntum components as native Vue components, exposing all configuration options,
properties, features, and events through Vue-familiar patterns like props, events, and slots.

Visit [Wrappers documentation](https://bryntum.com/products/gantt/docs/guide/Gantt/integration/vue/guide#wrappers) for the complete list of available
wrapper components.

## Features

Features are optional modules that extend Bryntum Gantt functionality. Each feature is suffixed with `Feature` and
can be enabled and configured through standard Vue props.

Visit [Features documentation](https://bryntum.com/products/gantt/docs/guide/Gantt/integration/vue/guide#features) for the complete list of available
features and their configuration options.

## Explore All Bryntum Products

* [Bryntum Grid](https://bryntum.com/products/grid/) - High-performance data grid
* [Bryntum Scheduler](https://bryntum.com/products/scheduler/) - Resource scheduling component
* [Bryntum Scheduler Pro](https://bryntum.com/products/schedulerpro/) - Advanced scheduling with dependencies
* [Bryntum Gantt](https://bryntum.com/products/gantt/) - Project planning and management
* [Bryntum Calendar](https://bryntum.com/products/calendar/) - Full-featured calendar component
* [Bryntum TaskBoard](https://bryntum.com/products/taskboard/) - Kanban-style task management

Explore our comprehensive collection of demos:

| Product           |   <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/js.svg" alt="JavaScript" width="30"><br>JavaScript    |  <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/react.svg" alt="React" width="30"><br>React  |   <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/vue.svg" alt="Vue" width="30"><br>Vue   | <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/angular.svg" alt="Angular" width="30"><br>Angular |
|-------------------|:------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:----------------------------------------------------------------------:|:------------------------------------------------------------------------------:|
| **Grid**          |         [Grid JavaScript demos](https://bryntum.com/products/grid/examples/?framework=javascript)          |         [Grid React demos](https://bryntum.com/products/grid/examples/?framework=react)          |         [Grid Vue demos](https://bryntum.com/products/grid/examples/?framework=vue)          |         [Grid Angular demos](https://bryntum.com/products/grid/examples/?framework=angular)          |
| **Scheduler**     |    [Scheduler JavaScript demos](https://bryntum.com/products/scheduler/examples/?framework=javascript)     |    [Scheduler React demos](https://bryntum.com/products/scheduler/examples/?framework=react)     |    [Scheduler Vue demos](https://bryntum.com/products/scheduler/examples/?framework=vue)     |    [Scheduler Angular demos](https://bryntum.com/products/scheduler/examples/?framework=angular)     |
| **Scheduler Pro** | [Scheduler Pro JavaScript demos](https://bryntum.com/products/schedulerpro/examples/?framework=javascript) | [Scheduler Pro React demos](https://bryntum.com/products/schedulerpro/examples/?framework=react) | [Scheduler Pro Vue demos](https://bryntum.com/products/schedulerpro/examples/?framework=vue) | [Scheduler Pro Angular demos](https://bryntum.com/products/schedulerpro/examples/?framework=angular) |
| **Gantt**         |        [Gantt JavaScript demos](https://bryntum.com/products/gantt/examples/?framework=javascript)         |        [Gantt React demos](https://bryntum.com/products/gantt/examples/?framework=react)         |        [Gantt Vue demos](https://bryntum.com/products/gantt/examples/?framework=vue)         |        [Gantt Angular demos](https://bryntum.com/products/gantt/examples/?framework=angular)         |
| **Calendar**      |     [Calendar JavaScript demos](https://bryntum.com/products/calendar/examples/?framework=javascript)      |     [Calendar React demos](https://bryntum.com/products/calendar/examples/?framework=react)      |     [Calendar Vue demos](https://bryntum.com/products/calendar/examples/?framework=vue)      |     [Calendar Angular demos](https://bryntum.com/products/calendar/examples/?framework=angular)      |
| **TaskBoard**     |    [TaskBoard JavaScript demos](https://bryntum.com/products/taskboard/examples/?framework=javascript)     |    [TaskBoard React demos](https://bryntum.com/products/taskboard/examples/?framework=react)     |    [TaskBoard Vue demos](https://bryntum.com/products/taskboard/examples/?framework=vue)     |    [TaskBoard Angular demos](https://bryntum.com/products/taskboard/examples/?framework=angular)     |

## Online references

* [Bryntum Gantt documentation](https://bryntum.com/products/gantt/docs/)
* [Bryntum Gantt examples](https://bryntum.com/products/gantt/examples/)

* [Bryntum Support Forum](https://forum.bryntum.com/)
* [Contact us](https://bryntum.com/contact/)

## License and copyright

This wrapper depends on Bryntum Gantt, which is commercial software and requires a paid license.
Please visit the [Bryntum Gantt End User License](https://bryntum.com/products/gantt/license/) for the full text of the license.

Copyright © 2009-2026, Bryntum
All rights reserved.

