Introduction It is often easy to fetch, load, and render a few KBs of Geolocation data on a map. It doesn’t matter what the data is (polygon/lines/points), or what the library of the map is (Google Maps, ESRI, OpenLayers, MapBox, Leaflet). Even if it requires frequent API calls to a remote server, it is fine. […]

In this tutorial, we will see how to check if an element contains a specific CSS class by entering the class name. In the above example, the someElement variable is a reference to the div element in the template with a class of “color-blue”. The checkClassName variable is a string that holds the name of […]

In this tutorial, we’ll learn how we can show the position of a element using the getBoundingClientRect() and display it on the page. Here’s our main App.vue component: First, we initialize two ref objects named targetElement and positionInformation to be null. We’ve used targetElement to reference the div element that we want to get the […]

Being able to render components dynamically is one of the coolest features in Vue.js. What it means is that we can display a component only when we’re able to match the component name by a condition. Consider we have two components named ComponentA and ComponentB. We’ll display only one of these components at a time. […]

Vue is undeniably one of the best JavaScript frameworks to work with. Thanks to its simplicity, learning curve, and modern features, it throws most competitors out of the water in development speed and execution time. I often switch my projects between Vue and React (due to work requirements), and laugh looking at features React is […]

More often than not, we want to update a part of an object (state) without updating the whole object. For example, in the following object (fruit), we may want to increase its weight of it without changing the title and the color: React allows us to have partial object updates without having to reassign the […]

Earlier we saw how we can call a function in the parent component from a child component using an anonymous function in the child component. In this example, we will learn how we can call a function in the parent component with the help of a local function or inner function in the child component. Assume […]

Sometimes we may need to call a function residing in the parent component from the child component. In this example, we have a function named capitalizeTitle() which capitalizes the title passed to it. This function is currently residing in the ParentComponent. We can invoke it using an anonymous function from the child component as follows: In the above […]

React is a very dynamic library by nature. Therefore, there are often multiple ways to attain the same result. Today we’ll see how we can pass objects or values as props to components differently. We have two components named ParentComponent and ChildComponent. We’re going to pass data from the parent to the child component. Using the spread operator […]