DEV Community

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

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

Peter Mbanugo on May 28, 2018

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 re...
Collapse
 
zasuh_ profile image
Žane Suhadolnik

Awesome article!

I've been learning Vue myself and am a little confused by the fact why no one is using separate JS files and just includes everything with tags. Or was that just for the purpose of the tutorial?

Collapse
 
pmbanugo profile image
Peter Mbanugo

I don't think it's everyone. It depends on preference but it seems Vue is more of the opinion of having them in one file.

You can read about it here: vuejs.org/v2/guide/single-file-com...

Collapse
 
pavonz profile image
Andrea Pavoni

I'm using Vue since 2 years now. The single file component is very useful to wrap all the specific things you need for a component in a single place.

Of course you'll surely have a main CSS/JS library/framework/whatever (Bootstrap, Bulma, ...) for the generic things, but when you need some specific piece of CSS to style a component it's a lot better to put it in the single Vue file.

Last but not least, the main editors out there all have at least one plugin to handle single-file Vue components correctly (mainly it's all about syntax highlighting)

Collapse
 
ben profile image
Ben Halpern

Very nice

Collapse
 
berns_churches profile image
Berns Fire Death

This is awesome, I can't wait to do this when I get some time this weekend!

Collapse
 
wltprgm profile image
XF

I find that DEV.to is really pushing itself to the public to be the next Medium.com for tutorial publishing, constantly sending my email about quality contents

Collapse
 
iwi4a profile image
Ivelin Iliev • Edited

Really nice and fun tutorial, thank you!

P.S. If I am not mistaken, I think there is a tiny issue which breaks the code. Please, remove the following quotes:

this.listPrimitive.update(id, { id, title: "block.title, status });"

Collapse
 
pmbanugo profile image
Peter Mbanugo

I don't see that when I'm editing. I've removed and replaced the semi-colon but that still shows up