Add a Timeline to a Vue App

We can add a timeline to a Vue app with premade components.

In this article, we’ll look at how to add a timeline with these components.

Vue Horizontal Timeline

The Vue Horizontal Timeline package is an easy to use package to let us add an outline to our Vue app.

To install it, we run:

npm i vue-horizontal-timeline

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueHorizontalTimeline from "vue-horizontal-timeline";

Vue.use(VueHorizontalTimeline);
Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App)
}).$mount("#app");

App.vue

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

<script>
export default {
  data() {
    const example1 = {
      title: "Title example 1",
      content: "Lorem ipsum dolor sit amet."
    };
    const example2 = {
      title: "Title example 2",
      content: "Lorem ipsum dolor sit amet."
    };
    const example3 = {
      title: "Title example 3",
      content: "Lorem ipsum dolor sit amet."
    };
    const items = [example1, example2, example3];

    return { items };
  }
};
</script>

We register the VueHorizontalTimeline in main.js .

Then in App.vue , we add the vue-horizontal-timeline component to add the timeline.

The items prop has the items. Each entry has the title and content properties to display the title and content.

items-selected has the object that’s set when it’s clicked.

item-unique-key has the key.

title-attr has the property name of the title.

title-centered lets us set whether to center the title.

title-substr lets us set the subtitle for the title.

We can replace title with content and set the content.

min-width has the min-width of the timeline.

min-height has the min-height of the timeline.

timeline-padding has the timeline padding.

timeline-background has the background of the timeline.

line-color has the timeline line’s color.

clickable makes the card clickable that returns the object.

vue-cute-timeline

Another library to add a timeline to a Vue app is the vue-cute-timeline library.

To install it, we run:

yarn add vue-cute-timeline --save

Then we can use it by using the timeline , timeline-title and timeline-item components.

For example, we can write:

<template>
  <timeline>
    <timeline-title>title</timeline-title>
    <timeline-item bg-color="#9dd8e0">item1</timeline-item>
    <timeline-item :hollow="true">item2</timeline-item>
  </timeline>
</template>

<script>
import { Timeline, TimelineItem, TimelineTitle } from "vue-cute-timeline";

export default {
  components: {
    Timeline,
    TimelineItem,
    TimelineTitle
  }
};
</script>

We set the bg-color to set the background color of the dot.

hollow makes the dot hollow.

We’ll see the vertical timeline.

The others slot of timeline-item can be used to replace the circle with our own image.

For example, we can write:

<template>
  <timeline>
    <timeline-title>title</timeline-title>
    <timeline-item bg-color="#9dd8e0">
      <img
        src="https://i.picsum.photos/id/23/10/10.jpg?hmac=vbsZXumVCKRVT_EpOvXvctEtIRS_NFCzkmygpuP_QDk"
        slot="others"
      >
      item1
    </timeline-item>
    <timeline-item :hollow="true">item2</timeline-item>
  </timeline>
</template>

<script>
import { Timeline, TimelineItem, TimelineTitle } from "vue-cute-timeline";

export default {
  components: {
    Timeline,
    TimelineItem,
    TimelineTitle
  }
};
</script>

to add the image inside the dot.

Conclusion

We can add the Vue Horizontal Timeline or vue-cute-timeline package to add timelines to a Vue app.