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.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 |

Note: This is a wrapper package. The core @bryntum/taskboard package must be installed separately.

Installation

$3

``bash npm install @bryntum/taskboard-vue-3@latest`

`$3`

`bash npm install @bryntum/taskboard@latest`

`Try Bryntum Online Demos`

* View Online Vue Demos

`Quick Start`

Edit the src/App.vue file and replace the content with the following:

`typescript

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 inpublic/, 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.

Lastly, add some styling to your src/style.css:

`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:

| 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.