Visually organize and prioritize your tasks with a transparent workflow.
Efficient control to manage software/product development, project management, and task planner using swimlane, cards, WIP validations, and more.
A rich set of built-in functionalities such as data binding, swimlane, templating for card, scrolling, drag-and-drop, stacked header, WIP validations, responsiveness, various built-in themes, and much more.

Trusted by the world’s leading companies

Vue vue kanban board

Overview

The Vue Kanban board is a task scheduling control that provides clear user interface representation to manage multiple stages of work. The Kanban board is widely used in various real-time applications such as task scheduler, project management, software or product development, manufacturing process, personal task management, and much more.

Vue Kanban Board Code Example

Easily get started with the Vue Kanban Board using a few simple lines of Vue codes as demonstrated below. Also explore our Vue Kanban Board Example that shows you how to render and configure a Kanban Board in Vue.

<template> 
  <div id="app">
       <ejs-kanban id="kanban" keyField="Status" :dataSource="kanbanData"
        :cardSettings="cardSettings">
          <e-columns>
            <e-column headerText="To Do" keyField="Open"></e-column>
            <e-column headerText="In Progress" keyField="InProgress"></e-column>
            <e-column headerText="Testing" keyField="Testing"></e-column>
            <e-column headerText="Done" keyField="Close"></e-column>
          </e-columns>
        </ejs-kanban>
  </div>
</template>

