![\"jordium-gantt-vue3](\"public/assets/jordium-gantt-vue3-logo.svg\"){kind=logo}
jordium-gantt-vue3\r\n\r\n\r\n \r\n ![\"npm](\"https://img.shields.io/npm/v/jordium-gantt-vue3?style=flat-square\")
![\"npm](\"https://img.shields.io/npm/dt/jordium-gantt-vue3?style=flat-square\")
![\"MIT](\"https://img.shields.io/badge/license-MIT-blue.svg\"){kind=icon}
\r\n \r\n \r\n \r\n \r\n \r\n
![](\"https://img.shields.io/badge/Vue.js-){kind=icon}
![](\"https://img.shields.io/badge/TypeScript-){kind=icon}
![](\"https://img.shields.io/badge/Node.js-){kind=icon}
![\"Nodejs\"](\"https://img.shields.io/badge/Node.js%20in%20Dev/Build-%3E=20.0.0-339933?style=flat-square&logo=node.js&logoColor=white\"){kind=icon}
\r\n δΈζ | \r\n English | \r\n Release Notes\r\n
\r\n\r\nA modern Vue 3 Gantt chart component library with built-in resource view and resource planning capabilities, providing complete solutions for project management, task scheduling, and resource allocation
\r\n\r\n\r\n\r\n\r\n \r\n π± Gitee Live Demo\r\n \r\n | \r\n \r\n π± Github Live Demo\r\n \r\n | \r\n \r\n π¦ GitHub\r\n \r\n | \r\n \r\n π¦ Gitee\r\n \r\n | \r\n \r\n π npm\r\n \r\n
\r\n\r\n\r\n β οΈ Important Notice: Following recent security vulnerability updates, all base packages now require Nodejs >= 20. If you maintain any local customizations or secondary development, please ensure your Node.js version is upgraded before continuing development and build operations.\r\n
\r\n\r\n β οΈ Important Notice (Read Before Upgrading): If you are upgrading to v1.13.5 or later, the semantics of the type field on the Resource interface have changed (free text β resource category Human/Device/Others). Any job-title/role text previously stored in type will NOT be migrated automatically β please migrate it to the new title field before upgrading, otherwise the \"title\" column will be empty and the \"category\" column will show unexpected text. See the Breaking Change note in the Resource Data Structure section for details.\r\n
![\"Light](\"design/screenshots/light-theme-en.png\")
\r\n\r\n![\"Light](\"design/screenshots/light-theme-en1.png\")
\r\n\r\n#### Dark Theme\r\n\r\n![\"Dark](\"design/screenshots/dark-theme-en.png\")
\r\n\r\n![\"Dark](\"design/screenshots/dark-theme-en1.png\")
\r\n\r\n---\r\n\r\n## π¦ Installation\r\n\r\nInstall using your preferred package manager:\r\n\r\n```bash\r\n# npm\r\nnpm install jordium-gantt-vue3\r\n\r\n# yarn\r\nyarn add jordium-gantt-vue3\r\n\r\n# pnpm\r\npnpm add jordium-gantt-vue3\r\n```\r\n\r\n---\r\n\r\n## π Quick Start\r\n\r\n### Import Component\r\n\r\nImport the `GanttChart` component and styles:\r\n\r\n```vue\r\n\r\n```\r\n\r\n> **Tip**: The style file only needs to be imported once in your project. It's recommended to import it in `main.ts` or the root component.\r\n\r\n### First Example\r\n\r\nCreate your first Gantt chart:\r\n\r\n```vue\r\n\r\n