Getting Started with Bryntum TaskBoard in Vue

Using an AI coding assistant? Install the Bryntum MCP server to give it access to version-specific Bryntum documentation.

Try Vue demos

Bryntum TaskBoard is delivered with a variety of Vue demo applications showing its functionality. All demo applications have been verified to be compatible with Node.js 20.

View online Vue demos Build and run Vue demos

Version requirements

Minimum supported:

Vue: 3.0.0 or higher
TypeScript: 3.6.0 or higher (for TypeScript application)
Vite 4.0.0 or higher (for application build with Vite)

Recommended:

Vue: 3.0.0 or higher
TypeScript: 4.0.0 or higher (for TypeScript application)
Vite 5.0.0 or higher (for application build with Vite)

Please note that this guide is designed for creating a Vue 3 application. Since Vue 2 has reached end of life, we no longer maintain guides or components for Vue 2. We recommend upgrading to Vue 3 for continued support and compatibility.

Create Vue 3 application

To get started, the broad steps are as follows:

Access to npm registry
Create Application
Install component
Add component to Application
Apply styles
Run the application

The application we will be building now should look like the illustration below:

Access to npm registry

You can try out Bryntum components for free using our public Bryntum trial packages. If you have a Bryntum license, please refer to our Npm Repository Guide to access the private Bryntum repository.

Create Application

Similarly to all the examples shipped with the distribution, we will be using Vue CLI to build Vue applications.

Type the following command to install Vue CLI:

npm create vue@latest

This command will install and execute create-vue, the official Vue project scaffolding tool. You will be presented with prompts for several optional features such as TypeScript and testing support:

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes✔️
✔ Add JSX Support? … No✔️ / Yes
✔ Add Vue Router for Single Page Application development? … No✔️ / Yes
✔ Add Pinia for state management? … No✔️ / Yes
✔ Add Vitest for Unit testing? … No✔️ / Yes
✔ Add an End-to-End Testing Solution? … No✔️ / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No✔️ / Yes
✔ Add Prettier for code formatting? … No✔️ / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No✔️ / Yes

Scaffolding project in ./<your-project-name>...
Done.

We are using the above config in this quick start guide but feel free to make any changes.

You can then move to your application folder:

cd <your-project-name>

Please note some generated files will no longer be needed in your app, you can safely remove .src/components/HelloWorld.vue and src/assets/logo.png. Also, remove the assets folder and any links to .css files in the main.ts or main.js.

Install Bryntum TaskBoard packages

From your terminal, update project dependencies using the following commands:

Trial version Licensed version

npm install @bryntum/taskboard@npm:@bryntum/taskboard-trial@7.3.0 @bryntum/taskboard-vue-3@7.3.0

npm install @bryntum/taskboard@7.3.0 @bryntum/taskboard-vue-3@7.3.0

If you're using the licensed Bryntum version, ensure that you have configured your npm properly to get access to the Bryntum packages. If not, refer to this guide.

Add component to Application

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

JavaScript TypeScript

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

<script setup lang="ts">
import { BryntumTaskBoard } from '@bryntum/taskboard-vue-3';
import { taskBoardProps } from './AppConfig.ts';
</script>

<template>
  <bryntum-task-board v-bind="taskBoardProps" />
</template>

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

Bryntum Task Board organizes project tasks and allows you to assign resources to them. For an in-depth introduction to tasks, please refer to the tasks guide.

Create a AppConfig file in the src/ directory with the following content:

JavaScript TypeScript

export const taskBoardConfig = {
    // 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
    }
};

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
    }
};

Add component data

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.

Apply styles

Stylesheets

Remove both src/assets/main.css and src/assets/base.css, and delete the main.css import from src/main.ts.

The following CSS files are provided with the Bryntum npm packages or in the /build folder of the distribution:

File	Contents
`taskboard.css`	Structural CSS
`svalbard-light.css`	Svalbard Light theme
`svalbard-dark.css`	Svalbard Dark theme
`visby-light.css`	Visby Light theme
`visby-dark.css`	Visby Dark theme
`stockholm-light.css`	Stockholm Light theme
`stockholm-dark.css`	Stockholm Dark theme
`material3-light.css`	Material3 Light theme
`material3-dark.css`	Material3 Dark theme
`fluent2-light.css`	Fluent2 Light theme
`fluent2-dark.css`	Fluent2 Dark theme
`fontawesome/css/fontawesome.css`	Font Awesome Free base CSS
`fontawesome/css/solid.css`	Font Awesome Free solid icons

You'll need to import the structural CSS and the preferred theme into your project for the Bryntum TaskBoard to render correctly. And if you are not replacing the icons used by the component, you will also need to include Font Awesome.

CSS SCSS

Create a src/App.css file and add the following:

/* 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";

You need to change the App.scss to App.css in the App.vue.

Create a src/App.scss file and add the following:

// 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
@import "@bryntum/taskboard/svalbard-light.css";

For your application to support sass files, you'll need to add additional dependencies to your project. From the terminal:

npm install sass@1.42.0 --save-dev --save-prefix=~

Visit Creating a custom theme section for more info on how to create a custom theme.

Sizing the component

By default, the Bryntum TaskBoard component is configured to occupy 100% of the parent DOM element with a min-height of 10em.

To display the component at the appropriate size, you can, for example, set parent components to take up the full height of the screen.

CSS SCSS

In your src/App.css file, add the following:

body,
html {
    margin         : 0;
    display        : flex;
    flex-direction : column;
    height         : 100vh;
    font-family    : sans-serif;
    font-size      : 14px;
}

#app {
    flex : 1 1 100%;
}

In your src/App.scss file, add the following:

body,
html {
    margin         : 0;
    display        : flex;
    flex-direction : column;
    height         : 100vh;
    font-family    : sans-serif;
    font-size      : 14px;
}

#app {
    flex : 1 1 100%;
}

There are many other solutions depending on the situation. Feel free to adapt the code above regarding your application layout. For more information on the topic, see this guide Sizing the component.

Run the application

From your terminal:

npm run dev

Your application is now available under http://localhost:5173.

Further on integration with Vue

Do you want to know more about how Bryntum TaskBoard integrates with Vue and starts to customize your application? We provide you with a complete Vue guide here.

Troubleshooting

Stuck somewhere? Please refer to this Troubleshooting guide. If you find errors in our docs and/or onboarding guides, please report them in our forums.

Learn about Data

Bryntum components often use multiple data collections and entities.

For a detailed explanation of how these elements interact, see our guide to tasks in Bryntum TaskBoard.