TaskBoard - State Serialization
Save and restore TaskBoard UI state without persisting transient DOM details.
#Usage
import { TaskBoard } from '@primeui/vue-taskboard';<TaskBoard.Root ref="board" v-model:tasks="tasks" data-key="id" column-field="columnId" selection-mode="multiple" :column-collapsible="true">
<!-- TaskBoard parts -->
</TaskBoard.Root>Use serializeState and restoreState on the root ref to save TaskBoard UI state such as collapsed ids, selected ids, and focused card id. Keep card data writable with v-model:tasks when the board should support drag and drop, then persist that app data next to the TaskBoard UI snapshot.
#Serialized Fields
| Field | Stored |
|---|---|
collapsedColumnIds, collapsedSwimlaneIds | Layout state. |
selectedCardIds | Selection state. |
focusedCardId | Last focused card id. |
timestamp | Save time in ms. |
restoreState applies any fields present in the snapshot. Partial snapshots are useful for saved views that restore only collapsed columns, selected ids, or focus without touching the rest of the board.
#Persistence Boundary
Serialized TaskBoard state is UI state. Persist item data, query controls, permissions, and workflow rules in the application layer.
#Restore Notes
The snapshot does not include columns, tasks, swimlanes, query state, access rules, or workflow rules. Store those inputs in the application layer and restore them before applying the UI snapshot.
If your product has saved views, keep search, filters, sort, route params, and task data in your own saved-view object. Apply that app state first, pass the resulting writable board data to TaskBoard, then restore the board UI snapshot.
#Saved Board Snapshot
The serialization sample saves a small app snapshot with two layers: writable task data and TaskBoard UI state. Move cards, collapse a column, or select cards, then save a snapshot. Restore brings back the card positions from app data and the collapsed, selected, and focused state from restoreState.
After restore, the sample scrolls to the first restored card so the recovered board state is visible even when the changed card was outside the current viewport.