{"id":11063,"library":"hy-vue-gantt","title":"Hyper Vue Gantt","description":"Hyper Vue Gantt is a robust and highly customizable Gantt chart component specifically engineered for Vue 3 applications. As an evolution of the `vue-ganttastic` package, it has been completely rewritten in TypeScript, offering enhanced type safety and developer experience. The current stable version is 5.2.0, with an active release cadence, demonstrating frequent updates and new feature additions. Key differentiators include comprehensive time management with multi-precision support, advanced task dependency visualization, interactive progress tracking, hierarchical grouping, full touch and mobile responsiveness, and a rich customization system with 11 built-in themes and extensive slots. It also provides advanced data management features like export options (PDF, PNG, SVG, Excel), import support (CSV, Jira JSON), built-in undo/redo, and real-time updates.","status":"active","version":"5.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/Xeyos88/HyVueGantt","tags":["javascript","gantt","chart","bar","diagram","vue","vuejs","ganttastic","typescript"],"install":[{"cmd":"npm install hy-vue-gantt","lang":"bash","label":"npm"},{"cmd":"yarn add hy-vue-gantt","lang":"bash","label":"yarn"},{"cmd":"pnpm add hy-vue-gantt","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides brand icons for UI elements.","package":"@fortawesome/free-brands-svg-icons","optional":false},{"reason":"Provides regular style icons for UI elements.","package":"@fortawesome/free-regular-svg-icons","optional":false},{"reason":"Provides solid style icons for UI elements.","package":"@fortawesome/free-solid-svg-icons","optional":false},{"reason":"Vue component for integrating Font Awesome icons.","package":"@fortawesome/vue-fontawesome","optional":false},{"reason":"Collection of Vue Composition API utilities, likely used for reactivity or advanced DOM interactions.","package":"@vueuse/core","optional":false},{"reason":"Used for internationalization features, specifically holiday highlighting.","package":"date-holidays","optional":false},{"reason":"Lightweight date manipulation library, crucial for chart time calculations and formatting.","package":"dayjs","optional":false},{"reason":"Used for converting HTML elements into a canvas image, enabling PNG/JPEG exports.","package":"html2canvas","optional":false},{"reason":"Client-side PDF generation library, used for exporting charts to PDF.","package":"jspdf","optional":false},{"reason":"ESM bundle of Lodash utilities, used for various data manipulation tasks.","package":"lodash-es","optional":false},{"reason":"Fast and powerful CSV parser, used for CSV import/export functionality.","package":"papaparse","optional":false},{"reason":"Generates RFC-compliant UUIDs, likely used for unique bar/row IDs.","package":"uuid","optional":false},{"reason":"Core Vue 3 framework, essential for component rendering and reactivity.","package":"vue","optional":false},{"reason":"Library for reading and writing spreadsheet files (Excel), used for Excel export. Note: This dependency is listed as a direct URL.","package":"xlsx","optional":false}],"imports":[{"note":"This is the default export used as a Vue plugin via `app.use()` for global component registration.","wrong":"import { hyvuegantt } from 'hy-vue-gantt'","symbol":"hyvuegantt","correct":"import hyvuegantt from 'hy-vue-gantt'"},{"note":"The main Gantt chart component is a named export. Ensure your build system supports ESM.","wrong":"import GGanttChart from 'hy-vue-gantt'","symbol":"GGanttChart","correct":"import { GGanttChart } from 'hy-vue-gantt'"},{"note":"Individual row component for the Gantt chart, also a named export.","wrong":"import GGanttRow from 'hy-vue-gantt'","symbol":"GGanttRow","correct":"import { GGanttRow } from 'hy-vue-gantt'"},{"note":"This is a TypeScript type definition. Always use `import type` to avoid bundling issues and ensure correct type-only imports.","wrong":"import { ChartRow } from 'hy-vue-gantt'","symbol":"ChartRow","correct":"import type { ChartRow } from 'hy-vue-gantt'"}],"quickstart":{"code":"import { createApp, ref } from \"vue\"\nimport App from \"./App.vue\"\nimport hyvuegantt from \"hy-vue-gantt\"\nimport type { ChartRow } from \"hy-vue-gantt\"\n\nconst app = createApp(App)\napp.use(hyvuegantt)\n\napp.mount(\"#app\")\n\n// In your App.vue or a component\n// <template>\n//   <g-gantt-chart\n//     :chart-start=\"chartStart\"\n//     :chart-end=\"chartEnd\"\n//     :precision=\"precision\"\n//     :bar-start=\"barStart\"\n//     :bar-end=\"barEnd\"\n//     color-scheme=\"vue\"\n//     grid\n//     commands\n//   >\n//     <g-gantt-row\n//       v-for=\"row in rows\"\n//       :key=\"row.id\"\n//       :label=\"row.label\"\n//       :bars=\"row.bars\"\n//     />\n//   </g-gantt-chart>\n// </template>\n\n// <script setup lang=\"ts\">\n// const chartStart = ref(\"2024-01-01\")\n// const chartEnd = ref(\"2024-12-31\")\n// const precision = ref(\"day\")\n// const barStart = ref(\"start\")\n// const barEnd = ref(\"end\")\n\n// const rows = ref<ChartRow[]>([\n//   {\n//     id: 1,\n//     label: \"Design Phase\",\n//     bars: [\n//       {\n//         start: \"2024-01-05\",\n//         end: \"2024-01-20\",\n//         ganttBarConfig: {\n//           id: \"1\",\n//           label: \"UI Design\",\n//           style: { background: \"#42b883\" }\n//         }\n//       }\n//     ]\n//   }\n// ])\n// </script>","lang":"typescript","description":"This quickstart demonstrates the basic installation as a Vue plugin, global registration, and the fundamental usage of `GGanttChart` and `GGanttRow` components with reactive data for displaying a simple Gantt chart."},"warnings":[{"fix":"Carefully review the changelogs of all peer dependencies (e.g., Vue, Day.js, Font Awesome) and update your project's `package.json` accordingly. Reinstall dependencies and address any compilation or runtime errors.","message":"Version 5.0.0 introduced breaking changes primarily due to dependency upgrades to their latest major versions. This may require manual updates to your project's dependencies and potentially code adjustments if any of the underlying libraries changed their APIs.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Ensure that any custom `baseUnitWidth` values passed to the `g-gantt-chart` component fall within the acceptable range of 20 to 50.","message":"The `baseUnitWidth` prop, which controls the width of each time unit on the chart, is internally constrained to a range between 20 and 50. Values provided outside this range will be clamped, potentially leading to unexpected zoom levels or display behavior.","severity":"gotcha","affected_versions":">=5.0.2"},{"fix":"While `hy-vue-gantt` relies on this, it's a practice to be aware of. For critical applications, consider mirroring the dependency or consulting the package maintainers for an npm registry-based alternative. Always verify the integrity of directly linked dependencies.","message":"The `xlsx` peer dependency is specified using a direct URL (`https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz`) instead of a standard npm registry version. This can introduce supply chain risks, make builds non-deterministic, or lead to build failures if the URL becomes unavailable or its content changes.","severity":"gotcha","affected_versions":">=5.0.0"},{"fix":"Ensure your project utilizes Vue 3. If you are on Vue 2, you will need to either migrate your application to Vue 3 or find a Gantt chart library that supports Vue 2.","message":"Hyper Vue Gantt is exclusively built for Vue 3. Using it in a Vue 2 project will lead to incompatibility issues and runtime errors due to differing component APIs, reactivity systems, and lifecycle hooks.","severity":"breaking","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Upgrade to `hy-vue-gantt@5.0.1` or a newer version where slot rendering logic was streamlined and fixed.","cause":"In versions prior to 5.0.1, conditional rendering or incorrect forwarding of slots within `v-for` loops could trigger this Vue warning.","error":"[Vue warn]: Non-function value encountered for slot 'default'. The slot should be an array of VNodes, a render function, or null."},{"fix":"Ensure all bar data objects strictly adhere to the `GanttBar` interface, specifically that `ganttBarConfig` is present and correctly structured with `id` and `label`.","cause":"A `bar` object within a `ChartRow`'s `bars` array is missing the `ganttBarConfig` property, or `ganttBarConfig` itself is missing required sub-properties like `id` or `label`.","error":"TypeError: Cannot read properties of undefined (reading 'ganttBarConfig')"},{"fix":"If in Node.js, ensure your `package.json` has `\"type\": \"module\"` or use `.mjs` file extensions. For browser environments, ensure your build tool (Vite, Webpack, Rollup) is configured to handle ES Modules and transpile if targeting older browsers.","cause":"Attempting to use ES module `import` syntax in an environment configured for CommonJS, without proper transpilation or explicit module declaration.","error":"Uncaught SyntaxError: Cannot use import statement outside a module"},{"fix":"Verify that `app.use(hyvuegantt)` is called in your main application entry file (e.g., `main.ts`). If using components without global registration, ensure you `import { GGanttChart, GGanttRow } from 'hy-vue-gantt'` and register them in your component.","cause":"The `GGanttChart` component was not properly registered or imported. This often happens if `app.use(hyvuegantt)` is omitted or if components are not locally imported in a `script setup` context.","error":"[Vue warn]: Failed to resolve component: g-gantt-chart"},{"fix":"Install all peer dependencies listed in the `dependencies` section using your package manager (e.g., `npm install @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome dayjs vue`).","cause":"Hyper Vue Gantt lists several peer dependencies that must be explicitly installed by the consumer project, but one or more are missing.","error":"Error: Peer dependency \"@fortawesome/vue-fontawesome\" is not installed."}],"ecosystem":"npm"}