v-timeline is useful for stylistically displaying chronological information.
Switch between a horizontal and vertical timeline in real-time using the direction prop.
Use the side property to force all items to one side of the timeline.
v-timeline-item content is vertically aligned
center. The align prop also supports
Colored dots create visual breakpoints that make your timelines easier for users to read.
Use icons within the
v-timeline-item dot to provide additional context.
The size prop allows you to customize the size of each dot.
Truncate the start, end or both ends of the timeline center line by using the truncate-line prop.
Modify the inset of dividing lines by specifying a custom amount using the line-inset prop.
Insert avatars into dots with use of the
icon slot and
The opposite slot provides an additional layer of customization within your timelines.