Simple Vertical Timeline Component For Vue.js

Timeline Vuejs is a simplified timeline component of the Vue.js application.

horizontal timeline codesandbox, animated vertical timeline, horizontal timeline js, simple horizontal timeline, creative timeline ideas

Simple Horizontal Timeline Component with Vue.js

Table of Contents

How to make use of it:

Install

npm install timeline-vuejs --save

// main.js
import '../node_modules/timeline-vuejs/dist/timeline-vuejs.css'

// component.vue
<script>
  import Timeline from 'timeline-vuejs'

  export default {
    // ...
    components: {
      Timeline
    }
    // ...
  }
</script>

Usage

<template>
  <Timeline
    :timeline-items="timelineItems"
    :message-when-no-items="messageWhenNoItems"/>
</template>

<script>
import Timeline from 'timeline-vuejs'

export default {
  components: {
    Timeline
  }
  data: () => ({
    messageWhenNoItems: 'There are not items',
    timelineItems: [
      {
        from: new Date(2018, 7),
        title: 'Name',
        description:
          'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius earum architecto dolor, vitae magnam voluptate accusantium assumenda numquam error mollitia, officia facere consequuntur reprehenderit cum voluptates, ea tempore beatae unde.'
      },
      {
        from: new Date(2016, 1),
        title: 'Name',
        description:
          'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius earum architecto dolor, vitae magnam voluptate accusantium assumenda numquam error mollitia, officia facere consequuntur reprehenderit cum voluptates, ea tempore beatae unde.'
      },
      {
        from: new Date(2016, 6),
        title: 'Name',
        description:
          'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius earum architecto dolor, vitae magnam voluptate accusantium assumenda numquam error mollitia, officia facere consequuntur reprehenderit cum voluptates, ea tempore beatae unde.'
      },
      {
        from: new Date(2012, 1),
        title: 'Name',
        description:
          'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius earum architecto dolor, vitae magnam voluptate accusantium assumenda numquam error mollitia, officia facere consequuntur reprehenderit cum voluptates, ea tempore beatae unde.'
      }
    ]
  })
}
</script>

Available props

Props	Type	Default	Description
timelineItems	Array	[ ]	Items value of the timeline
messageWhenNoItems	String		Message when there are no items
colorDots	String	#2da1bf	Color of the dots
uniqueTimeline	Boolean	false	If true, the timeline isn’t separated
uniqueYear	Boolean	false	If true, the timeline isn’t separated when is the same year
order	String (desc or asc)		Type of order
dateLocale	String	Locale of the browser	Type of locale, for example ‘en-US’