Responsive Vertical Timeline Component - vuetimeline

Install & Download:

# Yarn
$ yarn add @growthbunker/vuetimeline
# NPM
$ npm install @growthbunker/vuetimeline --save

Description:

A simple Vue.js component to generate a responsive, vertical, configurable, animated timeline on the web application.

How to use it:

1. Import and register the vuetimeline in your project.

import Vue from "vue";
import vuetimeline from "@growthbunker/vuetimeline";
Vue.use(vuetimeline);

2. Add your own events to the timeline.

<pre><template>
<vue-timeline-update
:date="new Date('2019-11-12')"
title="Event 1 Title"
description="Event 1 Description"
thumbnail="1.jpg"
category="vue"
icon="vue"
color="red"
/>
<vue-timeline-update
:date="new Date('2019-10-12')"
title="Event 2 Title"
description="Event 2 Description"
thumbnail="2.jpg"
category="js"
icon="js"
color="blue"
/>
<vue-timeline-update
:date="new Date('2019-09-12')"
title="Event 3 Title"
description="Event 3 Description"
thumbnail="3.jpg"
category="css"
icon="css"
color="white"
is-last
/>
</template></pre>

3. Available props to config the timeline & events.

animation: {
  type: Boolean,
  default: true
},
animationContainer: {
  type: String,
  default: null
},
animationDuration: {
  type: Number,
  default: 1500
},
category: {
  type: String,
  default: null
},
color: {
  type: String,
  default: "blue",
  validator(x) {
    return [
      "black",
      "blue",
      "green",
      "orange",
      "purple",
      "red",
      "turquoise",
      "white"
    ].includes(x);
  }
},
date: {
  type: Date,
  required: true
},
description: {
  type: String,
  required: true
},
icon: {
  type: String,
  required: true
},
isLast: {
  type: Boolean,
  default: false
},
thumbnail: {
  type: String,
  default: null
},
title: {
  type: String,
  required: true
}

4. Event handlers.