🚀 Built a Customizable Gantt Chart Component for Vue 3 — Introducing Jordium GanttChart v1.4.2

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!