createTimeline
Bounded undo/redo history built on createRegistry with a configurable size limit.
Usage
The createTimeline composable extends createRegistry to provide undo/redo functionality with a bounded history. When the timeline reaches its size limit, older items are moved to an overflow buffer, allowing you to undo back to them while maintaining a fixed active timeline size.
import { createTimeline } from '@vuetify/v0'
const timeline = createTimeline({ size: 10 })
// Register actions
timeline.register({ id: 'action-1', value: 'Created document' })
timeline.register({ id: 'action-2', value: 'Added title' })
timeline.register({ id: 'action-3', value: 'Added paragraph' })
console.log(timeline.size) // 3
// Undo the last action
timeline.undo()
console.log(timeline.size) // 2
// Redo the undone action
timeline.redo()
console.log(timeline.size) // 3Context / DI
Use createTimelineContext to share a timeline instance across a component tree:
import { createTimelineContext } from '@vuetify/v0'
export const [useHistory, provideHistory, history] =
createTimelineContext({ namespace: 'my:history', size: 50 })
// In parent component
provideHistory()
// In child component
const timeline = useHistory()
timeline.register({ id: 'action-1', value: 'Created item' })
timeline.undo()Options
| Option | Type | Default | Notes |
|---|---|---|---|
size | number | 10 | Maximum number of entries in the active timeline. When exceeded, the oldest entry moves to an internal overflow buffer — it remains accessible via undo() but no longer counts against the limit |
Architecture
createTimeline extends createRegistry with bounded history and overflow management:
Reactivity
createTimeline uses minimal reactivity like its parent createRegistry. History state is managed internally without reactive primitives.
Need reactive history? Wrap with useProxyRegistry(timeline) for full template reactivity on the active timeline.