Cute Timeline Component For Vue.js

An easy yet customizable timeline component for Vue.js applications.

How to use it:

1. Import necessary components.

import { Timeline, TimelineItem, TimelineTitle } from 'vue-cute-timeline'
import 'vue-cute-timeline/dist/index.css'
export default {
  components: {
    Timeline,
    TimelineItem,
    TimelineTitle
  }
}

2. Add events to the timeline component.

<template>
  <timeline>
    <timeline-title>Title</timeline-title>
    <timeline-item bg-color="#9dd8e0">Item 1</timeline-item>
    <timeline-item :hollow="true">Item 22</timeline-item>
  </timeline>
</template>

3. Available props for the Timeline component.

timelineTheme: {
  type: String,
  default: '#dbdde0'
},
timelineBg: {
  type: String,
  default: '#fff',
}

4. Available props for the TimelineItem component.

bgColor: {
  type: String,
  default: ''
},
lineColor: {
  type: String,
  default: ''
},
hollow: {
  type: Boolean,
  default: false
},
iconSize: {
  type: String,
  default: ''
},
fontColor: {
  type: String,
  default: '#37414a'
},

Preview:

Download Details:

Author: luyilin

Live Demo: https://vue-cute-timeline.netlify.app/

Download Link: https://github.com/luyilin/vue-cute-timeline/archive/refs/heads/master.zip

Official Website: https://github.com/luyilin/vue-cute-timeline

Install & Download:

# Yarn
$ yarn add vue-cute-timeline

# NPM
$ npm i vue-cute-timeline