This content originally appeared on DEV Community and was authored by Nelson Li
Hey everyone 👋
I’m excited to share something I’ve been building over the past few months — a modern and customizable Gantt Chart component for Vue 3, called Jordium GanttChart
.
This project started from a simple need:
I couldn’t find a Vue 3 Gantt component that’s lightweight, visually modern, and fully customizable for project management use cases.
So, I decided to build one myself.
🎯 What is Jordium GanttChart?
Jordium GanttChart is a Vue 3 component library designed for project scheduling, task management, and visual planning — similar to tools like ClickUp, Clockify, or MS Project, but fully open-source and easy to integrate into your own app.
👉 Demo: Live Example
👉 GitHub: jordium-gantt-vue3
👉 NPM: npm install jordium-gantt-vue3
✨ Key Features (v1.4.2)
🧩 Vue 3 + Composition API support
🎨 Flexible layout (pixel or percentage width)
🖱️ Drag, resize, and adjust TaskBars & Milestones
🌈 Configurable TaskBar focus effect — long-press to highlight and focus specific tasks
⚙️ Customizable timeline range and auto-fit
🧠 Fully typed with TypeScript
📦 Easy integration with Element Plus
💡 Why I Built It
When working on internal project scheduling tools, I realized:
Most open-source Gantt libraries are outdated or based on Vue 2
Many are too heavy, with limited custom styling or API flexibility
I wanted something modular, intuitive, and developer-friendly
So I decided to make one that developers could actually enjoy using — and extend it freely for different kinds of project planning systems.
🛠️ Quick Start
Install via npm:
npm install jordium-gantt-vue3
Import it in your Vue 3 project:
import { JordiumGantt } from 'jordium-gantt-vue3';
import 'jordium-gantt-vue3/style.css';
Then use it directly in your template:
<template>
<JordiumGantt :tasks="tasks" />
</template>
🌞 New in v1.4.2
This release adds several improvements to usability and flexibility:
Added TaskBar focus highlight (long-press to focus)
Configurable TaskBar info display
Smarter timeline range auto-calculation
Improved drag/resize precision
🧭 Roadmap
✅ Milestone management
✅ Drag & resize
🔜 Dependency lines (Task relations)
🔜 Export & snapshot support
🔜 Performance optimization for large data sets
❤️ Join the Project
If you like this idea or find it useful:
⭐ Star the repo on GitHub
🧩 Try it in your own Vue 3 project
💬 Share feedback or ideas — contributions are always welcome!
📍 GitHub: https://github.com/nelson820125/jordium-gantt-vue3
📍 Live Demo: https://nelson820125.github.io/jordium-gantt-vue3
Thanks for reading! I hope this project helps others building modern project management or scheduling tools with Vue 3.
If you build something cool with it — I’d love to see it!
This content originally appeared on DEV Community and was authored by Nelson Li
Nelson Li | Sciencx (2025-11-03T06:27:13+00:00) 🚀 Built a Customizable Gantt Chart Component for Vue 3 — Introducing Jordium GanttChart v1.4.2. Retrieved from https://www.scien.cx/2025/11/03/%f0%9f%9a%80-built-a-customizable-gantt-chart-component-for-vue-3-introducing-jordium-ganttchart-v1-4-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.