vue-svelte-gantt

Vue 3 wrapper for svelte-gantt — a lightweight, high-performance interactive Gantt chart / resource booking component.

Live Demo: https://gcasotti.github.io/vue-svelte-gantt

Repository: https://github.com/gcasotti/vue-svelte-gantt

No Svelte build tooling required. This package uses the pre-compiled svelte-gantt bundle via its imperative API.

Installation

npm install vue-svelte-gantt svelte-gantt

Basic Usage

<script setup lang="ts">
import { ref } from 'vue';
import { SvelteGanttChart } from 'vue-svelte-gantt';

const from = ref(new Date(2025, 0, 1).valueOf());
const to = ref(new Date(2025, 0, 8).valueOf());

const rows = ref([
  { id: 1, label: 'Row 1' },
  { id: 2, label: 'Row 2' },
]);

const tasks = ref([
  {
    id: 1,
    resourceId: 1,
    label: 'Task 1',
    from: new Date(2025, 0, 1, 8).valueOf(),
    to: new Date(2025, 0, 1, 16).valueOf(),
  },
  {
    id: 2,
    resourceId: 2,
    label: 'Task 2',
    from: new Date(2025, 0, 2, 10).valueOf(),
    to: new Date(2025, 0, 3, 12).valueOf(),
  },
]);
</script>

<template>
  <SvelteGanttChart
    :rows="rows"
    :tasks="tasks"
    :from="from"
    :to="to"
    :row-height="52"
    :headers="[
      { unit: 'day', format: 'MMMM Do' },
      { unit: 'hour', format: 'H:mm' },
    ]"
    @tasks-select="(task) => console.log('Selected:', task)"
    @tasks-changed="(e) => console.log('Changed:', e)"
  />
</template>

Usage with Dependencies Module

<script setup lang="ts">
import { ref } from 'vue';
import {
  SvelteGanttChart,
  SvelteGanttTable,
  SvelteGanttDependencies,
} from 'vue-svelte-gantt';

const from = ref(new Date(2025, 0, 1).valueOf());
const to = ref(new Date(2025, 0, 8).valueOf());

const rows = ref([
  { id: 1, label: 'Planning' },
  { id: 2, label: 'Development' },
  { id: 3, label: 'Testing' },
]);

const tasks = ref([
  {
    id: 1,
    resourceId: 1,
    label: 'Design',
    from: new Date(2025, 0, 1, 8).valueOf(),
    to: new Date(2025, 0, 2, 17).valueOf(),
  },
  {
    id: 2,
    resourceId: 2,
    label: 'Implement',
    from: new Date(2025, 0, 3, 8).valueOf(),
    to: new Date(2025, 0, 5, 17).valueOf(),
  },
  {
    id: 3,
    resourceId: 3,
    label: 'QA',
    from: new Date(2025, 0, 6, 8).valueOf(),
    to: new Date(2025, 0, 7, 17).valueOf(),
  },
]);

const dependencies = ref([
  { id: 1, fromId: 1, toId: 2 },
  { id: 2, fromId: 2, toId: 3 },
]);

const ganttRef = ref<InstanceType<typeof SvelteGanttChart> | null>(null);

function scrollToFirstTask() {
  ganttRef.value?.scrollToTask(1, 'smooth');
}
</script>

<template>
  <button @click="scrollToFirstTask">Scroll to Task 1</button>
  <SvelteGanttChart
    ref="ganttRef"
    :rows="rows"
    :tasks="tasks"
    :from="from"
    :to="to"
    :gantt-table-modules="[SvelteGanttTable]"
    :gantt-body-modules="[SvelteGanttDependencies]"
    :table-width="200"
    :dependencies="dependencies"
    :row-height="52"
    :headers="[
      { unit: 'day', format: 'ddd D MMM' },
      { unit: 'hour', format: 'HH' },
    ]"
    @tasks-changed="(e) => console.log('Task changed:', e)"
    @tasks-dblclicked="(task, event) => console.log('Double clicked:', task)"
  />
</template>

Props

Events

Exposed Methods

Access these via a template ref:

const ganttRef = ref<InstanceType<typeof SvelteGanttChart>>();

// Then use:
ganttRef.value?.updateTask(taskModel);
ganttRef.value?.scrollToTask(taskId, 'smooth');

Re-exported Modules

These are re-exported from svelte-gantt for convenience:

import {
  SvelteGanttTable,
  SvelteGanttDependencies,
  SvelteGanttExternal,
  MomentSvelteGanttDateAdapter,
} from 'vue-svelte-gantt';

How It Works

This wrapper uses the imperative Svelte API (new SvelteGantt(), $set(), $destroy()) to mount the pre-compiled svelte-gantt bundle inside a Vue component. All reactive props are deep-unwrapped with toRaw() before being passed to Svelte to avoid Vue Proxy incompatibilities.

License

MIT