Vue Simple Timeline

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

A light weight vue plugin built groundup.

Demo

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@<version>/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>

VsTimeline Props

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

VsTimelineItem Props

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

VsTimelineItem Slots

| 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 |

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>