Browsed by
Tag: javascript

Provide And Inject in Vue.js

Provide And Inject in Vue.js

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…

Read More Read More

getCurrentInstance in Vue 3

getCurrentInstance in Vue 3

Being developers we all used to work with this reference in programming. In Vue.js 2, this instance is available in option objects. We can access this inside the method, computed, watch and data. But when it comes to Vue.js 3 it is all about composition API. In the composition API we will be using setup to compose or organize our component business logics. Here, this will not be available inside the setup hook. Because the component is not created yet….

Read More Read More

Computed in Vue 3

Computed in Vue 3

Vue.js has six options which are data, props, computed, methods, watch and emits. Among them, we are going to discuss about computed in vue 3 options. We can use this option while creating the components. It will ease the complex component creations and logics. We can write or compose a component logics using computed. In Vue.js 2, we will use computed as a property of SFC’s. But Computed in Vue 3 moved to separate module. So we have to import…

Read More Read More

Setup function in Composition API – Vue 3

Setup function in Composition API – Vue 3

In Vue.js 2, Component objects could have data, computed, methods, and watch options. We will be using these options to write component functional logics. But when our component grows bigger, the functional logic also grows. So we end up to write the same logic in different options. Meaning that, we have to write some parts in the data options, some parts in the methods and others(computed, watch) also. So it will be difficult to understand the component core logics, Since…

Read More Read More

Single File Components Vue 3

Single File Components Vue 3

We have learned about components in Components in Vue3 . Here, the components can be registered using either global or local registration. These syntax are designed to suit small sized projects. But when it comes to large sized projects, below problems may happen, Unique component name for each component Since template type is string, poor look for large size templates Failed to apply syntax highlights for template Html(template string) and JavaScript are placed into component objects where CSS left out….

Read More Read More

Components in Vue 3

Components in Vue 3

As programmers, we all know that reusing logic and source code as much as possible is the best practice. Note that, sometimes we have to write complex HTML ( including style, script ) to render UI and we end up using the same logic multiple times which can turn our pages into a mess. Components in the programming world aim to solve such problems. It aims, Splitting UI into reusable pieces and each piece responsible for a small set of…

Read More Read More

Ref vs Reactive in Vue 3

Ref vs Reactive in Vue 3

Today in the modern world, many JavaScript frameworks having their own reactive engines. Among them Vue’s defined special features is reactive system. The plain JavaScript object changes are tracked and when we modify it, the view gets updated. In Vue the reactive conversion affects all its nested children properties. Ref and Reactive both provides a way to store object data and allow that object to be reactive. So today we are going to discuss how this two helps and plays…

Read More Read More