Timeline

A simple vue timeline. Perfect for displaying a sequence of events in chronological order.

GitHub

Demo

Default

Production deployed

Today 9:00 AM

Code review approved

Today 8:30 AM

Pull request opened

Yesterday 4:15 PM

Feature branch created

Yesterday 2:00 PM

Alternating

Items are displayed on alternating sides of the Timeline.

Production deployed

Today 9:00 AM

Code review approved

Today 8:30 AM

Pull request opened

Yesterday 4:15 PM

Feature branch created

Yesterday 2:00 PM

Opposite content

In the opposite layout, a second content area is present on the opposite side of the Timeline.

Today 9:00 AM

Production deployed

Today 8:30 AM

Code review approved

Yesterday 4:15 PM

Pull request opened

Yesterday 2:00 PM

Feature branch created

Custom media

The item marker can also be replaced with another icon, image, or avatar.

Production deployed

Today 9:00 AM

Code review approved

Today 8:30 AM

Pull request opened

Yesterday 4:15 PM

Feature branch created

Yesterday 2:00 PM

Install

npm i @vuesimple/vs-timeline

Usage

<template>
  <vs-timeline>
    <vs-timeline-item>
      <strong>Planted seed</strong>
      <div>Today 9:00 AM</div>
    </vs-timeline-item>
    <vs-timeline-item>
      <strong>Purchased seed</strong>
      <div>Feb 08, 9:05 AM</div>
    </vs-timeline-item>
  </vs-timeline>
</template>

<script>
  import { VsTimeline, VsTimelineItem } from '@vuesimple/vs-timeline';

  export default {
    components: {
      VsTimeline,
      VsTimelineItem,
    },
  };
</script>

CDN

<script src="https://cdn.jsdelivr.net/npm/@vuesimple/vs-timeline@3.1.6/dist/index.min.js"></script>

// Main/Entry file
app.use(VsTimeline.plugin);

<template>
  <vs-timeline>
    <vs-timeline-item>
      <strong>Event title</strong>
    </vs-timeline-item>
  </vs-timeline>
</template>

Props

VsTimeline

Name	Type	Default	Options	Description
layout	String	left	left, alternating, opposite	Controls the layout of timeline items

VsTimelineItem

VsTimelineItem has no props. All content is provided via slots.

Slots

VsTimelineItem

Name	Description
default	Primary content for the item (title, description, etc.)
opposite	Secondary content shown on the opposite side (used with alternating and opposite layouts)
media	Replaces the default dot marker — use an icon, image, or avatar

Theming (CSS variables)

Variable	Default	Description
--vs-timeline-dot-size	10px	Diameter of the dot marker
--vs-timeline-dot-bg	#ffffff	Background color of the dot
--vs-timeline-dot-border	#87929d	Border color of the dot
--vs-timeline-line-color	#d8dcde	Color of the connecting line
--vs-timeline-content-gap	16px	Gap between separator and content
--vs-timeline-media-size	20px	Width/height of the media slot area

Examples

Default (left-aligned)

<vs-timeline>
  <vs-timeline-item>
    <strong>Planted seed</strong>
    <div>Today 9:00 AM</div>
  </vs-timeline-item>
  <vs-timeline-item>
    <strong>Purchased seed</strong>
    <div>Feb 08, 9:05 AM</div>
  </vs-timeline-item>
</vs-timeline>

Alternating

<vs-timeline layout="alternating">
  <vs-timeline-item>
    <strong>Planted seed</strong>
    <template #opposite>Today 9:00 AM</template>
  </vs-timeline-item>
  <vs-timeline-item>
    <strong>Purchased seed</strong>
    <template #opposite>Feb 08, 9:05 AM</template>
  </vs-timeline-item>
</vs-timeline>

Opposite content

<vs-timeline layout="opposite">
  <vs-timeline-item>
    <strong>Planted seed</strong>
    <template #opposite>Today 9:00 AM</template>
  </vs-timeline-item>
</vs-timeline>

Custom media (icon)

<vs-timeline>
  <vs-timeline-item>
    <strong>Planted seed</strong>
    <template #media>
      <svg ...>...</svg>
    </template>
  </vs-timeline-item>
</vs-timeline>