Real-time Kanban board with Vue.js and Hamoni Sync

Peter Mbanugo
Frontend Weekly
Published in
5 min readJun 5, 2018

--

real-time kanban board

A kanban board is a workflow visualization tool that enables you to optimize the flow of your work. In this post, I’ll show you how to build a real-time kanban board in Vue.

To follow along you’ll need to have some knowledge about Vue and its single file component. You’ll also need the following tools:

  1. Node.js & npm (follow this link to download an installer for your OS)
  2. Vue CLI. If you don’t have this, run npm install -g vue-cli in the command line to install it.

If you have no knowledge about Vue, you can read my previous post before continuing with this one.

Setup the project

We’ll set up the project using Vue CLI, which is a simple command line interface (CLI) for scaffolding Vue.js projects. Open the terminal and run vue init webpack-simple realtime-kanban-board. You'll get some prompts, accept the default values by pressing enter and select y when asked if you want to use saas. Before running the command, you can change realtime-kanban-board to your preferred project name. Once this is set up, run the following command to install the dependencies from the scaffolded template:

cd realtime-kanban-board
npm install

--

--

Peter Mbanugo
Frontend Weekly

Software Developer & Writer interested in offline-first. I made Hamoni Sync https://hamoni.tech Email: p.mbanugo@yahoo.com