Add a Timeline Chart to a Vue App

We can add a timeline chart to a Vue app with the vue-cute-timeline package.

vue-cute-timeline is a timeline component that we can use with Vue apps.

It displays a vertical timeline on our screen.

To install it, we run:

npm i vue-cute-timeline

Then we can use it by writing:

<template>
  <div id="app">
    <timeline>
      <timeline-title>title</timeline-title>
      <timeline-item bg-color="#9dd8e0">foo</timeline-item>
      <timeline-item :hollow="true">bar</timeline-item>
    </timeline>
  </div>
</template>
 
<script>
import { Timeline, TimelineItem, TimelineTitle } from "vue-cute-timeline";
export default {
  components: {
    Timeline,
    TimelineItem,
    TimelineTitle
  }
};
</script>

We just import the timeline components.

Then we get a vertical timeline with the content between the tags.

bg-color has a background color.

hollow makes the dot hollow.

vue-cute-timeline lets us add a timeline to our app easily.