Getting started with Vue Kanban component

23 Jun 2022 / 4 minutes to read

This section briefly explains how to create Kanban component and configure its available functionalities in VueJS Environment.

Installation and Configuration

You can use Vue CLI to setup your vue applications. To install Vue CLI use the following command.

npm install -g @vue/cli
npm install -g @vue/cli-init

Create a new Vue project using the following Vue CLI command.

vue init webpack-simple quickstart

cd quickstart
npm install

Adding Syncfusion Kanban Package

All the available Essential JS 2 packages are published in npmjs.com registry.

Install the Kanban component by using the below npm command.

npm install @syncfusion/ej2-vue-kanban --save

The —save will instruct NPM to include the Kanban package inside of the dependencies section of the package.json.

Adding CSS Reference

Kanban CSS files are available in the ej2-vue-kanban and its sub-component package folder. It should be referenced as given below within the <style> section of App.vue file.

@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';

Registering Kanban Component

Import the Kanban plugin in your application from the ej2-vue-kanban package as given below and register the same using Vue.use().

import { KanbanPlugin } from '@syncfusion/ej2-vue-kanban';

Vue.use(KanbanPlugin);

By Registering Kanban plugin in Vue, all its child directives are also globally registered.

Initialize the Kanban

Add the EJ2 Vue Kanban using <ejs-kanban> to the <template> section of the App.vue file in src directory.

Source

Preview

app.vue

<template>
  <div id='app'>
      <ejs-kanban id="kanban" keyField="Status">
          <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';
  Vue.use(KanbanPlugin);
  export default { }
</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>

The output will display the kanban header.

Populating cards

To populate the empty Kanban with cards, define the local JSON data or remote data using the dataSource property. To define dataSource, the mandatory fields in JSON object should be relevant to keyField. In the following example, you can see the cards defined with default fields such as ID, Summary, and Status.

Source

Preview

app.vue

datasource.js

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

