@bryntum/gantt-vue-3-thin

Vue 3 wrapper for Bryntum Gantt Thin packages

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

Thin Package: This is a thin wrapper package designed for applications that use multiple Bryntum products. Thin packages exclude bundled dependencies to avoid duplication. For details, see Vue Multiple Products.

Version Requirement

• Vue: 3.2 or higher
• TypeScript: 4.2 or higher
• Vite 5 or higher

Package Contents

Installation

Vue 3 Wrapper

npm install @bryntum/gantt-vue-3-thin@latest

Component Package (Required)

npm install @bryntum/gantt-thin@latest

Try Bryntum Online Demos

• View Online Vue Demos

Quick Start

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

<script setup>
import { createApp, ref } from 'vue';

import { BryntumGantt, BryntumGanttProjectModel } from '@bryntum/gantt-vue-3-thin';
import { ganttProps, ganttProjectProps } from './AppConfig';

import './App.scss';

const ganttProject = ref(null);

createApp({
    setup() {
        return {
            ganttProject
        };
    }
});
</script>

<template>
    <bryntum-gantt-project-model
        ref="ganttProject"
        v-bind=ganttProjectProps
    />
    <bryntum-gantt
        :project="ganttProject"
        v-bind="ganttProps"
    />
</template>

<style lang="scss">
</style>

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

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

export const ganttProps : 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 '';
    }
};

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

{
  "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.

Project Structure

Product Dependencies

API packages:

{
  "dependencies": {
    "@bryntum/core-thin": "7.3.7",
    "@bryntum/engine-thin": "7.3.7",
    "@bryntum/grid-thin": "7.3.7",
    "@bryntum/scheduler-thin": "7.3.7",
    "@bryntum/schedulerpro-thin": "7.3.7",
    "@bryntum/gantt-thin": "7.3.7"
  }
}

Framework wrapper packages:

{
  "dependencies": {
    "@bryntum/core-vue-3-thin": "7.3.7",
    "@bryntum/gantt-vue-3-thin": "7.3.7"
  }
}

Product Configuration

import { BryntumGanttProps } from '@bryntum/gantt-vue-3-thin';

const ganttProps : BryntumGanttProps = {
    // Gantt configuration
};

Product Styling

SCSS/CSS:

/* FontAwesome is used for icons */
@import '@bryntum/core-thin/fontawesome/css/fontawesome.css';
@import "@bryntum/core-thin/fontawesome/css/solid.css";
/* Structural CSS */
@import '@bryntum/core-thin/core.css';
@import '@bryntum/grid-thin/grid.css';
@import '@bryntum/scheduler-thin/scheduler.css';
@import '@bryntum/schedulerpro-thin/schedulerpro.css';
@import '@bryntum/gantt-thin/gantt.css';
/* Theme */
@import '@bryntum/core-thin/svalbard-light.css';

Product Localization

import '@bryntum/gantt-thin/lib/localization/De.js'

Integration Guide

For details on installing and using this package, see the Vue Integration 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 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 for the complete list of available features and their configuration options.

Explore All Bryntum Products

• Bryntum Grid - High-performance data grid
• Bryntum Scheduler - Resource scheduling component
• Bryntum Scheduler Pro - Advanced scheduling with dependencies
• Bryntum Gantt - Project planning and management
• Bryntum Calendar - Full-featured calendar component
• Bryntum TaskBoard - Kanban-style task management

Explore our comprehensive collection of demos:

Online references

• Bryntum Gantt documentation

• Bryntum Gantt examples

• Bryntum Support Forum

• Contact us

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 for the full text of the license.

Copyright © 2009-2026, Bryntum All rights reserved.