Vue.js Todo List

August 01, 2020

2 min read

Jumping back in to Vue.js so I decided to start building a pretty and simple To Do list along the way. I've always used Vue inside html and never really explored the 'proper way' of using it with the full CLI and build process. But this time I did. This is built using vue.js Single File Components (SFC) and custom css (no framework), along with some custom CSS Properties.

Currently the data is stored in google firebase so there is data persistence.

It's a pretty basic to do list, but it showed me how powerful Vue is and how important it will be going forward.

Thoughts on Vue

Vue is very pleasant to write.

As someone who likes to write HTML and JavaScript but who also for a long time equated the old habit of 'seperation of concerns' to 'seperation of filetypes', any JavaScript framework or library is a big spanner in the works. For most of the time these three files have lived seperately in my projects: HTML, CSS and JavaScript social distancing just far enough apart.

Now they combine. But Vue is so elegant that this seems the right way of doing things. Regardless of whether you dislike frameworks, or libraries or have an unwavering opinion on how code should be written, it's hard to deny that .vue files with their three sections of code in a single file component is a pretty neat way to do things.