define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.kanbanData = [
        {
            'Id': 1,
            'Status': 'Open',
            'Summary': 'Analyze the new requirements gathered from the customer.',
            'Type': 'Story',
            'Priority': 'Low',
            'Tags': 'Analyze,Customer',
            'Estimate': 3.5,
            'Assignee': 'Nancy Davloio',
            'RankId': 1
        },
        {
            'Id': 2,
            'Status': 'InProgress',
            'Summary': 'Improve application performance',
            'Type': 'Improvement',
            'Priority': 'Normal',
            'Tags': 'Improvement',
            'Estimate': 6,
            'Assignee': 'Andrew Fuller',
            'RankId': 1
        },
        {
            'Id': 3,
            'Status': 'Open',
            'Summary': 'Arrange a web meeting with the customer to get new requirements.',
            'Type': 'Others',
            'Priority': 'Critical',
            'Tags': 'Meeting',
            'Estimate': 5.5,
            'Assignee': 'Janet Leverling',
            'RankId': 2
        },
        {
            'Id': 4,
            'Status': 'InProgress',
            'Summary': 'Fix the issues reported in the IE browser.',
            'Type': 'Bug',
            'Priority': 'Release Breaker',
            'Tags': 'IE',
            'Estimate': 2.5,
            'Assignee': 'Janet Leverling',
            'RankId': 2
        },
        {
            'Id': 5,
            'Status': 'Testing',
            'Summary': 'Fix the issues reported by the customer.',
            'Type': 'Bug',
            'Priority': 'Low',
            'Tags': 'Customer',
            'Estimate': '3.5',
            'Assignee': 'Steven walker',
            'RankId': 1
        },
        {
            'Id': 6,
            'Status': 'Close',
            'Summary': 'Arrange a web meeting with the customer to get the login page requirements.',
            'Type': 'Others',
            'Priority': 'Low',
            'Tags': 'Meeting',
            'Estimate': 2,
            'Assignee': 'Michael Suyama',
            'RankId': 1
        },
        {
            'Id': 7,
            'Status': 'Validate',
            'Summary': 'Validate new requirements',
            'Type': 'Improvement',
            'Priority': 'Low',
            'Tags': 'Validation',
            'Estimate': 1.5,
            'Assignee': 'Robert King',
            'RankId': 1
        },
        {
            'Id': 8,
            'Status': 'Close',
            'Summary': 'Login page validation',
            'Type': 'Story',
            'Priority': 'Release Breaker',
            'Tags': 'Validation,Fix',
            'Estimate': 2.5,
            'Assignee': 'Laura Callahan',
            'RankId': 2
        },
        {
            'Id': 9,
            'Status': 'Testing',
            'Summary': 'Fix the issues reported in Safari browser.',
            'Type': 'Bug',
            'Priority': 'Release Breaker',
            'Tags': 'Fix,Safari',
            'Estimate': 1.5,
            'Assignee': 'Nancy Davloio',
            'RankId': 2
        },
        {
            'Id': 10,
            'Status': 'Close',
            'Summary': 'Test the application in the IE browser.',
            'Type': 'Story',
            'Priority': 'Low',
            'Tags': 'Testing,IE',
            'Estimate': 5.5,
            'Assignee': 'Margaret hamilt',
            'RankId': 3
        },
        {
            'Id': 11,
            'Status': 'Validate',
            'Summary': 'Validate the issues reported by the customer.',
            'Type': 'Story',
            'Priority': 'High',
            'Tags': 'Validation,Fix',
            'Estimate': 1,
            'Assignee': 'Steven walker',
            'RankId': 1
        },
        {
            'Id': 12,
            'Status': 'Testing',
            'Summary': 'Check Login page validation.',
            'Type': 'Story',
            'Priority': 'Release Breaker',
            'Tags': 'Testing',
            'Estimate': 0.5,
            'Assignee': 'Michael Suyama',
            'RankId': 3
        },
        {
            'Id': 13,
            'Status': 'Open',
            'Summary': 'API improvements.',
            'Type': 'Improvement',
            'Priority': 'High',
            'Tags': 'Grid,API',
            'Estimate': 3.5,
            'Assignee': 'Robert King',
            'RankId': 3
        },
        {
            'Id': 14,
            'Status': 'InProgress',
            'Summary': 'Add responsive support to application',
            'Type': 'Epic',
            'Priority': 'Critical',
            'Tags': 'Responsive',
            'Estimate': 6,
            'Assignee': 'Laura Callahan',
            'RankId': 3
        },
        {
            'Id': 15,
            'Status': 'Open',
            'Summary': 'Show the retrieved data from the server in grid control.',
            'Type': 'Story',
            'Priority': 'High',
            'Tags': 'Database,SQL',
            'Estimate': 5.5,
            'Assignee': 'Margaret hamilt',
            'RankId': 4
        },
        {
            'Id': 16,
            'Status': 'InProgress',
            'Summary': 'Fix cannot open user’s default database SQL error.',
            'Priority': 'Critical',
            'Type': 'Bug',
            'Tags': 'Database,Sql2008',
            'Estimate': 2.5,
            'Assignee': 'Janet Leverling',
            'RankId': 4
        },
        {
            'Id': 17,
            'Status': 'Testing',
            'Summary': 'Fix the issues reported in data binding.',
            'Type': 'Story',
            'Priority': 'Normal',
            'Tags': 'Databinding',
            'Estimate': '3.5',
            'Assignee': 'Janet Leverling',
            'RankId': 4
        },
        {
            'Id': 18,
            'Status': 'Close',
            'Summary': 'Analyze SQL server 2008 connection.',
            'Type': 'Story',
            'Priority': 'Release Breaker',
            'Tags': 'Grid,Sql',
            'Estimate': 2,
            'Assignee': 'Andrew Fuller',
            'RankId': 4
        },
        {
            'Id': 19,
            'Status': 'Validate',
            'Summary': 'Validate databinding issues.',
            'Type': 'Story',
            'Priority': 'Low',
            'Tags': 'Validation',
            'Estimate': 1.5,
            'Assignee': 'Margaret hamilt',
            'RankId': 1
        },
        {
            'Id': 20,
            'Status': 'Close',
            'Summary': 'Analyze grid control.',
            'Type': 'Story',
            'Priority': 'High',
            'Tags': 'Analyze',
            'Estimate': 2.5,
            'Assignee': 'Margaret hamilt',
            'RankId': 5
        },
        {
            'Id': 21,
            'Status': 'Close',
            'Summary': 'Stored procedure for initial data binding of the grid.',
            'Type': 'Others',
            'Priority': 'Release Breaker',
            'Tags': 'Databinding',
            'Estimate': 1.5,
            'Assignee': 'Steven walker',
            'RankId': 6
        },
        {
            'Id': 22,
            'Status': 'Close',
            'Summary': 'Analyze stored procedures.',
            'Type': 'Story',
            'Priority': 'Release Breaker',
            'Tags': 'Procedures',
            'Estimate': 5.5,
            'Assignee': 'Janet Leverling',
            'RankId': 7
        },
        {
            'Id': 23,
            'Status': 'Validate',
            'Summary': 'Validate editing issues.',
            'Type': 'Story',
            'Priority': 'Critical',
            'Tags': 'Editing',
            'Estimate': 1,
            'Assignee': 'Nancy Davloio',
            'RankId': 1
        },
        {
            'Id': 24,
            'Status': 'Testing',
            'Summary': 'Test editing functionality.',
            'Type': 'Story',
            'Priority': 'Normal',
            'Tags': 'Editing,Test',
            'Estimate': 0.5,
            'Assignee': 'Nancy Davloio',
            'RankId': 5
        },
        {
            'Id': 25,
            'Status': 'Open',
            'Summary': 'Enhance editing functionality.',
            'Type': 'Improvement',
            'Priority': 'Low',
            'Tags': 'Editing',
            'Estimate': 3.5,
            'Assignee': 'Andrew Fuller',
            'RankId': 5
        }
    ];
});

