@bryntum/taskboard-vue-3
| Install | |
|---|---|
npm install @bryntum/taskboard-vue-3 |
|
| Latest Version: | 7.3.7 |
| License: | Commercial |
| Last Updated: | Sep 24, 2026 |
| Links: | npm |
Vue 3 wrapper for Bryntum TaskBoard
This package provides a wrapper that turns Bryntum TaskBoard into a Vue 3 component, exposing configuration options, properties, features, and events.
Version Requirement
- Vue:
3.2or higher - TypeScript:
4.2or higher - Vite
5or higher
Package Contents
| Path | Description |
|---|---|
lib/ |
Vue 3 wrapper components (BryntumTaskBoard etc.) |
src/ |
Original Vue source files |
src/*.d.ts |
TypeScript type definitions |
Note: This is a wrapper package. The core @bryntum/taskboard package must be installed separately.
Installation
Vue 3 Wrapper
npm install @bryntum/taskboard-vue-3@latest
Component Package (Required)
npm install @bryntum/taskboard@latest
Try Bryntum Online Demos
Quick Start
Edit the src/App.vue file and replace the content with the following:
<script setup>
import { BryntumTaskBoard } from '@bryntum/taskboard-vue-3';
import { taskBoardProps } from './AppConfig.js';
</script>
<template>
<bryntum-task-board v-bind=taskBoardProps />
</template>
<style lang="scss">
@import './App.scss';
</style>
Create a TaskBoardConfig.ts file in the src/ directory with the following content:
import { type BryntumTaskBoardProps } from '@bryntum/taskboard-vue-3';
export const taskBoardProps : BryntumTaskBoardProps = {
// Url for resource avatar images, if you have images in `public/`, uncomment this
// resourceImagePath : 'users/',
// Experimental, transition moving cards using the editor
useDomTransition : true,
// Columns to display
columns : ['todo', 'doing', 'done'],
// Field used to pair a task to a column
columnField : 'status',
// Project using inline data
project : {
loadUrl : 'data/data.json',
autoLoad : true
}
};
Create sample data (click to expand)
Create a public/data/data.json file for example data and add the following JSON data to it:
{
"success": true,
"tasks": {
"rows": [
{ "id": 1, "name": "Design landing page", "status": "doing", "description": "Creating layout for the new landing page" },
{ "id": 2, "name": "Set up database schema", "status": "todo", "description": "Define tables and relationships for user data" },
{ "id": 3, "name": "Write API documentation", "status": "done", "description": "Document the REST endpoints for the project" },
{ "id": 4, "name": "Create login screen", "status": "doing", "description": "Implement authentication UI with validation" },
{ "id": 5, "name": "Integrate payment gateway", "status": "todo", "description": "Connect Stripe API to the backend" },
{ "id": 6, "name": "Fix navigation bugs", "status": "done", "description": "Resolve reported issues with navbar links" },
{ "id": 7, "name": "Build notification system", "status": "doing", "description": "Real-time push notifications for events" },
{ "id": 8, "name": "Add unit tests", "status": "todo", "description": "Write tests for services and components" },
{ "id": 9, "name": "Optimize image loading", "status": "done", "description": "Implement lazy loading for large images" },
{ "id": 10, "name": "Deploy staging server", "status": "doing", "description": "Set up CI/CD pipeline for staging environment" },
{ "id": 11, "name": "Create user profile page", "status": "todo", "description": "Design and implement profile management UI" },
{ "id": 12, "name": "Implement role-based access control", "status": "todo", "description": "Restrict features based on user roles" },
{ "id": 13, "name": "Set up error logging", "status": "todo", "description": "Integrate centralized error monitoring tool" },
{ "id": 14, "name": "Improve form validation", "status": "todo", "description": "Enhance validation rules for all forms" },
{ "id": 15, "name": "Add search functionality", "status": "todo", "description": "Implement search bar with filtering options" }
]
},
"resources": {
"rows": [
{ "id": 1, "name": "Angelo" },
{ "id": 2, "name": "Celia" },
{ "id": 3, "name": "Dave" },
{ "id": 4, "name": "Emilia" },
{ "id": 5, "name": "Gloria" },
{ "id": 6, "name": "Henrik" },
{ "id": 7, "name": "Kate" }
]
},
"assignments": {
"rows": [
{ "id": 1, "event": 1, "resource": 1 },
{ "id": 2, "event": 2, "resource": 2 },
{ "id": 3, "event": 3, "resource": 3 },
{ "id": 4, "event": 4, "resource": 4 },
{ "id": 5, "event": 5, "resource": 5 },
{ "id": 6, "event": 6, "resource": 6 },
{ "id": 7, "event": 7, "resource": 7 },
{ "id": 8, "event": 8, "resource": 1 },
{ "id": 9, "event": 9, "resource": 2 },
{ "id": 10, "event": 10, "resource": 3 },
{ "id": 11, "event": 11, "resource": 4 },
{ "id": 12, "event": 12, "resource": 5 },
{ "id": 13, "event": 1, "resource": 5 },
{ "id": 14, "event": 2, "resource": 5 },
{ "id": 15, "event": 3, "resource": 5 },
{ "id": 16, "event": 4, "resource": 5 },
{ "id": 17, "event": 6, "resource": 5 },
{ "id": 18, "event": 7, "resource": 5 }
]
}
}
This is the data the Bryntum TaskBoard will use.
Lastly, add some styling to your src/style.css:
/* FontAwesome is used for icons */
@import '@bryntum/taskboard/fontawesome/css/fontawesome.css';
@import '@bryntum/taskboard/fontawesome/css/solid.css';
/* Structural CSS */
@import "@bryntum/taskboard/taskboard.css";
/* Bryntum theme of your choice */
@import "@bryntum/taskboard/svalbard-light.css";
Integration Guide
For details on installing and using this package, see the Vue Integration Guide.
Wrappers
Vue wrappers encapsulate Bryntum components as native Vue components, exposing all configuration options, properties, features, and events through Vue-familiar patterns like props, events, and slots.
Visit Wrappers documentation for the complete list of available wrapper components.
Features
Features are optional modules that extend Bryntum TaskBoard functionality. Each feature is suffixed with Feature and
can be enabled and configured through standard Vue props.
Visit Features documentation for the complete list of available features and their configuration options.
Explore All Bryntum Products
- Bryntum Grid - High-performance data grid
- Bryntum Scheduler - Resource scheduling component
- Bryntum Scheduler Pro - Advanced scheduling with dependencies
- Bryntum Gantt - Project planning and management
- Bryntum Calendar - Full-featured calendar component
- Bryntum TaskBoard - Kanban-style task management
Explore our comprehensive collection of demos:
Online references
License and copyright
This wrapper depends on Bryntum TaskBoard, which is commercial software and requires a paid license. Please visit the Bryntum TaskBoard End User License for the full text of the license.
Copyright © 2009-2026, Bryntum All rights reserved.
Related Packages
Vue 3 wrappers for Bryntum Scheduler Pro JavaScript component
Version History
| Version | Released | License |
|---|---|---|
| 7.3.7 | Commercial | |
| 7.3.6 | Commercial | |
| 7.3.5 | Commercial | |
| 7.3.4 | Commercial | |
| 7.3.3 | Commercial | |
| 7.3.2 | Commercial | |
| 7.3.1 | Commercial | |
| 7.3.0 | Commercial | |
| 7.2.4 | Commercial | |
| 7.2.3 | Commercial | |
| 7.2.2 | Commercial | |
| 7.2.1 | Commercial | |
| 7.2.0 | Commercial | |
| 7.1.3 | Commercial | |
| 7.1.2 | Commercial | |
| 7.1.1 | Commercial |