Top Vue Packages for Adding a Kanban Board and Pagination Buttons

Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at how the best packages for adding a kanban board and adding pagination buttons.

vue-kanban

We can add a kanban board to our Vue app with the vue-kanban component.

The items in the kanban board can be dragged and dropped to different columns according to their status.

To install it, we run:

npm i vue-kanban

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import vueKanban from "vue-kanban";

Vue.use(vueKanban);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

styles.css

ul.drag-list,
ul.drag-inner-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.drag-container {
  max-width: 1000px;
  margin: 20px auto;
}

.drag-list {
  display: flex;
  align-items: flex-start;
}
[@media](http://twitter.com/media "Twitter profile for @media") (max-width: 500px) {
  .drag-list {
    display: block;
  }
}

.drag-column {
  flex: 1;
  margin: 0 10px;
  position: relative;
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
@media (max-width: 500px) {
  .drag-column {
    margin-bottom: 30px;
  }
}
.drag-column h2 {
  font-size: 0.8rem;
  margin: 0;
  text-transform: uppercase;
  font-weight: 600;
}

.drag-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

.drag-inner-list {
  min-height: 50px;
  color: white;
}

.drag-item {
  padding: 10px;
  margin: 10px;
  height: 100px;
  background: gray;
}
.drag-item.is-moving {
  transform: scale(1.5);
  background: lightgray;
}

.drag-header-more {
  cursor: pointer;
}

.drag-options {
  position: absolute;
  top: 44px;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  transform: translateX(100%);
  opacity: 0;
}
.drag-options.active {
  transform: translateX(0);
  opacity: 1;
}
.drag-options-label {
  display: block;
  margin: 0 0 5px 0;
}
.drag-options-label input {
  opacity: 0.6;
}
.drag-options-label span {
  display: inline-block;
  font-weight: 400;
  margin-left: 5px;
}

.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  opacity: 0.8;
  list-style-type: none;
}

.gu-hide {
  display: none !important;
}

.gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

.gu-transit {
  opacity: 0.2;
}

The styles are derived from the starter styles at https://github.com/BrockReece/vue-kanban/blob/master/src/assets/kanban.css.

App.vue

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

<script>
export default {
  data() {
    return {
      stages: ["not-started", "in-progress", "needs-review", "approved"],
      blocks: [
        {
          id: 1,
          status: "not-started",
          title: "Test"
        }
      ]
    };
  }
};
</script>

<style src='./styles.css'>
</style>

We need the CSS to style the kanban board since it comes with no styles.

In App.vue , we pass in the stages which is an array of strings.

blocks is an array of objects with the id , status , and title .

vuejs-paginate

vuejs-paginate is a pagination buttons component.

To install it, we run:

npm i vuejs-paginate

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import Paginate from "vuejs-paginate";
Vue.component("paginate", Paginate);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div>
    <div>page {{pageNum}}</div>
    <paginate
      :page-count="20"
      :click-handler="onClick"
      :prev-text="'Prev'"
      :next-text="'Next'"
      :container-class="'className'"
    ></paginate>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageNum: 0
    };
  },
  methods: {
    onClick(pageNum) {
      this.pageNum = pageNum;
    }
  }
};
</script>

We register the plugin in main.js .

Then we add the paginate component by passing a few props to enable navigation.

page-count has the page count.

click-handler is a function that’s run when a pagination button is clicked.

prev-text has the text for the previous button.

next-text has the text for the next button.

container-class has the class name for the pagination button container.

Now we’ll see a list of buttons that we can click to go to the page we want.

Conclusion

We can use vue-kanban to add a kanban board to our app.

The vuejs-paginate plugin lets us add pagination buttons for anything.