Add a Timeline to a Vue App
Tags: vue, programming, webdev, javascript
Published: 2021-01-20 03:06:50

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


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.