Create Responsive Historic Timelines With Vueye Timeline

Install & Download:

# NPM
$ npm i vueye-timeline --save

Description:

Vueye Timeline is a simple-to-use Vue component to render a responsive historic timeline on the app.

How to use it:

1. Import the component.

import VueyeTimeline from "VueyeTimeline";

2. Add the timeline component to the template.

<template>
  <div id="app">
    <VueyeTimeline :items="items">
      <template v-slot:content="{item}">
        <h2>{{item.title}}</h2>
        <div>{{item.body}}</div>
      </template>
      <template v-slot:opposite="{item}">
        <h1 :style="{color:item.styleConfig.background}">{{item.year}}</h1>
      </template>
    </VueyeTimeline>
  </div>
</template>

3. Add items to the timeline.

export default {
  name: "App",
  data: () => ({
    items: [
      {
        title: "Item 1",
        body: "Event 1",
        year: 2010,
        styleConfig: {
          background: "#222",
          color: "#fff",
          dotColor: "#ff0000"
        }
      },
      {
        title: "Item 2",
        body: "Event 2",
        year: 2012,
        styleConfig: {
          background: "#222",
          color: "#fff",
          dotColor: "#ff0000"
        }
      },
      {
        title: "Item 3",
        body: "Event 3",
        year: 2016,
        styleConfig: {
          background: "#222",
          color: "#fff",
          dotColor: "#ff0000"
        }
      },
      // ...
    ]
  }),
  methods: {},
  components: {
    VueyeTimeline
  }
};