You can use the onUpdated lifecycle hook in Vue.js whenever there's been a re-render of the component. A re-render occurs whenever you make some changes to the reactive data you've…
How to use mounted() lifecycle hook in Composition API in Vue.js | Example
Composition API completely revamped the Options API with several improvements and changes. While these changes don't affect the template scope much, we certainly have a lot to deal with what…
How to use watch in Composition API in Vue.js | Example
We can observe any change in a reactive state in Vue.js using the watch property. watch has changed a bit from Options API to Composition API. In Options API, watch…
How to use computed properties in Composition API in Vue.js | Example
Computed properties are great way to cache data. These cache data only change when the reactive properties it depends on changes. Let's have a look at how we can define…
Convert ref() states to reactive() states in Vue.js | Example
ref() creates a reactive object for whatever variable we pass it in. However, it is only preferable if we're dealing with some primitive values. Like strings, numbers, boolean, etc. For…
Convert a component from Options API to Composition API | Vue.js | Vue 3 | Example
Composition API has several advantages over the Options API. I've written an article on what they are. Here in this article, I'm showing an example on how we can convert…
Advantages of using Composition API over Options API in Vue 3 (Vue.js) | Example
Vue 3 came with Composition API, while still keeping support for the Options API. Vue 3 also recommends the use of Composition over Options API. Let's have a look at…
How to validate phone number in Vue.js | Example
You can easily validate a phone number in Vue.js without using any external library. Below I've written a code which you may follow to learn how to do it without…
How to create a draggable grid in Vue.js | Example
We can easily create a draggagle container / calendar grid in Vue.js, thanks to vue-js-grid. To start building the grid, you'd first need to install the npm package. To do…