A cute timeline component for Vue.js


A cute timeline component for Vue.js.


yarn add vue-cute-timeline --save


    <timeline-item bg-color="#9dd8e0">item1</timeline-item>
    <timeline-item :hollow="true">item2</timeline-item>

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

export default {
  components: {


<timeline> props

It will be better to use hyphenated attributes instead of camelcase attributes. The discussion explained why.

  • timeline-theme

    The theme color of the timeline component.

    Set the line’s and circle’s color.

    Type: string
    Default: #dbdde0
  • timeline-bg

    The background color of the timeline circle component (for hollow and others if needed).

    Set the hollow circle’s and other timeline symbol’s default background color.

    Type: string
    Default: #dbdde0

<timeline-item> / <timeline-title> props

  • bg-color

    Set the circle’s and the circle’s border color.

    Type: string
    Default: #dbdde0
  • line-color

    Set only the circle’s border color.

    Type: string
    Default: #dbdde0
  • hollow

    Control whether the circle is hollow or not.
    _Note** When hollow cannot be used together with bg-color, unless you wish to change the hollow background color.

    Type: boolean
    Default: false
  • font-color

    Set the timeline item or title font color.
    Or you can set font color by add a className, as the content of the timeline item/title is a slot.

    Type: string
    Default: #37414a
  • icon-size

    Set the timeline item or title icon size.
    Control the size of the circle or of the image set using slots="others".

    Type: string ('small'| 'medium'|'large')
    Default: ''


  • others

    Don’t like the circle? You can set it to a image, iconfont or anything you want.



MIT © luyilin

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

Kerala Planning for 5G, Might Increase Mobile Towers for Better Experience

Investor Database from Mercury — Find top seed investors and get the info you need to raise