Beautiful Responsive Timeline Component For Vue.js

Install & Download:

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

Description:

An easy, responsive, beautiful, customizable timeline component to showcase any events on the web app.

Available as a Vue.js component or a Nuxt.js plugin.

Basic usage:

1. Import the timeline component after installation.

import vuetimeline from "@growthbunker/vuetimeline";

module.exports = {
  // or as a Nuxt.js Plugin
  plugins: [{ src: "@/plugins/vuetimeline.js" }];
}

2. Register the component.

Vue.use(vuetimeline)

3. Add as many events to the timeline as follows:

<template>
  <vue-timeline-update
    :date="new Date('2020-07-01')"
    title="Timeline Event Title 1"
    description="Timeline Event Description 1"
    thumbnail="1.jpg"
    category="vue"
    icon="code" // custom icon
    color="red" // custom title color
  />
  <vue-timeline-update
    :date="new Date('2020-06-01')"
    title="Timeline Event Title 2"
    description="Timeline Event Description 2"
    thumbnail="2.jpg"
    category="script"
    icon="code" // custom icon
    color="yellow" // custom title color
  />
  <vue-timeline-update
    :date="new Date('2020-05-01')"
    title="Timeline Event Title 3"
    description="Timeline Event Description 3"
    thumbnail="3.jpg"
    category="com"
    icon="code" // custom icon
    color="black" // custom title color
  />
  ... more events here ...
</template>

Default props.

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
},
dateString: {
  type: String,
  default: null
},
description: {
  type: String,
  default: null
},
icon: {
  type: String,
  required: true
},
isLast: {
  type: Boolean,
  default: false
},
thumbnail: {
  type: String,
  default: null
},
title: {
  type: String,
  required: true
}