Kanban
KanbanCard
Draggable Kanban card showing title, description, assignee, due date, priority, and tags.
Kanban
The Kanban category provides a complete board UI with drag-and-drop between columns, responsive mobile column switching, and optional deep integration with useXCrud for automatic data management. Cards are fully customizable via slots.
Components
<XAKanbanCard />
A draggable card article. Default slot renders title, description, priority icon, tags, assignee, and due date from the item object. Accepts a default slot for fully custom content.
<XAKanbanCard
:item="task"
:draggable="true"
:show-avatar="true"
:show-due-date="true"
:show-priority="true"
:show-tags="true"
:show-assignee="true"
:compact="false"
:allow-delete="false"
@click="openTask"
@delete="deleteTask"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
item | Object | required | Item data object |
draggable | Boolean | true | Enable HTML drag API |
showAvatar | Boolean | true | Show assignee avatar |
showDueDate | Boolean | true | Show due date |
showPriority | Boolean | true | Show priority icon |
showTags | Boolean | true | Show tag badges |
showAssignee | Boolean | true | Show assignee name |
compact | Boolean | false | Compact padding and truncated description |
allowDelete | Boolean | false | Show delete button on hover |
Emits
click, delete, dragstart, dragend
Expected item shape:
{
id: string | number
title: string
description?: string
priority?: 'high' | 'medium' | 'low'
tags?: string[]
dueDate?: string | Date
assignee?: { name: string, avatar?: string }
[groupByKey]: string | number // e.g., columnId or status
}
Slots
| Slot | Props | Description |
|---|---|---|
default | { item, isDragging } | Replace the entire card body |
actions | { item } | Replace the hover actions area |
AI Context
component: XAKanbanCard
package: "@xenterprises/nuxt-x-app"
category: Kanban
use-when: >
Rarely used directly — XAKanbanColumn renders XAKanbanCard automatically.
Use the card slot on XAKanban for fully custom card rendering instead.
Use standalone only when building a completely custom board layout.
item-shape: "{ id, title, description?, priority?, tags?, dueDate?, assignee?, [groupByKey] }"