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.

Requested In Progress Completed Confirm Ports Availability Infrastructure Security Remove deprecated API Bug with rendering Biz Dev Design Add 'Call to Action' to header Help center configuration Strategy Kick off documents Biz Dev Upgrade babel Infrastructure Fix CSS classes QA/QC Write tests QA/QC

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!

Vue Task Board code example

 

This sample code shows a Vue component defined in App.vue for a basic Bryntum Task Board setup.

<template>
    <div>
        <bryntum-task-board-project-model
            ref="project"
            v-bind="projectConfig"
            :tasks="tasks"
        />
        <bryntum-task-board
            ref="taskboard"
            v-bind="taskBoardConfig"
        />
    </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue';

import {
    BryntumTaskBoardProjectModel,
    BryntumTaskBoard
} from '@bryntum/taskboard-vue-3';

import { useTaskBoardConfig, useProjectConfig } from '@/AppConfig';

export default {
    name : 'App',

    components : {
        BryntumTaskBoardProjectModel,
        BryntumTaskBoard
    },

    setup() {
        const taskboard = ref(null);
        const project = ref(null);

        const taskBoardConfig = reactive(useTaskBoardConfig());
        const projectConfig = reactive(useProjectConfig());

        const tasks = ref(null);

        tasks.value = [
            { id : 1, name : 'My first task', status : 'doing' },
            { id : 2, name : 'My second task', status : 'todo' }
        ];

        onMounted(() => {
            taskboard.value.instance.value.project = project.value.instance.value;
        });

        return {
            project,
            taskboard,
            projectConfig,
            taskBoardConfig,
            tasks
        };
    }
};
</script>

<style lang="scss">
@import './App.scss';
</style>

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.

Trusted by the world’s leading companies

Ready to get started?