https://github.com/BrockReece/vue-kanban
A vue based drag and drop kanban board
https://github.com/BrockReece/vue-kanban
Last synced: 7 months ago
JSON representation
A vue based drag and drop kanban board
- Host: GitHub
- URL: https://github.com/BrockReece/vue-kanban
- Owner: BrockReece
- License: mit
- Created: 2017-05-21T10:22:40.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2025-02-22T16:38:47.000Z (10 months ago)
- Last Synced: 2025-04-13T13:25:44.678Z (8 months ago)
- Language: JavaScript
- Size: 3.12 MB
- Stars: 820
- Watchers: 24
- Forks: 158
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-kanban - A flexible drag and drop kanban board component (Components & Libraries / UI Components)
- awesome-vue-zh - Vue看板 - 灵活的拖放看板板组件 (UI组件 / 杂)
- fucking-awesome-vue - vue-kanban - A flexible drag and drop kanban board component (Components & Libraries / UI Components)
- awesome-vue - vue-kanban - A vue based drag and drop kanban board ` 📝 2 months ago` (UI Components [🔝](#readme))
- awesome-vue - vue-kanban - A flexible drag and drop kanban board component (Components & Libraries / UI Components)
- awesome-vue - vue-kanban ★367 - A flexible drag and drop kanban board component (UI Components / Miscellaneous)
- awesome-vue - vue-kanban - A flexible drag and drop kanban board component (UI Components / Miscellaneous)
README
# vue-kanban [](https://travis-ci.org/BrockReece/vue-kanban) [](https://badge.fury.io/js/vue-kanban)
> A drag and drop kanban board component
### [Demo](https://vue-kanban.netlify.com/)
## Installation
### Vue CLI
You can install this plugin through the [Vue CLI](https://cli.vuejs.org/)
```
vue add vue-cli-plugin-kanban
```
### Manual installation
Add vue-kanban to your project with npm
``` bash
npm install vue-kanban
```
... or yarn
```bash
yarn add vue-kanban
```
Then install the plugin in your entry file
```js
import vueKanban from 'vue-kanban'
Vue.use(vueKanban)
```
## Basic Usage
The `kanban-board` component has been added globally to your project and so can be used in your templates without having to explicitly import it.
```html
```
### Required Props
- **stages**: an array of stages for the kanban board
- **blocks**: an array of objects that will make up the blocks on the kanban board
```js
{
stages: ['on-hold', 'in-progress', 'needs-review', 'approved'],
blocks: [
{
id: 1,
status: 'on-hold',
title: 'Test',
},
],
}
```
### Advanced Props
- **config**: an object of dragula options to be passed to the kanban board, see [dragula docs](https://github.com/bevacqua/dragula#dragulacontainers-options) for more details
- **state-machine-config**: an xstate config object that can be used to manage the kanban board, read [here](#state-machine) for more details
```js
{
config: {
// Don't allow blocks to be moved out of the approved stage
accepts(block, target, source) {
return source.dataset.status !== 'approved',
}
}
}
```
### Receiving Changes
The component will emit an event when a block is moved
```html
...
methods: {
updateBlock(id, status) {
this.blocks.find(b => b.id === Number(id)).status = status;
},
},
...
```
## Add some style
I have included a scss stylesheet in this repo as a starting point that can be used in your project
```html
@import './assets/kanban.scss';
```
### Customize the kanban blocks
Each block has a named slot which can be extended from the parent, like so...
```html
{{ stage }}
id: {{ block.id }}
{{ block.title }}
```
### State machine
Vue-kanban is now compatible with [xstate](https://xstate.js.org/docs/) state machines.
You can pass an xstate config as a prop and the Kanban board will use the state machine to restrict which moves are allowed.
As an example we can achieve the following workflow
With the following config
```js
stateMachineConfig: {
id: 'kanban',
initial: 'on-hold',
states: {
'on-hold': {
on: {
PICK_UP: 'in-progress',
},
},
'in-progress': {
on: {
RELINQUISH_TASK: 'on-hold',
PUSH_TO_QA: 'needs-review',
},
},
'needs-review': {
on: {
REQUEST_CHANGE: 'in-progress',
PASS_QA: 'approved',
},
},
approved: {
type: 'final',
},
},
},
```