Skip to main content

Vue.js Todo List.

Building a To Do list with vue.js

Featured image

Revisiting Vue

Jumping back into 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 'separation of concerns' to 'separation of filetypes', any JavaScript framework or library is a big spanner in the works. For most of the time these three files have lived separately 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.