Getting Started

Install the Vue 3 wrapper and render your first timeline component.

Install

$ npm install @tempis/vue @tempis/timeline

@tempis/timeline is a peer dependency of @tempis/vue and must be installed alongside it.

What's Included

The @tempis/vue package provides:

The <TempisTimeline> component — a Vue 3 wrapper around the core library.
The TempisTimelineExposed type — for accessing imperative methods via a template ref.
Re-exports of all core types (TempisTimelineItem, TempisTimelineCategory, etc.) so you don't need to import from @tempis/timeline directly.

The Vue component handles destroy() automatically on unmount — you don't need to manage cleanup.

Minimal Example

<script setup lang="ts">
import { TempisTimeline } from '@tempis/vue'

const items = [
  { id: 1, label: 'Item 1', start: '2026-01-05', end: '2026-01-15', grouping: 'Group 1' },
  { id: 2, label: 'Item 2', start: '2026-01-12', end: '2026-01-28', grouping: 'Group 1' },
  { id: 3, label: 'Event 1', start: '2026-01-30', grouping: 'Group 1' },
  { id: 4, label: 'Item 3', start: '2026-01-08', end: '2026-01-25', grouping: 'Group 2' },
]
</script>

<template>
  <TempisTimeline
    :items="items"
    :options="{ responsive: true, range: { start: '2026-01-01', end: '2026-02-01', position: 'bottom' } }"
    :height="400"
  />
</template>

When using responsive: true, the component's wrapper must be inside a container with explicit dimensions. The timeline resizes to fill its parent — if the parent has no width or height, the canvas will collapse to zero.