Getting Started with the Vue Kanban Component

18 Nov 201811 minutes to read

This article provides a step-by-step guide for setting up a Vite project with a TypeScript environment and integrating the Syncfusion® Vue Kanban component using the Composition API or Options API.

By the end of this guide, you will have a working Kanban board with four columns — To Do, In Progress, Testing, and Done — populated with sample cards.

Prerequisites

System requirements for Syncfusion® Vue UI components

Before you begin, make sure the following are installed on your development machine:

  • Node.js version 18 or higher (required by Vite 7)
  • npm (bundled with Node.js) or yarn
  • A code editor such as Visual Studio Code

Create the Vue Application

Run the following commands in the terminal to scaffold a new Vue 3 + TypeScript project using Vite:

npm create vite@7 my-vue-app -- --template vue-ts
cd my-vue-app
npm install

You can also use npm create vite@latest to scaffold with the most recent Vite version. Replace my-vue-app with the name of your project.

After the install completes, start the dev server to verify the scaffolded app works before adding Syncfusion packages:

npm run dev

Vite serves the default app at http://localhost:5173. Stop the server with Ctrl + C before moving on to the next steps.

Install Syncfusion Vue Kanban Package

All available Essential JS 2 packages are published in the npmjs.com registry. The @syncfusion/ej2-vue-kanban package depends on Vue 3.

Install the Kanban component with the following command:

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

Adding CSS Reference

Themes for Syncfusion® Kanban component can be applied using CSS files provided through npm theme packages. For available themes, refer to the Themes documentation.

Install the Material 3 theme package using the following command:

npm install @syncfusion/ej2-material3-theme

Add these imports to the <style> section of the src/App.vue file, or include them in a global CSS file:

@import "../node_modules/@syncfusion/ej2-material3-theme/styles/kanban/index.css";

Adding Kanban Component

The Kanban component is registered automatically when you import it into src/App.vue. The following snippet shows the complete App.vue file using both the Composition API and the Options API.

Key Properties Used

Property / Directive Description
keyField Maps each card to a column based on a field in the data source (for example, Status).
dataSource An array of objects that populates the Kanban cards.
cardSettings Configures card appearance. contentField sets the card body and headerField sets the card header.
<e-columns> / <e-column> Directives that define the Kanban columns. Each e-column requires headerText and keyField.

The data source used in this example exposes the following fields: Id, Status, Summary, Type, Priority, Tags, Estimate, Assignee, and RankId. The value of each card’s Status field must match one of the keyField values defined on the columns.

<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 setup>
import { KanbanComponent as EjsKanban, ColumnDirective as EColumn, ColumnsDirective as EColumns } from '@syncfusion/ej2-vue-kanban';

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

const cardSettings = {
  contentField: "Summary",
  headerField: "Id"
};

</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-vue-kanban/styles/tailwind3.css';
</style>
<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 { KanbanComponent, ColumnDirective, ColumnsDirective } from '@syncfusion/ej2-vue-kanban';

export default {
  name: "App",
  components: {
    "ejs-kanban": KanbanComponent,
    "e-columns": ColumnsDirective,
    "e-column": ColumnDirective
  },
  data: function () {
    return {
      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 }
      ],

      cardSettings: {
        contentField: "Summary",
        headerField: "Id",
      }
    };
  }
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-vue-kanban/styles/tailwind3.css';
</style>

Run the Application

To run the Vue application, use the following command in the terminal from the project root directory:

npm run dev

This command starts the Vite development server. By default, the app is served at http://localhost:5173/. Once the application is running, a Kanban board will be displayed with the configured To Do, In Progress, Testing, and Done columns, populated with the sample cards from kanbanData.

npm run dev does not produce a production build. To generate an optimized production bundle, run npm run build and preview it with npm run preview.

Troubleshooting

Issue Likely Cause Resolution
Kanban board renders without styles CSS imports are missing or out of order. Verify all CSS files listed above are imported and that ej2-base is imported first.
Cards do not appear in columns keyField on the component does not match any e-column keyField. Make sure each card’s Status value matches one of the column keyField values.
Console error: “Failed to resolve component ej-kanban” Import statement is missing or the package is not installed. Re-run npm install @syncfusion/ej2-vue-kanban --save and confirm the import is present in App.vue.

Next Steps