Date and time are some of the most important aspects of any web application (mostly current date and time). It's in fact, almost impossible to create a full application without…
Conditionally / dynamically bind multiple CSS classes in Vue.js | Example
One of the lessor known, yet powerful feature of Vue.js is dynamic binding of classes. Vue.js allows you to dynamically bind multiple CSS classes to a single HTML element. It…
How to generate a random unique file name in Vue.js | Example
There are millions of ways to generate a random name in a JavaScript application. The NPM library is loaded with tons of many such libraries. Most of these libraries are…
How to filter a list based on drop down selection in Vue.js | Example
Dealing with lists is something you cannot avoid no matter the kind of application you're building. With an ever growing list of records, you're often left to deal with filters…
Auto calculate total / price of cart items in Vue.js | Example
Working on an E-commerce app would definitely require you to sum up the card items at some point. While the logic to do that isn't rocket science, many of us…
Build an iOS / iPhone home screen clone in Vue.js
In this article, I'm going to demonstrate how I built an iOS home screen clone using just Vue.js. First, let's have a look at the project structure: Project files And…
How to use a rich text editor in Vue.js. | Example
If <textarea> is not sufficient for you and you're looking for something better, you need a rich text editor. Luckily, Vue.js has plenty of options available if you're looking for…
How to auto lowercase and uppercase input text in Vue.js?
Sometimes doing a simple task (like changing a text to uppercase or lowercase) can turn tedious and take away a large amount of time. Thanks to the watch property of…
Build a WhatsApp chat clone (interface) using Vue.js
One of the best ways to enhance your Vue.js skills, is by trying to imitate interfaces already used by renowned companies. Since those interfaces have been tried and tested by…