<script>
import Vue from "vue";
import { KanbanPlugin } from '@syncfusion/ej2-vue-kanban';
import { extend } from '@syncfusion/ej2-base';
import { kanbanData } from './datasource.js';
Vue.use(KanbanPlugin);
export default {
  data: function() {
    return {
      kanbanData: extend([], kanbanData, null, true),
      cardSettings: {
        contentField: "Summary",
        headerField: "Id",
      }
    };
  },
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-vue-kanban/styles/material.css';
</style>

Data binding

Data binds seamlessly with various local and remote data sources, such as: JSON, RESTful services, OData services, and WCF services.

Vue Kanban loads data on demand by default to reduce transfer and load times. Proper field mapping is mandatory when binding Kanban to the data sources with different field names.

Data binding documentation

Data binding options available in HTML5 Vue Kanban.

Workflow

The Kanban restrict or allow card transitions from one column to another to maintain a controlled workflow process.

Work in progress (WIP) limits

Users can set limits to the card count at each stage of Kanban workflow to avoid working on multiple tasks. Kanban columns visually change its appearance when validation fails.

WIP validation documentation

Flexible layout

By default, Kanban has a simple layout with cards and columns. But users can create complex Kanban boards based on their application needs and integrate with any team in an organization.

Flexible layout documentation

Card options

A card is the main element of Kanban board that provides clear representation of tasks and flows across various stages.

Illustration of card customization with HTML5 Vue Kanban.

Customizable cards

Change the look and feel of Kanban cards by customizing their default appearance and style using any HTML or CSS element.

Vue Kanban drag and drop.

Drag and Drop cards

Provides smooth drag-and-drop support to modify the status of cards.

Drag and drop cards documentation

Vue Kanban multiple selection.

Selection

Easily select multiple cards using mouse, keyboard, or touch interfaces. You can also make multiple selection of cards by pressing the Shift key.

Selection documentation

Columns

The Kanban board divides its layout as columns to visualize the different stages of work, e. g. to-do, validate, in-progress, testing, and completed.

Columns documentation

Vue Kanban toggle column.

Expand/Collapse column

Built-in support is available for expanding and collapsing the columns by interaction and programmatically. Users can also control the collapsible behavior on page load.

Vue Kanban multiple key mapping.

Multi-key

Users can map multiple keys to single columns to group similar columns. i.e., development column has implementation, review, and testing.

Card editing

Vue Kanban provides full support to create, read, update, and delete operations (CRUD) on cards. In addition to built-in editing through dialog, users can create a template that suits their application needs. Editing operations are performed with the help of a data manager.

Card editing documentation

Stacked header

Vue Kanban allows you to add additional headers to group the logically related columns above the column header in a stacked manner.

Stacked header documentation

Swimlane

Visually split the Kanban board horizontally to categorize the cards based on key i.e., assignee, project, or type. Users can customize the swimlane header with templates and control the visibility of empty rows and items count in a swimlane row.

Swimlane documentation

Frozen rows

The Swimlane frozen rows option makes the rows always visible at the top when scrolling the content. It is mainly used to show corresponding swimlane rows.

Frozen rows documentation

Display card information with a default tooltip or customized tooltip template.

Tooltip documentation

Templating

Users can customize the UI elements of Kanban using templates i.e., column header, cards, swimlane header, and tooltip.

Custom card template documentation

Vue Kanban APIs.

Developer-friendly APIs

Developers have full control over the UI and behavior of the Kanban board through its built-in, developer-friendly APIs. The simple and extensible APIs allow you to customize Kanban functionalities with ease.

APIs documentation

Theme illustration for Vue Kanban.

Built-in themes

Five built-in SASS-based themes are available, such as Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and High Contrast.

Theme documentation

Vue Kanban displaying from right to left.

Right to left (RTL)

Vue Kanban allows you to render its layout, columns, and cards from right to left to improve the user experience and accessibility for RTL languages.

Right to left documentation

Responsive and touch-friendly

Vue Kanban has a highly responsive layout and a finely optimized design for desktops, touchscreens, and smart phones.

Illustration of touch support of HTML5 Vue Kanban.

Touch support

User-friendly touch gestures and an interactive UI design on Kanban help produce the best user experience.

Illustration of adaptive UI of HTML5 Vue Kanban.

Adaptive UI

The Kanban user interface adapts automatically to mobile and desktop devices. This helps the application to scale elegantly across all form factors without any additional effort.

Localization

Localize all the static strings used in the user interface of the Vue Kanban control using the localization (l10n) library.

Localization documentation

Vue Kanban with localization support.

Other supported frameworks

The Kanban Board is available for the Blazor, React, Angular, and JavaScript frameworks. Explore its platform-specific options through the following links:

Supported browsers

The Vue Kanban Board works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera.

Supported browsers in Vue Kanban Board.

Not sure how to create your first Vue Kanban Board? Our documentation can help.

I’d love to read it now

ALL COMPONENTS

SMART COMPONENTS

GRIDS

DATA VISUALIZATION

CALENDARS

DROPDOWNS

FILE VIEWERS & EDITORS

BUTTONS

INTERACTIVE CHAT

INPUTS

NAVIGATION

LAYOUT

FORMS

Query Builder UI

NOTIFICATIONS

Frequently Asked Questions

✅ Why should you choose Syncfusion Vue Kanban Board?

Visual organization and prioritization of your tasks with a transparent workflow.
Efficient control to manage software and product development, project management, and task planning using swim lanes, cards, WIP validations, and more.
A rich set of built-in functionalities such as data binding, templating for card, scrolling, drag-and-drop, stacked headers, responsiveness, various built-in themes, and much more.
Simple configuration and API.
Support for all modern browsers.
Expansive learning resources such as demos and documentation to learn quickly and get started with Vue Kanban Board.

✅ Where can I find the Syncfusion Vue Kanban Board demo?

You can find our Vue Kanban Board demo here, which demonstrates how to render and configure the Kanban.

✅ Can I download and utilize the Syncfusion Vue Kanban Board for free?

No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.

✅ How do I get started with Syncfusion Vue Kanban Board?

A good place to start would be our comprehensive getting started documentation.

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion^® reduces customers’ development time.
Here are some of their experiences.

Syncfusion helps small companies

Syncfusion has a very good service and innovative products. People at syncfusion is helpful and tries to give solution to customer needs. Essential Studio has enough controls for most business applications.

Regina V,

Programador informático, Small-Business

Perfect for any developer

The Syncfusion Essential Studio has excellent features that are updated or added constantly on a regular basis. The support is exceptional—fast and professional responses. The support team provides you with code samples. As for the bugs, they always try to include the fix in the next release.

Dejan D,

Chief Executive Officer, Small-Business

See Real Success Stories

Developers around the world trust Syncfusion’s Essential Studio to simplify complex projects and speed up delivery. With a vast library of UI controls, powerful SDKs, and reliable support, Essential Studio helps teams build enterprise-ready applications with confidence.

Read Our Customer Stories

Industry

Software development

75% Cost reduction

50% Faster development

“If somebody is looking for a great tool to work with? Yes. I would definitely recommend Syncfusion for anyone who is trying to develop something meaningful.”

- Somnath Maji (Founder of Igniatek Consultancy)

Read Story

Industry

Utilities (oil and gas)