Vue3 Timeline

Vue3 Timeline visualizes a series of chained events. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import Timeline from 'primevue/timeline';

Getting Started

Timeline receives the events with the value property as a collection of arbitrary objects. In addition, content template is required to display the representation of an event. Example below is a sample events array that is used throughout the documentation.

export default {
    data() {
        return {
            events: [
                {status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg'},
                {status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7'},
                {status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800'},
                {status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B'}
            ],
            events2: [
                "2020", "2021", "2022", "2023"
            ]
        }
    }
}

<Timeline :value="events">
    <template #content="slotProps">
        {{slotProps.item.status}}
    </template>
</Timeline>

Layout

Default layout of the timeline is vertical, setting layout to "horizontal" displays the items horizontally.

<Timeline :value="events" layout="horizontal">
    <template #content="slotProps">
        {{slotProps.item.status}}
    </template>
</Timeline>

Alignment

Location of the timeline bar is defined using the align property.

<Timeline :value="events" align="right">
    <template #content="slotProps">
        {{slotProps.item.status}}
    </template>
</Timeline>

In addition, the "alternate" alignment option make the contents take turns around the timeline bar.

<Timeline :value="events" align="alternate">
    <template #content="slotProps">
        {{slotProps.item.status}}
    </template>
</Timeline>

Opposite

Content to be placed at the other side of the bar is defined with the opposite template.

<Timeline :value="events">
    <template #opposite="slotProps">
        <small class="p-text-secondary">{{slotProps.item.date}}</small>
    </template>
    <template #content="slotProps">
        {{slotProps.item.status}}
    </template>
</Timeline>

Custom Markers

marker template allows placing a custom event marker instead of the default one. Below is an example with custom markers and content.

<Timeline :value="events" align="alternate" class="customized-timeline">
    <template #marker="slotProps">
        <span class="custom-marker p-shadow-2" :style="{backgroundColor: slotProps.item.color}">
            <i :class="slotProps.item.icon"></i>
        </span>
    </template>
    <template #content="slotProps">
        <Card>
            <template #title>
                {{slotProps.item.status}}
            </template>
            <template #subtitle>
                {{slotProps.item.date}}
            </template>
            <template #content>
                <img v-if="slotProps.item.image" :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="p-shadow-2" />
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
                    quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
                <Button label="Read more" class="p-button-text"></Button>
            </template>
        </Card>
    </template>
</Timeline>

Theming

Timeline supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue Timeline showcase for demos and documentation.