TaskBoard - Setup

#Installation

Install the Vue TaskBoard package.

npm install @primeui/vue-taskboard

#Dependencies

@primeui/vue-taskboard is the only package to install. It brings the TaskBoard runtime helpers, public types, and structural styles through its package dependencies, so the setup flow is to install the Vue package, import TaskBoard, then load the style files your app needs.

TaskBoard does not require a separate drag and drop, Kanban, virtual-list, export, print, history, or keyboard package.

PrimeOne and Tailwind UI parts are optional application-owned components. Add one UI layer when you want maintained cards, column headers, or swimlane headers without designing every visible surface from scratch. Add-card controls, drop indicators, menus, dialogs, drawers, and other overlays stay in the application.

#Import

Import the TaskBoard namespace from the Vue package.

import { TaskBoard } from '@primeui/vue-taskboard';

Import public types from the same package.

import type { TaskBoardColumn, TaskBoardSwimlane, TaskBoardItem } from '@primeui/vue-taskboard';

#Styles

Load the base structural stylesheet once in the app entry. Add the PrimeOne TaskBoard theme when the board should use PrimeUI design tokens.

import '@primeui/taskboard-style/style.css';
import '@primeui/taskboard-style/themes/primeone.css';

The base file owns board layout, column scroll containers, drag states, selection states, focus rings, density classes, RTL, print rules, virtual-scroll spacers, and responsive behavior. The theme file maps TaskBoard variables to PrimeOne tokens. Neither file installs card bodies, toolbar controls, dialogs, column-header content, or menu items.

Use Theming for the complete variable, color-mode, state-class, and style-import reference.

#UI Parts

TaskBoard is compound by default. Runtime parts such as TaskBoard.ColumnHeader, TaskBoard.ColumnContent, TaskBoard.Card, and TaskBoard.SwimlaneHeader provide behavior and context. The app supplies the visible UI inside those parts.

UI parts are copied into the project, so teams can edit, restyle, or replace them.

#PrimeOne UI Parts

Run the CLI from the project root to copy the PrimeOne parts. --output-dir sets their parent directory, so this command writes to src/components/primeui/taskboard.

npx -y @primeui/cli add taskboard --framework vue --ui primeone --output-dir ./src/components/primeui

Import the copied components from that directory. These examples use @/ as an alias for src/.

import { TaskBoardCardUI, TaskBoardColumnHeaderUI } from '@/components/primeui/taskboard';

Add the copied component stylesheet after the TaskBoard runtime styles.

import '@primeui/taskboard-style/style.css';
import '@primeui/taskboard-style/themes/primeone.css';
import '@/components/primeui/taskboard/assets/style/components.css';

#Tailwind UI Parts

If the project already uses Tailwind, copy the utility-class variant instead.

npx -y @primeui/cli add taskboard --framework vue --ui tailwind --output-dir ./src/components/primeui

The Tailwind parts use the same component names, so the imports do not change.

import { TaskBoardCardUI, TaskBoardColumnHeaderUI } from '@/components/primeui/taskboard';

Load the TaskBoard structural stylesheet. The copied Tailwind parts use Tailwind utility classes and TaskBoard CSS variables such as --p-primary-color, --p-content-background, and --p-content-border-color. Keep primeone.css when the app already uses PrimeUI tokens, or define equivalent variables in the app theme.

import '@primeui/taskboard-style/style.css';
import '@primeui/taskboard-style/themes/primeone.css';

#Manual Parts

Teams that do not use the CLI can create local parts manually. Keep them in a folder such as src/components/taskboard and place each component inside the matching TaskBoard part.

import WorkflowCard from '@/components/taskboard/WorkflowCard.vue';
import WorkflowColumnHeader from '@/components/taskboard/WorkflowColumnHeader.vue';

