@bryntum/taskboard-vue-3-thin
v7.1.2TypeScript
Vue 3 wrappers for Bryntum TaskBoard JavaScript component
0/weekUpdated todayCommercialUnpacked: 3.8 MB
Published by Bryntum
Vue 3 wrapper for Bryntum TaskBoard Thin packages
This package provides a wrapper that turns Bryntum TaskBoard into a Vue 3 component, exposing configuration options,
properties, features, and events.
> Thin Package: This is a thin wrapper package designed for applications that use multiple Bryntum products.
> Thin packages exclude bundled dependencies to avoid duplication. For details, see
> Vue Multiple Products.
Version Requirement
* Vue: 3.2 or higher
* TypeScript: 4.2 or higher
* Vite 5 or higher
Package Contents
| Path | Description |
|--------------|------------------------------------------------|
| lib/ | Vue 3 wrapper components (BryntumTaskBoard etc.) |
| src/ | Original Vue source files |
| src/*.d.ts | TypeScript type definitions |
Installation
$3
``bash`
npm install @bryntum/taskboard-vue-3-thin@latest
$3
`bash`
npm install @bryntum/taskboard-thin@latest
Try Bryntum Online Demos
Quick Start
Edit the src/App.vue file and replace the content with the following:
`typescript
v-bind=taskBoardProjectProps
/>
v-bind=taskBoardProps
/>
`
Create a TaskBoardConfig.ts file in the src/ directory with the following content:
`typescript
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:
`json`
{
"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.
Project Structure
$3
API packages:
`json`
{
"dependencies": {
"@bryntum/core-thin": "7.1.2",
"@bryntum/engine-thin": "7.1.2",
"@bryntum/taskboard-thin": "7.1.2"
}
}
Framework wrapper packages:
`json`
{
"dependencies": {
"@bryntum/core-vue-3-thin": "7.1.2",
"@bryntum/taskboard-vue-3-thin": "7.1.2"
}
}
$3
`typescript
import { BryntumTaskBoardProps } from '@bryntum/taskboard-vue-3-thin';
const taskBoardProps : BryntumTaskBoardProps = {
// TaskBoard configuration
};
`
$3
SCSS/CSS:
`css`
/ FontAwesome is used for icons /
@import '@bryntum/core-thin/fontawesome/css/fontawesome.css';
@import "@bryntum/core-thin/fontawesome/css/solid.css";
/ Structural CSS /
@import '@bryntum/core-thin/core.css';
@import '@bryntum/taskboard-thin/taskboard.css';
/ Theme /
@import '@bryntum/core-thin/svalbard-light.css';
$3
`javascript`
import '@bryntum/taskboard-thin/lib/localization/De.js'
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:
| Product | 
JavaScript | 
React |
Vue | 
Angular |
|-------------------|:------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:----------------------------------------------------------------------:|:------------------------------------------------------------------------------:|
| Grid | Grid JavaScript demos | Grid React demos | Grid Vue demos | Grid Angular demos |
| Scheduler | Scheduler JavaScript demos | Scheduler React demos | Scheduler Vue demos | Scheduler Angular demos |
| Scheduler Pro | Scheduler Pro JavaScript demos | Scheduler Pro React demos | Scheduler Pro Vue demos | Scheduler Pro Angular demos |
| Gantt | Gantt JavaScript demos | Gantt React demos | Gantt Vue demos | Gantt Angular demos |
| Calendar | Calendar JavaScript demos | Calendar React demos | Calendar Vue demos | Calendar Angular demos |
| TaskBoard | TaskBoard JavaScript demos | TaskBoard React demos | TaskBoard Vue demos | TaskBoard Angular demos |
Online references
* Bryntum TaskBoard documentation
* Bryntum TaskBoard examples
* Bryntum Support Forum
* Contact us
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.