Installation

This guide will help you install and setup HyVue Gantt in your Vue 3 project.

Requirements

Before installing HyVue Gantt, ensure your project meets these prerequisites:

• Vue 3.5+ or higher
• TypeScript 5.0 or higher (recommended but optional)
• Node.js 24.x for developing and building this repository. Applications consuming the library should follow their build tool's Node.js requirements.
• npm bundled with Node.js, or another compatible package manager

Dependencies

HyVue Gantt relies on the following peer dependencies:

"peerDependencies": {
  "@fortawesome/free-brands-svg-icons": "^6.7.1",
  "@fortawesome/free-regular-svg-icons": "^6.7.1",
  "@fortawesome/free-solid-svg-icons": "^6.7.1",
  "@fortawesome/vue-fontawesome": "^3.0.8",
  "@vueuse/core": "^12.0.0",
  "date-holidays": "^3.23.14",
  "dayjs": "^1.11.13",
  "lodash-es": "^4.17.21",
  "uuid": "^11.0.5",
  "vue": "^3.5.13"
}

These dependencies will be installed automatically when you install HyVue Gantt, but you should be aware of them if you need to manage version conflicts or if you already use some of these libraries.

Installation Methods

Using npm

npm install hy-vue-gantt

Using yarn

yarn add hy-vue-gantt

Basic Setup

Global Registration

Add HyVue Gantt to your Vue application by registering it in your main entry file:

import { createApp } from 'vue'
import App from './App.vue'
import hyvuegantt from 'hy-vue-gantt'


const app = createApp(App)
app.use(hyvuegantt)
app.mount('#app')

Component Registration

Alternatively, you can import components individually:

import { GGanttChart, GGanttRow, extendDayjs } from 'hy-vue-gantt'

extendDayjs()

export default {
  components: {
    GGanttChart,
    GGanttRow
  }
}

TypeScript Support

HyVue Gantt includes built-in TypeScript declarations. To get full TypeScript support, ensure your tsconfig.json includes:

{
  "compilerOptions": {
    "types": ["hy-vue-gantt"]
  }
}

What's Next?

After installation, you might want to:

• Check out our Quick Start Guide for your first Gantt chart
• Learn about Chart Configuration
• Explore Examples to see what's possible

Troubleshooting

If you encounter any installation issues:

1. Ensure all peer dependencies are correctly installed
2. Check that your Vue version is compatible
3. Clear your package manager cache and node_modules
4. Try with a fresh installation

For more help, visit our GitHub Issues page.

Loading optional features

The library uses dynamic imports for heavier feature dependencies:

Dependency	Loaded when
html2canvas	Exporting PNG, SVG or PDF
jspdf	Exporting PDF
papaparse	Importing a CSV file; Jira JSON imports do not need it
date-holidays	holidayHighlight has a country code
@e965/xlsx	Exporting Excel (already loaded on demand)

A bundler that supports code splitting can keep these modules out of the initial application download. The first use of a feature waits for its chunk to load; subsequent uses reuse the loaded module. Holiday highlighting appears once the calendar is available and updates automatically for country/date-range changes.

These are still peer dependencies: install them as before. This changes browser loading, not the installation size. Keep loading the Day.js locales used by your application explicitly. Consumers that import one of these dependencies statically elsewhere may include it in their initial bundle again.

In the sibling playground production build, with holidays disabled and before using import/export, initial JavaScript decreased from approximately 2.43 MB to 436 kB (gzip: 543 kB to 136 kB, about 75% less). This measures the entry chunk and its static JavaScript imports, excluding CSS and deferred chunks; it is not a measurement of total installed size or page-load time. The full calendar remains a sizeable deferred download when holiday highlighting is enabled.