TaskBoard - Tree Shaking

#Overview

Every part is available two ways from the same package: flat named imports that tree-shake, and a compound TaskBoard namespace that reads cleanly but pins every part into the bundle. Same components either way. For a board that uses a handful of parts and cares about bytes, use the flat imports.

#Flat Imports

Import each part by its prefixed name:

import { TaskBoardRoot, TaskBoardColumn, TaskBoardColumnContent, TaskBoardCard } from '@primeui/vue-taskboard';

<template>
    <TaskBoardRoot :columns="columns">
        <TaskBoardColumn v-for="col in columns" :key="col.id" :column="col">
            <TaskBoardColumnContent>
                <TaskBoardCard v-for="task in col.tasks" :key="task.id" :task="task" />
            </TaskBoardColumnContent>
        </TaskBoardColumn>
    </TaskBoardRoot>
</template>

The bundler keeps only the named imports. Every part has a flat name: TaskBoardRoot, TaskBoardColumn, TaskBoardCardHeader, TaskBoardSwimlaneHeader, and so on. The full set is TaskBoardRoot, TaskBoardHeader, TaskBoardContent, TaskBoardColumn, TaskBoardColumnHeader, TaskBoardColumnContent, TaskBoardColumnFooter, TaskBoardColumnEmpty, TaskBoardColumnAdd, TaskBoardCard, TaskBoardCardHeader, TaskBoardCardContent, TaskBoardCardFooter, TaskBoardCardAdd, TaskBoardDragPreview, TaskBoardDragConfirm, TaskBoardDropIndicator, TaskBoardLoading, TaskBoardSwimlaneHeader, and TaskBoardSwimlaneColumnHeader.

#Compound API

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

<template>
    <TaskBoard.Root :columns="columns">
        <TaskBoard.Column v-for="col in columns" :key="col.id" :column="col">
            <TaskBoard.Card v-for="task in col.tasks" :key="task.id" :task="task" />
        </TaskBoard.Column>
    </TaskBoard.Root>
</template>

This exposes <TaskBoard.Root>, <TaskBoard.Column>, <TaskBoard.Card>, and the rest off one object. It reads cleanly and there is nothing to look up. The cost: TaskBoard is a namespace object, so its members resolve at runtime. A bundler keeps all of them. Pulling a single part off it still ships the swimlane headers, the drag overlays, the add affordances, and the loading state. On a lazy-loaded board that is usually fine.

The composables sit behind their own subpath:

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

#Bundle Impact

The gap shows up most with a single leaf. Importing one part off the compound namespace pulls the whole board surface; importing the same part flat pulls just that component. That is the whole namespace versus one piece.

One honest caveat: a real board is not one leaf. Mounting TaskBoardRoot pulls in Root, which eagerly wires drag, keyboard navigation, history, and print. So even a minimal flat board (TaskBoardRoot plus TaskBoardColumn and TaskBoardCard) carries that engine. Flat imports drop the parts that go unrendered, not the machinery behind Root. Going below that floor means trimming features, not import style.

#Choosing an Import Style

The flat imports are the size-safe default and read almost as cleanly as the namespace. The compound API is fine when readability wins and the board is on a lazy-loaded route. There is no third tier here: flat lives on the main entry, so it carries no subpath tax.

#Related Docs

• API
• Performance