Manual parts should draw the visible surface only. Keep selection, focus, drag, reorder, virtual scroll, print mode, and workflow checks in TaskBoard. Read data through slot props first, then use part context hooks such as useTaskBoardColumnContext(), useTaskBoardCardContext(), or useTaskBoardSwimlaneHeaderContext() when a nested component needs the same payload. Use focused hooks such as useTaskBoardSelection(), useTaskBoardHistory(), useTaskBoardAccess(), useTaskBoardWorkflow(), or useTaskBoardDrag() when a local toolbar needs board state. For right-click menus and card editors, listen to emitted events and render the PrimeVue or app-owned overlay you prefer.

#Runtime, Styles, and UI Parts

#Part Groups

PrimeOne and Tailwind currently expose the same Vue component names. Import only the copied UI components rendered by the page. Runtime slots such as TaskBoard.ColumnFooter, TaskBoard.ColumnEmpty, and TaskBoard.DropIndicator do not need UI-part imports; place your app markup inside the compound part.

#Usage

import { TaskBoard } from '@primeui/vue-taskboard';

<TaskBoard.Root v-model:tasks="tasks" :columns="columns" data-key="id" column-field="columnId">
    <TaskBoard.Header />
    <TaskBoard.Content>
        <TaskBoard.Column v-for="column in columns" :key="column.id" :value="column.id" :label="column.label">
            <TaskBoard.ColumnHeader />
            <TaskBoard.ColumnContent>
                <TaskBoard.Card />
                <TaskBoard.ColumnEmpty />
            </TaskBoard.ColumnContent>
            <TaskBoard.ColumnFooter />
        </TaskBoard.Column>
    </TaskBoard.Content>
</TaskBoard.Root>

Start with the headless structure, then add style imports and UI parts around it. The TaskBoard compound parts stay the same whether the visible UI comes from copied parts or product-owned components.

#First Board Data

TaskBoard reads plain objects. data-key points to the stable item id field. column-field points to the item field that stores the current column.

const columns: TaskBoardColumn[] = [
    { id: 'todo', label: 'Todo', statusType: 'todo' },
    { id: 'review', label: 'Review', statusType: 'in-progress' },
    { id: 'done', label: 'Done', statusType: 'done' }
];

const tasks = ref<TaskBoardItem[]>([
    { id: 'T-101', title: 'Review supplier quote', columnId: 'todo', priority: 'high' },
    { id: 'T-102', title: 'Publish launch checklist', columnId: 'review', assignee: 'N. Kaya' }
]);

Use v-model:tasks when TaskBoard should update the bound array after user actions. Use :items when an external store owns every mutation and the app applies emitted payloads. TaskBoardItem is intentionally open-ended; only the fields named by data-key, column-field, and optional swimlane-field are required by the runtime.

#Installed TaskBoard

The setup sample loads runtime styles, theme styles, and editable UI parts around the same compound TaskBoard structure.

#Setup Checklist

• Install @primeui/vue-taskboard.
• Import TaskBoard and TaskBoard types from @primeui/vue-taskboard.
• Load @primeui/taskboard-style/style.css.
• Load a theme file or define the TaskBoard CSS variables in the app theme.
• Copy PrimeOne or Tailwind UI parts when the project wants starter card, column-header, or swimlane components.
• Keep data-key and column-field aligned with the item records.
• Add swimlane-field only when the item data is grouped by swimlane.
• Keep search, filtering, sorting, dialogs, and context menus in app code; pass the resulting items and events into TaskBoard.

#Quickstarts

Explore the runnable projects in the TaskBoard examples repository. Each quickstart includes a working board with task creation, editing, and deletion.

• Vite - Vue and Vite with PrimeOne UI parts and PrimeVue controls.
• Nuxt - Nuxt with PrimeOne UI parts and PrimeVue controls.
• Vite + Tailwind - Vue and Vite with Tailwind UI parts and native controls.
• Nuxt + Tailwind - Nuxt with Tailwind UI parts and native controls.

#Next Steps

• Architecture
• LLMs
• Data Binding
• UI Parts
• Theming