Vue.js is extremely powerful when it comes to quick dynamic style binding. And therefore, you can generate a random RGB color using Vue.js without using any 3rd party library or…
How to make text editable on click in Vue.js? Example
Sometimes you may want users to be able to edit content or text without having to show an input or text field. This comes useful in situations when some quick…
How to delay a for loop in Vue.js? Example
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…