There can be times when you want an asynchronous function or event to wait and finish within a loop. But at the same time, you cannot break or stop the…
Create GMaps editable polygons with toggle for Editable and Draggable | Vue.js
A few days ago, I showed how to create truly editable Google Maps polygons by updating the coordinates. In this tutorial, I'll show you how to toggle the edit options…
How to embed a YouTube video and use controls in Vue.js | Example
YouTube allows iframes to be used for embedding their videos in your web page. But those iframes come with the limitations of not having direct controls / event listeners. Vue.js…
Create editable polygons in Google Maps JavaScript API in Vue.js | Example
Creating an editable and draggable polygon in Google Maps can be achieved after a bit of tweaking. The internet is flooded with multiple tutorials and articles on how to do…
How to change / manipulate an SVG fill color using Vue.js | Example
Vue.js has this amazing power to manipulate the attributes of an SVG file directly without any aid. While other flux-based frameworks often require support of external libraries, Vue doesn't. In…
Apply filters on image using CSS in Vue.js | Example
Gone are the days when you had to do image processing and manipulation to apply a filter to an image (image filter). The CSS filter property can create almost any…
Create a custom progress bar / loader using CSS in Vue.js | Example
Almost every UI library or CSS framework provides some sort of loaders. Most of these loaders are uncontrolled. That is, you cannot actually show the real progress of a task…
How to get current date time in realtime in Vue.js | Example
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…