Create Responsive Timeline Component-Based On Vue.js

Vueye Timeline is a great and responsive Vue.js component that is used to show selected items in the timeline.

animated vertical timeline, responsive vertical timeline, vertical timeline website, vertical timeline html template, vertical timeline examples

How to make use of it:

Install and download:

# NPM
$ npm i vueye-timeline --save

1. Import the component.

import VueyeTimeline from "VueyeTimeline";

2. Add the timeline element 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
  }
};

create responsive historic timeline, Vueye Timeline Plugin/Github


See Demo And Download

Official Website(boussadjra): Click Here

This superior jQuery/javascript plugin is developed by boussadjra. For extra advanced usage, please go to the official website.

Share