Using a Kanban board layout component inspired by Invision and Trello

Vue Kanban

Most likely everyone has come across Trello’s boards or the Invision's workflow platform. This Vue component Vue Kanban is a flexible kanban component for forming a board layout with drag and drop, a Vue adaptation of Ettric's Codepen, powered by dragula.

Drag and drop kanban board component demo.

Example

Installation

Add vue-kanban to your Vue project with yarn

yarn add vue-kanban

Usage

Import the plugin globally

import vueKanban from 'vue-kanban'

Vue.use(vueKanban)

Then you can use the component in your project's templates like so

<kanban-board :stages="stages" :blocks="blocks"></kanban-board>

stages and blocks are props, an array of stages for the kanban board and an array of objects that will make up the blocks on the kanban board respectively. They must exist in your data, for example:

data () {
return {
  stages: ['on-hold', 'in-progress', 'needs-review', 'approved'],
  blocks: [
            {
                id: 1,
                status: 'on-hold',
                title: 'Welcome'
            },
            {
                id: 2,
                status: 'on-hold',
                title: 'to'
            },
            {
                id: 3,
                status: 'in-progress',
                title: 'the'
            },
            {
                id: 4,
                status: 'in-progress',
                title: 'danger'
            },
            {
                id: 5,
                status: 'in-progress',
                title: 'zone'
            },
        ...
  ],
}
}

The author has included a scss stylesheet, you can import it in your *.vue file:

<style lang="scss">
@import 'node_modules/vue-kanban/src/assets/kanban.scss';
</style>

You can also edit this file to add your own styles to the board.

Customize the kanban blocks to alter the way the content of each block appears:

<div v-for="block in blocks" :slot="block.id">
        <div>
                <strong>id:</strong> {{ block.id }}
        </div>
        <div>
                {{ block.title }}
        </div>
</div>

Also, the component will emit an event when a block is moved so you can watch for changes. Find more about this project on its GitHub repository.