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()Architecture
createTimeline extends createRegistry with bounded history and overflow management:
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 |
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.
Examples
FAQ
The oldest entry moves to an internal overflow buffer. It’s still reachable via undo(), but it no longer counts against the size limit — so the active timeline stays a fixed size while older history remains recoverable.
Both extend createRegistry, but for opposite jobs. createTimeline is bounded undo/redo history with a cursor and overflow buffer. createQueue is a time-based FIFO with auto-timeout and pause/resume. Use timeline for time-travel, queue for auto-dismissing sequential items.
createTimeline inherits createRegistry’s minimal reactivity. Wrap it with useProxyRegistry(timeline) for full template reactivity on the active timeline.
The redo stack is internal to the timeline and isn’t exposed as a reactive property. Track it yourself with a shallowRef — the canvas example keeps a redoStackSize ref in sync as the user undoes and redoes, then drives the Redo button’s state from it.