Components in Vue are reusable custom elements that can be reused in Vue templates throughout the app. In a large scale application, we will come across a situation where we have nested components such as parents and children. In recent work, I faced the challenge of having to reload the child component only. This article will explain the intricacies to the challenge. Looking back, it took me unbelievably long to figure out a solution. Nevertheless, my blog post will provide quick and easy, short, sharp steps to any developer who might be faced with the same challenge. Let’s get started. We can easily scaffold our Vue 3 project using Vite with the following command

<Suspense> is a special component in Vue 3 that lets us wait for some data to be loaded, before our component can be rendered. In other words, Suspense allows us to render some fallback content. A good example will be a loading spinner while waiting for an asynchronous API call to fetch some data from the server. Once the data has been loaded, the main content will show up. This feature allows us to create a smooth user experience. The <script setup> has top-level await, this means that the reactive variable msg won't be shown in the template until the fetch is completed. To improve the user experience, it would be nice if we displayed a loading message before the data has been loaded. This is where Suspense comes handy.

We all know that in JavaScript there is no event that fires when a value of a variable changes. But by defining getters and setters in the object this is now possible. First, define a new property on an object with "Object.defineProperty" method. As a first argument, we pass the object on which to define the property. If the object is defined in the global scope, "this" will refer to the window object. In the second argument, we will define the name of the property. In our case, we define a property with name "name". The third argument is the descriptor for the property being defined.

In this day and age writing reusable components that can be used multiple times in your application or shared between other web platforms can actually save you a lot of time and effort. Web Components offer this benefit and makes it easier to build custom complex components. At the same time, this improves its reusability. Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Think native HTML elements <div>, <section>, <button>, but something that we can create ourselves with encapsulated functionality that can be reused across modern web browsers or any JavaScript library or framework that works with HTML.

If you are new to Vue.JS you might have realised that "this" keyword is used everywhere. Some people might think that "this" keyword is part of the Vue.JS framework