Simple and clean horizontal timeline component for Vue.js

Category: Vue.js VueJS Date & Time | August 18, 2021
Author: guastallaigor
Official Page: Go to website
Last Update: August 18, 2021
License: MIT

vue horizontal timeline

Description:

Are you searching for horizontal timeline component for Vue.js? If yes, then you are at the right place. Here we are sharing with you a component, which is simple to use and lightweight in the size, will help you in creating horizontal timeline for your project.

How to install and use it?

Installation and usage are very simple. You just need to follow the below instructions.

1. Install the component in your project with npm or yarn.

#npm
npm install vue-horizontal-timeline --save

#yarn
yarn add vue-horizontal-timeline

2. Import the required components in you file.

import Vue from "vue";
import VueHorizontalTimeline from "vue-horizontal-timeline";

3. Register the component.

Vue.use(VueHorizontalTimeline);

4. Usage.

<template>
  <div id="app"><vue-horizontal-timeline :items="items" /></div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    items: [
      {
        title: "1939",
        content:
          "Content 1"
      },
      {
        title: "1945",
        content:
          "Content 2"
      },
      {
        title: "1947",
        content:
          "Content 3"
      },
      {
        title: "1954",
        content:
          "Content 4"
      }
    ]
  })
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>