Quick tools with VueJS

Before: Tools with Excel

I used to write down the total number of tasks in a row in Excel and add a row for my done tasks. I would add a ratio row and do the math to see my progress.

That setup is flexible and worked pretty well, but it looked boring. Well, just like an Excel sheet looks like.

Excel tool

I need to confess that visuals make a huge motivation difference for me.

After: Tools with JS, CSS, LocalStorage

That is why I need a good toolbox for creating helpers that are…

The modern web universe has such tools:

Here is how my little example task progress tracker looks like using these tools:

VueJS Todo Counter

Let me do a quick tour of the feature that I use frequently to build tools like this task tracker:

The actual power comes from a few lines of JavaScript. Let me explain with inline comments

var app = new Vue({},
computed: { /* Calculate the ratio */
    ratio: function() {
        return Math.floor(this.tasks.done / this.tasks.total * 100) + '%'
    }
},
watch: { /* Observe changes and write to LocalStorage */
    tasks: {
        handler() {
            console.log('Tasks changed');
            localStorage.setItem('tasks', JSON.stringify(this.tasks));
        },
        deep: true,
    }
},
mounted() { /* Load values from LocalStorage and load */
    console.log('App mounted');
    if (localStorage.getItem('tasks')) this.tasks = JSON.parse(localStorage.getItem('tasks'));
}
})

Write endless simple tools with this setup

The combination of the three technologies (HTML + CSS Framework, JavaScript, LocalStorage) makes it super easy to create simple yet flexible and beautiful tools.

Other tools that I built the same way:

There are endless opportunities to create flexible and good-looking tools for your specific needs in very little time!

Here is the source for the todo tracking tool

Send me your feedback on
"Quick tools with VueJS"

February 25, 2018 • Last updated: January 12, 2019

tech