Vue
The most flexible Kanban board
Bryntum Task Board for Vue is a web component with a range of built-in features to track tasks from idea to completion. Optimize your users’ workflow in a beautiful interface that’s easy to customize.
Clear and concise Task Board documentation
A feature-rich Kanban board
Customize how cards, columns, and swimlanes are rendered and styled to suit your needs and brand aesthetic. Autogenerate columns, enable inline editing, and quickly display thousands of tasks.
You can even toggle features on or off at runtime, thanks to our rich API. Try it out in the demo!
Structure and filter Kanban cards
Create order out of chaos. Group tasks into swimlanes and any number of columns. Collapse swimlanes and columns to focus on high-priority tasks. Find the tasks that matter most with filters.
Create stunning modern interfaces
- Choose from five themes or create your own using our Sass variables.
- Use the taskRenderer method to effortlessly display text and markup.
- Control which elements a card shows using bodyItems: Display content like icons, tags, images, and progress bars.
- Customize the task editor for quick access to your most-used features.
Easy Vue component integration with Task Board
Bryntum Vue wrappers define components that can be used like any other Vue components, giving you access to Bryntum API widget class configurations, properties, events, and features in your Vue application.
<template>
<bryntum-task-board
ref="taskboard"
tooltip="taskBoardConfig.tooltip"
v-bind="taskBoardConfig"
@click="onClick"
/>
</template>
<script>
import { BryntumTaskBoard } from '@bryntum/taskboard-vue';
import { taskBoardConfig } from './AppConfig';
import './components/ColorColumn.js';
export default {
name: 'app',
// local components
components: {
BryntumTaskBoard
},
data() {
return { taskBoardConfig };
}
};
</script>
<style lang="scss">
@import './App.scss';
</style>
Looks great at any size
Bryntum Vue Task Board is responsive right out of the box. Less important details are filtered out on smaller screen widths to keep the focus on what’s critical while you’re on the go.
Try it out below
Drag the slider to zoom or try the built-in filtering.