This article is not maintained any longer and likely not up to date. DuckDuckGo might help you find an alternative.

Quick tool generation with VueJS, Tailwind CSS and LocalStorage

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.

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

Category: Tech

Created: 2018-02-25, Last Updated: 2021-05-02

Did this help you?