NextTick is one of the cool feature in the VUE world. In Vue.js, When we change the state, it will not update/affect the DOM instantly or synchronously. Rather It will collect the state changes and do the DOM update once asynchronously no matter how many state changes you have made. NextTick API in Vue.js <script> import { nextTick } from ‘vue’ export default { data() { return { count: 0 } }, methods: { async increment() { this.count++ // DOM…
What is Pinia Pinia is a library store for Vue.js. It will work with Vue.js 3 as well as Vue.js 2. Pinia holds the state and business logic which is not bounded with component object trees. In other words, I would say it creates a global state where everybody can read and write the data. Pinia has three area’s as follows, State Getters Action We can assume and compare these things with data, computed and methods in components. Why Pinia…
Today in the front end world, people are moving to modern JavaScript frameworks rather than hanging with legacy frameworks like jQuery, Google Closure. Among them, React Angular Vue.js are the declarative and component based rich frameworks. These three are perfect and stand by their super features as well. But What you will choose ? That’s the question here. And the answer is, it all depends. Yes, it depends upon your use cases, projects and requirements. Still in struggle to pick…
In the HTML elements, we are having attributes. This attribute provides additional information about elements. Similarly, we are having props as attributes for Components in Vue.js. Props provides additional information about the components. But there is an important difference between HTML elements and Components Props. To clarify, props are reactive and follow one way data flow with its children. Vue.js components require explicit props declaration which it assumes as it’s attributes. Props are declared using the props option, export default…
In addition with default directive, we could also create and use custom directive in Vue.js. If you remember, firstly you can compare these directives with HTML Boolean attributes. Something similar to disabled attribute. The disabled attribute makes HTML element unusable and un-clickable. Ultimately it brings some execution on the elements. Similarly, The custom directive brings some execution on the relevant DOM elements. We can define custom directive as an object containing lifecycle hooks similar to those of a component. Below…
Petite Vue.js is a new one from the Vue.js team which mainly focuses on optimization. It is only 5kb in size. Here the small amount of interactions are only done with HTML elements. So the question is what is this and what it’s for ?. Petite Vue.js is a JavaScript library which creates the DOM based mutates in places. This will deal with the HTML elements directly similar to Alpine.js. It uses Vue.js template and reactivity modules to update the…
In the modern programming world, creating web pages using HTML directly is not very effective. Rather people prefer Components to create HTML web pages. Because the components ease the development, performance and readability. We can divide the web pages into pieces of components. Each Component is responsible for its own business. While we create components, we will go step by step procedure to fulfill its requirements. In Vue.js we can derive this as follows, Data observation template compilation mount the…