Vuejs is a powerful javascript framework
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…
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…
Creating the web pages using components is a good idea. So that we can re-use the logic and structure of the design. We have to make a component hierarchy or tree to make the UI better. In Vue.js we are using template string or render function to build the HTML DOM in the components. The Vue compiler will compile it and make the div elements for us However, sometimes logically, we need one component which could be a child to…
Nowadays, web developers prefer components to build the web pages effectively. Splitting the UI into reusable pieces is the goal of component creation. Each component will render specific predefined HTML design. There is no problem when the component is static. But sometimes based on condition or scenario, we have to render different components dynamically. To achieve this without using routing, Vue.js provides a special feature for us – Dynamic Components. Let’s take a deep dive to understand it clearly. If you…
Sometimes while creating components, we need to access its child components or child HTML elements directly in the JavaScript. Though we are having props and events for creating communication with child components, Vue.js provides the special attribute ref. We can create a reference variable using the ref attribute for child components/elements. During the virtual DOM mounting process, if the V-Node(HTML element or child component) has a ref attribute then the respected element or component instance will be stored under 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…
Provide and Inject are the advanced concepts of Vue.js Components module. It’s not mostly needed for small structured components. But imagine if the structures are deeply nested. Then we are in need to pass data from parent to innermost child component. It’s a completely difficult situation right now. To solve this problem, Vue.js introduced Provide and Inject concepts. Here the parent component provides the dependency to all its children irrespective of how long the component hierarchy is. As the name…