Vue kanban atlas

A Vue.js project

Version: 1.5.2 Updated: 02/06/2021

By: aislan

Downloads Last 30 Days: 27

Install

npm i vue-kanban-atlas
yarn add vue-kanban-atlas

CDNs

bundle.run: https://bundle.run/vue-kanban-atlas

jsDelivr: https://cdn.jsdelivr.net/npm/vue-kanban-atlas

unpkg: https://unpkg.com/vue-kanban-atlas

vue-kanban Build Status npm version

A drag and drop kanban board component

Demo

Installation

Add vue-kanban to your project with npm

npm install vue-kanban

... or yarn

yarn add vue-kanban

Basic Usage

Install the plugin

import vueKanban from 'vue-kanban'

Vue.use(vueKanban)

and then use the component in your project.

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

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
    {
    stages: ['on-hold', 'in-progress', 'needs-review', 'approved'],
    blocks: [
      {
        id: 1,
        status: 'on-hold',
        title: 'Test',
      },
    ],
    }

Receiving Changes

The component will emit an event when a block is moved

<kanban-board :stages="stages" :blocks="blocks" @update-block="updateBlock"></kanban-board>
<script>
...
  methods: {
    updateBlock(id, status) {
      this.blocks.find(b => b.id === Number(id)).status = status;
    },
  },
...
</script>

Add some style

I have included a scss stylesheet in this repo as a starting point that can be used in your project

<style lang="scss">
  @import './assets/kanban.scss';
</style>

Customize the kanban blocks

Each block has a named slot which can be extended from the parent, like so...

<kanban-board :stages="stages" :blocks="blocks" @update-block="updateBlock">
  <div v-for="stage in stages" :slot="stage" :key="stage">
    <h2>{{ stage }}</h2>
  </div>
  <div v-for="block in blocks" :slot="block.id" :key="block.id">
    <div>
      <strong>id:</strong> {{ block.id }}
    </div>
    <div>
      {{ block.title }}
    </div>
  </div>
</kanban-board>

Contributors



aislan
commits
Categories: Vue js
Tags: