Getting Started with Bryntum Gantt in Vue

Using an AI coding assistant? Install the Bryntum MCP server to give it access to version-specific Bryntum documentation.

Try Vue demos

Bryntum Gantt is delivered with a variety of Vue demo applications showing its functionality. All demo applications have been verified to be compatible with Node.js 20.

View online Vue demos Build and run Vue demos

Version requirements

Minimum supported:

Vue: 3.0.0 or higher
TypeScript: 3.6.0 or higher (for TypeScript application)
Vite 4.0.0 or higher (for application build with Vite)

Recommended:

Vue: 3.0.0 or higher
TypeScript: 4.0.0 or higher (for TypeScript application)
Vite 5.0.0 or higher (for application build with Vite)

Please note that this guide is designed for creating a Vue 3 application. Since Vue 2 has reached end of life, we no longer maintain guides or components for Vue 2. We recommend upgrading to Vue 3 for continued support and compatibility.

Create Vue 3 application

To get started, the broad steps are as follows:

Access to npm registry
Create Application
Install component
Add component to Application
Apply styles
Run the application

The application we will be building now should look like the illustration below:

Access to npm registry

You can try out Bryntum components for free using our public Bryntum trial packages. If you have a Bryntum license, please refer to our Npm Repository Guide to access the private Bryntum repository.

Create Application

Similarly to all the examples shipped with the distribution, we will be using Vue CLI to build Vue applications.

Type the following command to install Vue CLI:

npm create vue@latest

This command will install and execute create-vue, the official Vue project scaffolding tool. You will be presented with prompts for several optional features such as TypeScript and testing support:

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes✔️
✔ Add JSX Support? … No✔️ / Yes
✔ Add Vue Router for Single Page Application development? … No✔️ / Yes
✔ Add Pinia for state management? … No✔️ / Yes
✔ Add Vitest for Unit testing? … No✔️ / Yes
✔ Add an End-to-End Testing Solution? … No✔️ / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No✔️ / Yes
✔ Add Prettier for code formatting? … No✔️ / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No✔️ / Yes

Scaffolding project in ./<your-project-name>...
Done.

We are using the above config in this quick start guide but feel free to make any changes.

You can then move to your application folder:

cd <your-project-name>

Please note some generated files will no longer be needed in your app, you can safely remove .src/components/HelloWorld.vue and src/assets/logo.png. Also, remove the assets folder and any links to .css files in the main.ts or main.js.

Install Bryntum Gantt packages

From your terminal, update project dependencies using the following commands:

Trial version Licensed version

npm install @bryntum/gantt@npm:@bryntum/gantt-trial@7.3.0 @bryntum/gantt-vue-3@7.3.0

npm install @bryntum/gantt@7.3.0 @bryntum/gantt-vue-3@7.3.0

If you're using the licensed Bryntum version, ensure that you have configured your npm properly to get access to the Bryntum packages. If not, refer to this guide.

Add component to Application

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

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

<script setup lang="ts">
import { BryntumGantt } from '@bryntum/gantt-vue-3';
import { ganttProps } from './AppConfig.ts';
</script>

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

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

The code above sets up a basic project structure, defining several tasks and establishing dependencies between them.

Bryntum Gantt schedules project tasks with consideration for dependencies, constraints, and calendar configurations. For a detailed introduction to the Bryntum Gantt project entity, please see the data guide.

By default, tasks will automatically be moved to the project's start date if there are no constraints, dependencies, or manually scheduled tasks. To prevent this, set autoSetConstraints to true in the ProjectModel configuration.

Create a AppConfig file in the src/ directory with the following content:

JavaScript TypeScript

'use strict';
Object.defineProperty(exports, '__esModule', { value : true });
exports.ganttConfig = void 0;
var gantt_1 = require('@bryntum/gantt');
exports.ganttConfig = {
    startDate : new Date(2026, 0, 1),
    endDate   : new Date(2026, 2, 1),

    dependencyIdField : 'sequenceNumber',
    rowHeight         : 45,
    tickSize          : 45,
    barMargin         : 8,
    project           : {
        autoSetConstraints : true,
        autoLoad           : true,
        loadUrl            : 'data/data.json'
    },
    columns      : [{ type : 'name', width : 250 }],
    // Custom task content, display task name on child tasks
    taskRenderer : function(_a) {
        var taskRecord = _a.taskRecord;
        if (taskRecord.isLeaf && !taskRecord.isMilestone) {
            return gantt_1.StringHelper.encodeHtml(taskRecord.name);
        }
        return '';
    }
};

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 '';
    }
};

Note that the startDate and endDate configs passed to ganttConfig denote the currently visible timespan.

Add component data

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.

Apply styles

Stylesheets

Remove both src/assets/main.css and src/assets/base.css, and delete the main.css import from src/main.ts.

The following CSS files are provided with the Bryntum npm packages or in the /build folder of the distribution:

File	Contents
`gantt.css`	Structural CSS
`svalbard-light.css`	Svalbard Light theme
`svalbard-dark.css`	Svalbard Dark theme
`visby-light.css`	Visby Light theme
`visby-dark.css`	Visby Dark theme
`stockholm-light.css`	Stockholm Light theme
`stockholm-dark.css`	Stockholm Dark theme
`material3-light.css`	Material3 Light theme
`material3-dark.css`	Material3 Dark theme
`fluent2-light.css`	Fluent2 Light theme
`fluent2-dark.css`	Fluent2 Dark theme
`fontawesome/css/fontawesome.css`	Font Awesome Free base CSS
`fontawesome/css/solid.css`	Font Awesome Free solid icons

You'll need to import the structural CSS and the preferred theme into your project for the Bryntum Gantt to render correctly. And if you are not replacing the icons used by the component, you will also need to include Font Awesome.

CSS SCSS

Create a src/App.css file and add the following:

/* 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";

You need to change the App.scss to App.css in the App.vue.

Create a src/App.scss file and add the following:

// 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
@import "@bryntum/gantt/svalbard-light.css";

For your application to support sass files, you'll need to add additional dependencies to your project. From the terminal:

npm install sass@1.42.0 --save-dev --save-prefix=~

Visit Creating a custom theme section for more info on how to create a custom theme.

Sizing the component

By default, the Bryntum Gantt component is configured to occupy 100% of the parent DOM element with a min-height of 10em.

To display the component at the appropriate size, you can, for example, set parent components to take up the full height of the screen.

CSS SCSS

In your src/App.css file, add the following:

body,
html {
    margin         : 0;
    display        : flex;
    flex-direction : column;
    height         : 100vh;
    font-family    : sans-serif;
    font-size      : 14px;
}

#app {
    flex : 1 1 100%;
}

In your src/App.scss file, add the following:

body,
html {
    margin         : 0;
    display        : flex;
    flex-direction : column;
    height         : 100vh;
    font-family    : sans-serif;
    font-size      : 14px;
}

#app {
    flex : 1 1 100%;
}

There are many other solutions depending on the situation. Feel free to adapt the code above regarding your application layout. For more information on the topic, see this guide Sizing the component.

Run the application

From your terminal:

npm run dev

Your application is now available under http://localhost:5173.

Further on integration with Vue

Do you want to know more about how Bryntum Gantt integrates with Vue and starts to customize your application? We provide you with a complete Vue guide here.

Troubleshooting

Stuck somewhere? Please refer to this Troubleshooting guide. If you find errors in our docs and/or onboarding guides, please report them in our forums.

Learn about Data

Bryntum components often use multiple data collections and entities.

For a detailed explanation of how these elements interact, see our guide to displaying data in Bryntum Gantt.