Composables
useXKanban
Manages kanban board state including columns, cards, and drag-and-drop handlers.
useXKanban
Encapsulates the full state machine for a drag-and-drop kanban board. Provide an initial columns definition and receive reactive column/card state plus mutation helpers. The XAKanban, XAKanbanColumn, and XAKanbanCard components all consume this composable internally, but you can also call it directly when you need custom board logic.
Usage
const {
columns,
addCard,
removeCard,
moveCard,
updateCard,
addColumn,
removeColumn,
onDragStart,
onDrop,
} = useXKanban({ columns: initialColumns })
Returns
| Key | Type | Description |
|---|---|---|
columns | Ref<KanbanColumn[]> | Reactive array of columns, each containing a cards array. |
addCard | (columnId: string, card: KanbanCard) => void | Appends a card to the specified column. |
removeCard | (columnId: string, cardId: string) => void | Removes a card from a column by ID. |
moveCard | (cardId: string, fromColumnId: string, toColumnId: string, toIndex?: number) => void | Moves a card between columns, optionally at a specific index. |
updateCard | (columnId: string, cardId: string, patch: Partial<KanbanCard>) => void | Merges a patch into an existing card. |
addColumn | (column: KanbanColumn) => void | Adds a new column to the board. |
removeColumn | (columnId: string) => void | Removes a column and all its cards. |
onDragStart | (event: DragEvent, cardId: string, columnId: string) => void | Drag-start handler to attach to card elements. |
onDrop | (event: DragEvent, targetColumnId: string, targetIndex?: number) => void | Drop handler that calls moveCard with the dragged card's IDs. |
Example
const initialColumns: KanbanColumn[] = [
{ id: "todo", label: "To Do", cards: [] },
{ id: "in-progress", label: "In Progress", cards: [] },
{ id: "done", label: "Done", cards: [] },
]
const { columns, addCard, moveCard } = useXKanban({ columns: initialColumns })
// Seed cards from API
const { items } = useXCrud("/api/tasks")
watch(items, (tasks) => {
tasks.forEach((task) =>
addCard(task.status, { id: task.id, title: task.name, data: task })
)
})
AI Context
composable: useXKanban
package: "@xenterprises/nuxt-x-app"
use-when: >
Building any drag-and-drop kanban or pipeline view — task boards, CRM deal
stages, approval queues. Pass initialColumns and wire the drag handlers to
the board elements, or let XAKanban handle the wiring automatically.
pairs-with: XAKanban, XAKanbanColumn, XAKanbanCard