Enable swimlane

Swimlane can be enabled by mapping the fields swimlaneSettings.keyField to appropriate column name in dataSource. This enables the grouping of the cards based on the mapped column values.

Source

Preview

app.vue

datasource.js

<template>
  <div id="app">
       <ejs-kanban id="kanban" keyField="Status" :dataSource="kanbanData"
        :cardSettings="cardSettings" :swimlaneSettings="swimlaneSettings">
          <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",
      },
      swimlaneSettings: {
        keyField: "Assignee"
      }
    };
  },
}
</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>

define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.kanbanData = [
        {
            'Id': 1,
            'Status': 'Open',
            'Summary': 'Analyze the new requirements gathered from the customer.',
            'Type': 'Story',
            'Priority': 'Low',
            'Tags': 'Analyze,Customer',
            'Estimate': 3.5,
            'Assignee': 'Nancy Davloio',
            'RankId': 1
        },
        {
            'Id': 2,
            'Status': 'InProgress',
            'Summary': 'Improve application performance',
            'Type': 'Improvement',
            'Priority': 'Normal',
            'Tags': 'Improvement',
            'Estimate': 6,
            'Assignee': 'Andrew Fuller',
            'RankId': 1
        },
        {
            'Id': 3,
            'Status': 'Open',
            'Summary': 'Arrange a web meeting with the customer to get new requirements.',
            'Type': 'Others',
            'Priority': 'Critical',
            'Tags': 'Meeting',
            'Estimate': 5.5,
            'Assignee': 'Janet Leverling',
            'RankId': 2
        },
        {
            'Id': 4,
            'Status': 'InProgress',
            'Summary': 'Fix the issues reported in the IE browser.',
            'Type': 'Bug',
            'Priority': 'Release Breaker',
            'Tags': 'IE',
            'Estimate': 2.5,
            'Assignee': 'Janet Leverling',
            'RankId': 2
        },
        {
            'Id': 5,
            'Status': 'Testing',
            'Summary': 'Fix the issues reported by the customer.',
            'Type': 'Bug',
            'Priority': 'Low',
            'Tags': 'Customer',
            'Estimate': '3.5',
            'Assignee': 'Steven walker',
            'RankId': 1
        },
        {
            'Id': 6,
            'Status': 'Close',
            'Summary': 'Arrange a web meeting with the customer to get the login page requirements.',
            'Type': 'Others',
            'Priority': 'Low',
            'Tags': 'Meeting',
            'Estimate': 2,
            'Assignee': 'Michael Suyama',
            'RankId': 1
        },
        {
            'Id': 7,
            'Status': 'Validate',
            'Summary': 'Validate new requirements',
            'Type': 'Improvement',
            'Priority': 'Low',
            'Tags': 'Validation',
            'Estimate': 1.5,
            'Assignee': 'Robert King',
            'RankId': 1
        },
        {
            'Id': 8,
            'Status': 'Close',
            'Summary': 'Login page validation',
            'Type': 'Story',
            'Priority': 'Release Breaker',
            'Tags': 'Validation,Fix',
            'Estimate': 2.5,
            'Assignee': 'Laura Callahan',
            'RankId': 2
        },
        {
            'Id': 9,
            'Status': 'Testing',
            'Summary': 'Fix the issues reported in Safari browser.',
            'Type': 'Bug',
            'Priority': 'Release Breaker',
            'Tags': 'Fix,Safari',
            'Estimate': 1.5,
            'Assignee': 'Nancy Davloio',
            'RankId': 2
        },
        {
            'Id': 10,
            'Status': 'Close',
            'Summary': 'Test the application in the IE browser.',
            'Type': 'Story',
            'Priority': 'Low',
            'Tags': 'Testing,IE',
            'Estimate': 5.5,
            'Assignee': 'Margaret hamilt',
            'RankId': 3
        },
        {
            'Id': 11,
            'Status': 'Validate',
            'Summary': 'Validate the issues reported by the customer.',
            'Type': 'Story',
            'Priority': 'High',
            'Tags': 'Validation,Fix',
            'Estimate': 1,
            'Assignee': 'Steven walker',
            'RankId': 1
        },
        {
            'Id': 12,
            'Status': 'Testing',
            'Summary': 'Check Login page validation.',
            'Type': 'Story',
            'Priority': 'Release Breaker',
            'Tags': 'Testing',
            'Estimate': 0.5,
            'Assignee': 'Michael Suyama',
            'RankId': 3
        },
        {
            'Id': 13,
            'Status': 'Open',
            'Summary': 'API improvements.',
            'Type': 'Improvement',
            'Priority': 'High',
            'Tags': 'Grid,API',
            'Estimate': 3.5,
            'Assignee': 'Robert King',
            'RankId': 3
        },
        {
            'Id': 14,
            'Status': 'InProgress',
            'Summary': 'Add responsive support to application',
            'Type': 'Epic',
            'Priority': 'Critical',
            'Tags': 'Responsive',
            'Estimate': 6,
            'Assignee': 'Laura Callahan',
            'RankId': 3
        },
        {
            'Id': 15,
            'Status': 'Open',
            'Summary': 'Show the retrieved data from the server in grid control.',
            'Type': 'Story',
            'Priority': 'High',
            'Tags': 'Database,SQL',
            'Estimate': 5.5,
            'Assignee': 'Margaret hamilt',
            'RankId': 4
        },
        {
            'Id': 16,
            'Status': 'InProgress',
            'Summary': 'Fix cannot open user’s default database SQL error.',
            'Priority': 'Critical',
            'Type': 'Bug',
            'Tags': 'Database,Sql2008',
            'Estimate': 2.5,
            'Assignee': 'Janet Leverling',
            'RankId': 4
        },
        {
            'Id': 17,
            'Status': 'Testing',
            'Summary': 'Fix the issues reported in data binding.',
            'Type': 'Story',
            'Priority': 'Normal',
            'Tags': 'Databinding',
            'Estimate': '3.5',
            'Assignee': 'Janet Leverling',
            'RankId': 4
        },
        {
            'Id': 18,
            'Status': 'Close',
            'Summary': 'Analyze SQL server 2008 connection.',
            'Type': 'Story',
            'Priority': 'Release Breaker',
            'Tags': 'Grid,Sql',
            'Estimate': 2,
            'Assignee': 'Andrew Fuller',
            'RankId': 4
        },
        {
            'Id': 19,
            'Status': 'Validate',
            'Summary': 'Validate databinding issues.',
            'Type': 'Story',
            'Priority': 'Low',
            'Tags': 'Validation',
            'Estimate': 1.5,
            'Assignee': 'Margaret hamilt',
            'RankId': 1
        },
        {
            'Id': 20,
            'Status': 'Close',
            'Summary': 'Analyze grid control.',
            'Type': 'Story',
            'Priority': 'High',
            'Tags': 'Analyze',
            'Estimate': 2.5,
            'Assignee': 'Margaret hamilt',
            'RankId': 5
        },
        {
            'Id': 21,
            'Status': 'Close',
            'Summary': 'Stored procedure for initial data binding of the grid.',
            'Type': 'Others',
            'Priority': 'Release Breaker',
            'Tags': 'Databinding',
            'Estimate': 1.5,
            'Assignee': 'Steven walker',
            'RankId': 6
        },
        {
            'Id': 22,
            'Status': 'Close',
            'Summary': 'Analyze stored procedures.',
            'Type': 'Story',
            'Priority': 'Release Breaker',
            'Tags': 'Procedures',
            'Estimate': 5.5,
            'Assignee': 'Janet Leverling',
            'RankId': 7
        },
        {
            'Id': 23,
            'Status': 'Validate',
            'Summary': 'Validate editing issues.',
            'Type': 'Story',
            'Priority': 'Critical',
            'Tags': 'Editing',
            'Estimate': 1,
            'Assignee': 'Nancy Davloio',
            'RankId': 1
        },
        {
            'Id': 24,
            'Status': 'Testing',
            'Summary': 'Test editing functionality.',
            'Type': 'Story',
            'Priority': 'Normal',
            'Tags': 'Editing,Test',
            'Estimate': 0.5,
            'Assignee': 'Nancy Davloio',
            'RankId': 5
        },
        {
            'Id': 25,
            'Status': 'Open',
            'Summary': 'Enhance editing functionality.',
            'Type': 'Improvement',
            'Priority': 'Low',
            'Tags': 'Editing',
            'Estimate': 3.5,
            'Assignee': 'Andrew Fuller',
            'RankId': 5
        }
    ];
});

Contents

Installation and Configuration
Adding Syncfusion Kanban Package
Adding CSS Reference
Registering Kanban Component
Initialize the Kanban
Populating cards
Enable swimlane

Contents

Installation and Configuration
Adding Syncfusion Kanban Package
Adding CSS Reference
Registering Kanban Component
Initialize the Kanban
Populating cards
Enable swimlane

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!