NextTick API in Vue.js

<script>
import { nextTick } from 'vue'

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    async increment() {
      this.count++

      // DOM not yet updated
      console.log(document.getElementById('counter').textContent) // 0
    }
  }
}
</script>

<template>
  <button id="counter" @click="increment">{{ count }}</button>
</template>

In the above program, we are changing the state of count by doing count++. But this will not update the DOM instantly rather the vue.js frameworks collects this information in the backend. After the whole execution of increment() method, It will update the DOM asynchronously.

But the problem is document.getElementById('counter').textContent) returns 0 in the increment() method. so if someone wants to use DOM element immediately, which is not possible in Vue.js directly. That’s where we have to use nextTick global API. nextTick allows you to execute code after you have changed some data and Vue.js has updated the virtual DOM based on your data change, but before the browser has rendered that change on the page.

We can pass the callback function to the nextTick(callback(){}) which can be triggered after the successful DOM update. You can either pass a callback as an argument, or await the returned Promise.

import { nextTick } from 'vue'

export default {
  methods: {
    increment() {
      this.count++
      nextTick(() => {
        // access updated DOM
      })
    }
  }
}

Why Not SetTimeout ?

Some people would think, why not setTimeOut!. We can also use setTimeOut But the problem is When you invoke setTimeout…

setTimeout(function() { 
    // access updated DOM
}, 100);

then the browser would have a chance to update the page, and then your callback would get called. So the UI will render the old record first and then the new record will come. It’s not look good right. But with the help of nextTick() we can change the DOM value before being render into the screen. That’s the beauty of this API in Vue.js

Summary

nextTick() can be used immediately after a state change to wait for the DOM updates to complete. We should not use setTimeOutto update the DOM rather should prefer nextTick()

The post When to use NextTick API in Vue.js appeared first on Program Easily.

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,

1. State
2. Getters
3. Action

We can assume and compare these things with data, computed and methods in components.

Why Pinia (A Store)

Store will have the data that can be used everywhere in our application. Meanwhile we should avoid the local data in the store which can be added in the component instead. Pinia is a choice if your application needs to access the global state values.

Features of Pinia

• Hot module replacement
  • Modify your stores without reloading your page
  • Keep any existing state while developing
• Plugins: extend Pinia features with plugins
• Proper TypeScript support or autocompletion for JS users
• Server Side Rendering Support
• Devtools support
  • A timeline to track actions, mutations
  • Stores appear in components where they are used
  • Time travel and easier debugging

Full Tutorial

Installations

You can install pinia with the help of NPM or Yarn as follows,

npm install pinia
or
yarn add pinia

Inject Pinia with CreateApp

Here we are going to have only one store for the application. So we have to create its instance and inject the same in VUE createApp. You can call it a root store.

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

So what createPinia does here ?. It creates the entity which holds the state for our application. And It’s global state where one can read and write as well. It has three concepts or property’s

1. state
2. getters
3. actions

(You can assume this three components with data, computed and methods)

Create the Store

First we need to create the store template. We can create a store template using defineStore() and it requires a unique name. We may use this template across our application.

import { defineStore } from 'pinia'

// useStore could be anything like useUser, useCart
// the first argument is a unique id of the store across your application
export const useStore = defineStore('main', {
  // other options...
})

Second we need to use this store template inside the setup() function so that it will create the store. We have to call useStore() as follows,

import { useStore } from '@/stores/counter'

export default {
  setup() {
    const store = useStore()

    return {
      // you can return the whole store instance to use it in the template
      store,
    }
  },
}

Once the store is created you can access its properties like state, getters and actions.

State

The state is the heart of the system. It is a function that returns the initial state of the application.

import { defineStore } from 'pinia'

const useStore = defineStore('storeId', {
  // arrow function recommended for full type inference
  state: () => {
    return {
      // all these properties will have their type inferred automatically
      counter: 0,
      name: 'Eduardo',
      isAdmin: true,
    }
  },
})

We can access the store to read and write its data through store instance, and we can reset it to the initial state as well

const store = useStore()

store.counter++

store.$reset()

Getter

We can define the getters property in defineStore() template. I would say, it is a replacement for computed values.

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    // automatically infers the return type as a number
    doubleCount(state) {
      return state.counter * 2
    },
    // the return type **must** be explicitly set
    doublePlusOne(): number {
      // autocompletion and typings for the whole store 
      return this.doubleCount + 1
    },
  },
})

Then we can access and use the getters inside the template as follows,

<template>
  <p>Double count is {{ store.doubleCount }}</p>
</template>

<script>
export default {
  setup() {
    const store = useStore()

    return { store }
  },
}
</script>

Actions

Actions are the replacement for the methods. We can add our actions in the defineStore() template. Unlike getters, we can write asynchronous operations inside action. It will useful for creating API calls for our business logic

import { mande } from 'mande'

const api = mande('/api/users')

export const useUsers = defineStore('users', {
  state: () => ({
    userData: null,
    // ...
  }),

  actions: {
    async registerUser(login, password) {
      try {
        this.userData = await api.post({ login, password })
        showTooltip(`Welcome back ${this.userData.name}!`)
      } catch (error) {
        showTooltip(error)
        // let the form component display the error
        return error
      }
    },
  },
})

Summary

• Pinia is a store library for Vue, it allows you to share a state across components/pages.
• Compared to Vuex, Pinia provides a simpler API with less ceremony, offers Composition-API-style APIs, and most importantly, has solid type inference support when used with TypeScript.
• The formula is Create the template -> create the store with state, getters and actions and use across the application.

The post Pinia – The Vue Store Library appeared first on Program Easily.

export default {
  props: ['foo'],
  created() {
    // props are exposed on `this`
    console.log(this.foo)
  }
}

Let’s take a deep dive into that with this post. If you are not familiar with Vue.js components, You should read Components in Vue 3  first.

One way data flow – Props in Vue 3

Props follows one way data flow with it’s child component property. As a result, when we update the value of parent props, it will flow down and update the child property as well. At the same time it will not do vice versa. If you want to update the component state, the flow should start from the parent and all props in the child component will be refreshed with the latest value. We are having event emit concept to reverse back from child to parent in Vue.js.

export default {
  props: ['foo'],
  created() {
    // ❌ warning, props are readonly!
    this.foo = 'bar'
  }
}

Suppose if you want to change the prop in the child component based on business scenario, you can transform the same using computed in Vue.js

export default {
  props: ['size'],
  computed: {
    // computed property that auto-updates when the prop changes
    normalizedSize() {
      return this.size.trim().toLowerCase()
    }
  }
}

Note

However, when passing arrays and objects as props, Vue.js will not prevent mutation of it’s nested properties. Because objects and arrays are passed by reference. Firstly, you should avoid such mutations as a best practice. Secondly, if you need this scenario in-deed, the child can emit an event and the parent listens to it and performs the mutation.

Static and Dynamic Props

The static props are nothing but just assign the static values like below,

<Blog title="I am a static prop example" />

You can also assign dynamic values to props with the help of  v-bind or its : like below

<!-- Dynamically assign the value of a variable -->
<Blog v-bind:title="post.title"></Blog>
// OR
<Blog :title="post.title" </Blog>

Passing other different values to prop

We can pass Numbers, Boolean, Arrays as well as Object to a props value.

// Number
<!-- Even though `42` is static, we need v-bind to tell Vue that -->
<!-- this is a JavaScript expression rather than a string.  -->
<Blog :likes="42" />

<!-- Dynamically assign to the value of a variable. -->
<Blog :likes="post.likes" />

// Boolean
<!-- Including the prop with no value will imply `true`. -->
<Blog is-published />

<!-- this is a JavaScript expression rather than a string. -->
<Blog :is-published="false" />

<!-- Dynamically assign to the value of a variable. -->
<Blog :is-published="post.isPublished" />

// Array
<!-- this is a JavaScript expression rather than a string. -->
<Blog :comment-ids="[234, 266, 273]" />

<!-- Dynamically assign to the value of a variable. -->
<Blog :comment-ids="post.commentIds" />

// Object
<!-- this is a JavaScript expression rather than a string. -->
<Blog
  :author="{
    name: 'Veronica',
    company: 'Veridian Dynamics'
  }"
 />

<!-- Dynamically assign to the value of a variable. -->
<Blog :author="post.author" />

Validation – Props in Vue 3

There are three ways of prop validations available in Vue.js. If the validation fails, then Vue.js will warn us in the browser’s JavaScript console. This is really needed to define the component and the application developers are aware of the intention of the component as well.

1. Type validation
2. Mandatory or not (Required)
3. Custom validator

export default {
  props: {
    // 1. Type Validation
    //  (`null` and `undefined` values will allow any type)
    propA: Number,
    // Multiple possible types
    propB: [String, Number],
    // 2. Mandatory validation with default value
    propC: {
      type: String,
      required: true,
      default: "Hello"
    },
    // 3. Custom validator
    propF: {
      validator(value) {
        // The value must match one of these strings
        return ['success', 'warning', 'danger'].includes(value)
      }
    }
  }
}

In setup Hook – Props in Vue 3

The setup function is the entry point of the Composition API in Vue.js. The first argument of the setup function is the props argument. Props inside the setup function are reactive by nature.

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}

If you destructor the props object, it will lose the reactivity. So we should avoid changing the props object there. But if you really need to destructor the props, you can go for toRefs() and toRef() API.

import { toRefs } from 'vue'

export default {
  setup(props) {
    // turn `props` into an object of refs, then destructure
    const { title } = toRefs(props)
    // `title` is a ref that tracks `props.title`
    console.log(title.value)

    // OR, turn a single property on `props` into a ref
    const title = toRef(props, 'title')
  }
}

Special Feature – Boolean Casting

When we use Boolean props , it has a special casting rule. It is similar to the native Boolean attribute in any programming language. Let me show you with below example,

<!-- equivalent of passing :disabled="true" -->
<MyComponent disabled />

<!-- equivalent of passing :disabled="false" -->
<MyComponent />

// The casting rules for Boolean will apply regardless of type appearance order for below example as well
export default {
  props: {
    disabled: [Boolean, Number]
  }
}

Name Casing in Props

When we declare props in Vue.js we have to follow camelCase. It will avoid to use quotes when we dealing them as property keys, and makes as valid JavaScript identifiers.

export default {
  props: {
    greetingMessage: String
  }
}
// using the “Mustache” syntax (double curly braces)
<span>{{ greetingMessage }}</span>

So when we pass the props values to the child component , we can use camelCase. But Here the convention is kebab-case similar to the one below.

<MyComponent greeting-message="hello" />

Summary

In Conclusion,

• Firstly, we are having props as attributes for Components in Vue.js. Props provides additional information about the components.
• Secondly, props follows one way data flow with it’s child component property. When we update the value of parent props, it will flow down and update the child property as well. At the same time it will not vice versa.
• In Vue.js 3, The first argument of the setup function is the props argument. Props inside the setup function are reactive by nature.

The post Props in Vue 3 appeared first on Program Easily.

const focus = {
  mounted: (el) => el.focus()
}

export default {
  directives: {
    // enables v-focus in template
    focus
  }
}

We can use above directive in the template like below,

<input v-focus />

This is a simple example, we can do lot more with this directives. But, here it will focus the input element assuming you haven’t clicked elsewhere on the page. Let’s take the deep dive into it.

Global Directive Registration

In the above example, we are using local registration. In addition, similar to components, we can globally register custom directives in the application instance. So that we can use the directives through out the application in the templates.

const app = createApp({})

// make v-focus usable in all components
app.directive('focus', {
  /* ... */
})

However, we can prefer to use custom directives only when the desired functionality can only be achieved via direct DOM manipulation. Otherwise we could use v-bind because they are more efficient and server-rendering friendly.

Custom Directives in Vue 3 – Hooks

The directive object is providing lot of optional hook functions. For Instance, we would use this hooks to manipulate the DOM, read the old value, component instance and vnode representation as well.

const myDir = {
  // called before bound element's attributes
  // or event listeners are applied
  created(el, binding, vnode, prevVnode) {
    // see below for details on arguments
  },
  // called right before the element is inserted into the DOM.
  beforeMount() {},
  // called when the bound element's parent component
  // and all its children are mounted.
  mounted() {},
  // called before the parent component is updated
  beforeUpdate() {},
  // called after the parent component and
  // all of its children have updated
  updated() {},
  // called before the parent component is unmounted
  beforeUnmount() {},
  // called when the parent component is unmounted
  unmounted() {}
  }
}

Hook Arguments

• el – We can use el to manipulate the DOM
• binding – it is an object having lot of properties
  • value – the value of the directive. Example, v-my-directive=”VALUE”
  • oldValue – the old value of the directive. only available in beforeUpdate and updated
  • arg – the argument of the directive. Example, v-my-directive:foo
  • instance – the instance of the component
  • dir – the definition object of directive
  • modifiers – the modifier object. Example v-my-directive:foo:bar. Here  the modifiers object would be { foo: true, bar: true }
• vnode – The V Node representation of the element
• prevNode – The element of previous render. Only available in the beforeUpdate and updated hooks

Consider the below example,

<div v-example:foo.bar="baz">

// we can represent above directive as below object

{
  arg: 'foo',
  modifiers: { bar: true },
  value: /* value of `baz` */,
  oldValue: /* value of `baz` from previous update */
}

// binding value as JavaScript object literal

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

app.directive('demo', (el, binding) => {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text) // => "hello!"
}

Dynamic Argument in Directives

We can also pass dynamic argument to the directives. This is one of the special feature of directive. For example,

<div v-example:[arg]="value"></div>

// Here the directive argument will be reactively updated 
   based on arg property in our component state.

Most important this here is , other than el, we should not modify other read-only properties. If you want so, you can follow this dataset

Function Shorthand

If we wants only mounted and updated behavior of custom directives, then we can use function shorthand there.

<div v-color="color"></div>

app.directive('color', (el, binding) => {
  // this will be called for both `mounted` and `updated`
  el.style.color = binding.value
})

Custom Directives in Vue 3 – on Component

As similar to DOM elements, we can use custom directives on component as well. Here It will apply to a component root element. Note that, sometimes the component may have more than one root node. If so, it will ignore the directives and a warning will be shown. Above all, it is not preferable to use custom directives on component.

<MyComponent v-demo="test" />

<!-- template of MyComponent -->

<div> <!-- v-demo directive will be applied here -->
  <span>My component content</span>
</div>

With Directives

In Addition, we can apply custom directives to v-node using withDirectives as follows,

import { h, withDirectives } from 'vue'

// a custom directive
const pin = {
  mounted() { /* ... */ },
  updated() { /* ... */ }
}

// <div v-pin:top.animate="200"></div>
const vnode = withDirectives(h('div'), [
  [pin, 200, 'top', { animate: true }]
])

Summary

In Conclusion,

• Firstly, the custom directive brings some execution on the elements. We can define custom directive as an object containing lifecycle hooks similar to those of a component.
• Use custom directives only when the desired functionality can only be achieved via direct DOM manipulation.
• You would pass dynamic argument to the directives. This is one of the special feature of directive.

References

• https://vuejs.org/guide/reusability/custom-directives.html#introduction
• https://vuejs.org/guide/extras/render-function.html#custom-directives

The post Custom Directives in Vue 3 appeared first on Program Easily.

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 parent component’s $refs. Let’s take a deep dive into this with an example. Read Components in Vue3 and Single File Components Vue 3 if you are new to Vue.js components.

Template Refs in Vue.js

We can use ref to create the reference for the element or child component. If ref is used on the HTML DOM element then the reference is mapped to the respected element. If ref is used on the child component, then the reference is mapped to the component instance. The parent component $refs object, stores the ref reference.

• Attribute Name : ref
• Expects : string or function
• Example : <input ref=”inputId” />

Example

<!-- vm.$refs.p will be the HTML DOM element  -->
<p ref="p">hello to program easily</p>

<!-- vm.$refs.child will be the child component instance -->
<child-component ref="child"></child-component>

<!-- When bound dynamically, we can define ref as a callback function, 
passing the element or component instance explicitly -->
<child-component :ref="(el) => child = el"></child-component>

However ref registration timing is very important. Firstly these processes are done after the component render operation. So we can not access it on the initial render. Secondly we can not use $refs inside the template and data binding since it is not reactive. Now we are going to create the base-input component and use ref as follows,

In the above example, we need to call the updateInput method in the onMounted hook. Here the input element is available. We can access them using this.$refs.input. We have to add the input-comp in the index.html like below.

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/vue@next"></script>
  </head>

  <body>
    <div id="app">
      <input-comp />
    </div>

    <script src="src/index.js"></script>
  </body>
</html>

Template Refs in Vue.js – Composition API

We can integrate the two concepts Template Refs and Reactive Refs in the Composition API. Generally we are using $refs to access the component instance/element. But here we can access the component instance/element with the help of reactive ref.

<template>
  <div ref="root">Welcome to ProgramEasily</div>
</template>

<script>
  import { ref, onMounted } from 'vue';

  export default {
    setup() {
      const root = ref(null);

      onMounted(() => {
        // the DOM element will be assigned to the ref after initial render
        console.log(root.value) // <div>Welcome to ProgramEasily </div>
      });

      return {
        root
      }
    }
  }
</script>

In the above example, root is the reactive ref object which returned from the setup function. During the Virtual DOM mount operation, if the V-Node key matches with the ref of the render context, then the component instance/element is assigned to the value of the ref. In detail here,

• V-Node : <div ref=”root”>Welcome to ProgramEasily</div>
• V-Node key : root (ref=”root”)
• ref of the render context : i.e. return from the setup function(const root = ref(null))

Indeed, V-Node key root matches with ref of the render context. So we can access the element after the initial render. We can get the element in the onMounted Lifecycle hook like in the example.

Template Refs – Watching

watch and watchEffect are run before the onMounted Lifecycle hook. But the DOM element will be available in the mounted phase. The result is template ref element not available on the watch operation. Refer the below example, here the root.value is null.

<template>
  <div ref="root">Welcome to ProgramEasily</div>
</template>

<script>
  import { ref, watchEffect } from 'vue';

  export default {
    setup() {
      const root = ref(null);

      watchEffect(() => {
        // called before the DOM is mounted or updated
        console.log(root.value) // => null
      })

      return {
        root
      }
    }
  }
</script>

To solve this problem, Vue.js provides another option flush: 'post. This will execute the watch effect after the DOM element mount/update operation. So that the V-Node key root matches with ref of the render context and we can get the result as follows,

<template>
  <div ref="root">Welcome to ProgramEasily</div>
</template>

<script>
  import { ref, watchEffect } from 'vue';

  export default {
    setup() {
      const root = ref(null);

      watchEffect(() => {
        console.log(root.value) // => <div>...</div>
      }, 
      {
        flush: 'post'
      });

      return {
        root
      }
    }
  }
</script>

References

• https://v3.vuejs.org/guide/component-template-refs.html
• https://v3.vuejs.org/guide/composition-api-template-refs.html#template-refs
• https://v3.vuejs.org/api/special-attributes.html#ref

Summary

• Template refs used to create the references for the element or child component.
• The parent component $refs object, stores the ref reference.
• In the Composition API, Template refs matched to Reactive refs in the Virtual DOM mount operation.
• When we watch Template refs, we have to add flush: 'post to watch the ref after the DOM updated.

The post Template Refs in Vue.js appeared first on Program Easily.

While we create components, we will go step by step procedure to fulfill its requirements. In Vue.js we can derive this as follows,

1. Data observation
2. template compilation
3. mount the component instance to DOM
4. update the DOM based on data

Between the steps, Vue.js provides a predefined function called Life Cycle Hooks. We can add our own logics by calling these life cycle hooks in between the component creations. It will be very helpful to know about Components in Vue3 before moving to this session. Let’s take the deep dive!

Lifecycle hooks in Vue 3

For Example, As per the component creation flow, the created hook will be called after the component instance is created.

Vue.createApp({
  data() {
    return { state: "hello to lifecycle hooks" }
  },
  created() {
    // `this` points to the vm instance
    console.log(this.state) // => hello to lifecycle hooks
  }
})

As shown above, we can use other hooks which are used to be called at different stages of component creation.

Options API vs Composition API

Above all, we can access lifecycle hooks in both options API and composition API. We have to invoke life cycle methods inside the setup function in the Composition API. Option API is available in both Vue.js 2 and 3 whereas composition API is available from Vue.js 3.

Most importantly, beforeCreate and created are not available in composition API. However, we can write it’s logic directly in the setup function since setup is invoked around the created hook.

Note

In Optional API, all lifecycle hooks have this context bound to the instance. So we should not go for arrow functions (e.g. created: () => this.createdCallBack()) since arrow functions bind the parent context to this.

Lifecycle hooks – Options API

• beforeCreate – called after the component instance has been initialized but before data observation.
• created – called after the component instance has been created. Since instance is created we can set up data observation, computed properties, methods, watch/event callbacks. But we can not do DOM operation since the component is not mounted. The $el property is also not available yet.
• beforeMount – called just before the component mounting process.
• mounted – This is an important hook after created hook in the options API. mounted called after the component instance has been mounted. If the root component instance is mounted, then vm.$el will be there in the DOM. But it does not guarantee that all child components have also been mounted.
• beforeUpdate – called at run time when data changes before the DOM is updated. It is a good place to remove manually added event listeners.
• updated – called at runtime after the data changes and DOM patched.
• beforeUnMount – called before a component instance is unmounted.
• unmounted – called after a component instance has been unmounted.
• errorCaptured – called when an error occurs from any child component.
• renderTracked – called when virtual DOM rerender tracked.
• renderTriggered – called when virtual DOM rerender triggered.

Lifecycle hooks Vue 3 Example

Life cycle hooks provide the ways to add their logic at specific stages while creating the components. Moreover in Vue.js 3, they are tree-shakable modules. You can import and use them in your composable logics.

import { onMounted } from "vue";

As shown above, we can get the lifecycle hooks  and use them in our logics at different stages. The full example for all lifecycle hooks shown below,

<template>
  <div>
    <button v-on:click="addToCart">Add to cart</button>
    <p>Cart{{ state }}</p>
  </div>
</template>

<script>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onErrorCaptured,
  onRenderTracked,
  onRenderTriggered,
  ref,
} from "vue";

export default {
  setup() {
    onBeforeMount(() => {
      console.log("Component is onBeforeMount!");
    });
    onMounted(() => {
      console.log("Component is mounted!");
    });
    onBeforeUpdate(() => {
      console.log("Component is onBeforeUpdate!");
    });
    onUpdated(() => {
      console.log("Component is Updated!");
    });
    onBeforeUnmount(() => {
      console.log("Component is onBeforeUnmount!");
    });
    onUnmounted(() => {
      console.log("Component is un mounted!");
    });
    onErrorCaptured(() => {});
    onRenderTracked(({ key, target, type }) => {
      console.log("onRenderTriggered!")
      console.log({ key, target, type });
      /* This will be logged when component is rendered for the first time:
    {
      key: "cart",
      target: {
        cart: 0
      },
      type: "get"
    }
    */
    });
    onRenderTriggered(({ key, target, type }) => {
      console.log("onRenderTriggered!")
      console.log({ key, target, type });
      /* This will be logged when component is rendered for the first time:
    {
      key: "cart",
      target: {
        cart: 0
      },
      type: "get"
    }
    */
    });

    let state = ref(0);
    const addToCart = () => {
      state.value += 1;
    };
    return {
      state,
      addToCart,
    };
  },
};
</script>

<style scoped></style>

GitHub Link :

• https://github.com/programeasily/vue-3-basics/blob/main/src/components/HooksExampleComponent.vue

References :

1. https://v3.vuejs.org/guide/instance.html#lifecycle-hooks
2. https://v3.vuejs.org/api/options-lifecycle-hooks.html#lifecycle-hooks
3. https://v3.vuejs.org/guide/composition-api-lifecycle-hooks.html

Summary

In conclusion,

• Firstly vue.js provides predefined function called Life Cycle Hooks.
• Secondly we can access lifecycle hooks in both options API and composition API.
• Life cycle hooks provide the way to add their logics at specific stages while creating the components.

The post Lifecycle hooks in Vue 3 appeared first on Program Easily.

So Vue.js 3 provides the getCurrentInstance function for us. Using getCurrentInstance, we can access component instance inside the setup hook. It will be available inside Lifecycle Hooks also. Let’s take a deep dive!.

getCurrentInstance in Vue 3

In short, we can use getCurrentInstance to get component instances. This is the replacement of this in Vue.js 2. It will be very useful for custom Vue.js library authors and advanced developers for construction of complex components. Let me explain it with an example below.

Setup function Example

import { getCurrentInstance } from "vue";
export default {
  setup() {
    // accessible inside setup function
    const instance = getCurrentInstance();
    console.log(instance);
  },
};

Note that, getCurrentInstance won’t work outside of setup function and lifecycle hooks. If you want to access it call getCurrentInstance in the setup function and use the reference as follows,

import { getCurrentInstance } from "vue";
export default {
  setup() {
    // accessible inside setup function
    const instance = getCurrentInstance();
    
    const eventCallback = () => {
        getCurrentInstance(); // won't work here
        console.log(instance); // But you can use instance reference here
    }
    return {
        eventCallback
    }
  },
};

Lifecycle hook example

import { getCurrentInstance, onMounted, onUpdated, onUnmounted } from "vue";
export default {
  setup() {
    // Accessible in All lifecycle methods
    onMounted(() => {
      let instance = getCurrentInstance();
      console.log(instance);
      console.log("mounted!");
    });
    onUpdated(() => {
      let instance = getCurrentInstance();
      console.log(instance);
      console.log("updated!");
    });
    onUnmounted(() => {
      let instance = getCurrentInstance();
      console.log(instance);
      console.log("unmounted!");
    });
    return {};
  },
};

Note that, it will be accessible on composable function, when we call from setup function.

Real Time Example – getCurrentInstance Vue 3

Meanwhile, you may wonder why I need getCurrentInstance?. We can create a component using props, data and other Utilities. But when component logic increases or for a library creator, they need one component instance in another place. This is the case where we can use getCurrentInstance. Using getCurrentInsance we can access below things,

• appContext.config.globalProperties – get the global properties
• proxy – get the reactive proxy object of the component. By using this, we can change the reactive data
• props – get all the props of component
• emit – can be used to dispatch the events
• vnode.el – the DOM element
• refs – if ref is used in the child component, we can get all instance of child component using refs
• and much more!. just console.log it, and we can see the same.

So in the below example, we are storing a proxy object reference with the help of getCurrentInstance. By using this object we can change respected component reactive data and invoke it’s methods.

Firstly in the Button.vue file we are storing a proxy object with the help of getCurrentInstance as follows.

// getCurrentInstance accessible on a composable function
// But it should be called inside setup function
const useBase = function (props) {
  onMounted(() => {
    let instance = getCurrentInstance();
    // Component instance stored in a global store.
    store.setInstance(props.id, instance.proxy);
  });
};

Secondly we are using store.js to store the getCurrentInstance proxy object as follows,

const store = {}
/**
 * A Global Store for component instances
 * Note that id should be unique
 */
export default {
    setInstance(id,proxy){
        store[id] = proxy;
    },
    getInstance(id){
        return store[id];
    }
}

Further, In the GetCurrentInstanceDemo.vue file, we get the stored proxy object of the button component using unique id. By using this reference, we can invoke it’s methods as follows,

const onMouseover = () => {
     // Here we can access Button component instance
    // And invoke it's methods using proxy object
     store.getInstance("btn").hide();
}
const onMouseleave = () => {
    store.getInstance("btn").show();
}

This is one of the use cases of getCurrentInstance. Likewise you can use it instead of this in Vue.js 2 based on your use cases.

Conclusion

In conclusion, getCurrentInstance is the special feature of Vue.js 3. We can use it instead of this in Composition API. By using it we can get a lot of utilities like emit, all props, data, proxy object, el DOM element.

The post getCurrentInstance in Vue 3 appeared first on Program Easily.

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 from vue. Let’s take a deep dive!.

Note that, we are using Single file Components SFC’s in examples. So you can refer more about SFC’s from Single File Components Vue 3

Computed in Vue 3

There are two basic reasons to use computed property.

1. Behavior Dependency on reactive variables.
2. To move complex template logics on reactive variables.

Behavior Dependency

Every component has unique core logics, in such a way that it will fulfill it’s requirements. While organizing the component logic, sometimes we need one behavior that depends on the other behaviors. We can handle this situation using computed properties. Computed has two properties namely get and set.

get function

The computed method takes a getter function, and it will return the reactive immutable ref object. There are two syntax to create get function,

Note that, here the function is given as an argument of computed method directly.

const fullName = computed(() => {
      return props.firstName + " " + props.lastName;
 });

Alternatively, we can assign the function on get property as follows,

const fullName = computed({
      get: () => {
        return props.firstName + " " + props.lastName;
      },
 });

Now we are going to see the full example for computed getter function. The important point here is that the fullName depends on first name and last name. The fullName takes a getter function and return reactive ref object. We will return this fullName object from the setup hook.

Example

set function

We have one more set function to create a writable ref object. We won’t use setter function mostly in computed method. It has only one syntax as follows,

const counterResult = computed({
      set: (val) => {
        counter.value = counter.value + val
      },
 });
// To increment
counterResult = 1 // It will increment by one

Now we are going to see the full example.

Example

1. We are using two props initialNumber and incrementBy.
2. The counter ref created from initialNumber.
3. counterResult having get/set functions where get is used to return current counter value.
4. set function takes an argument and return the increment result
5. In Template button click, we are setting computed value as follows
   counterResult = incrementBy

To move complex template logics

In Vue.js, we can write expressions in the template. Its the special feature and very convenient for simple operation. Meanwhile when the logic increases, we have to write lot of expressions inside template. It will reduce the readability of template and makes harder to understand. So we can use computed to handle such situations. Note that, here we have to move template expressions logics into computed.

In the below example, the message is reversed inside template expression. For more information, you can refer Template Expressions

<template>
  <div>
    <div>Message : {{ message }}</div>
    <div>Reversed Message : {{ message.split("").reverse().join("") }}</div>
  </div>
</template>

In this case, we are using the JavaScript expressions inside template. At this point it is okay. But when the template logic increases, it makes hard to understand. So we can move this logic as follows,

<div>Reversed Message : {{ reversedMessage }}</div>

const reversedMessage = computed(() => {
      return props.message.split("").reverse().join("");
});

Now, the template logic is implemented in computed.

Full Example

Computed Caching

Instead of computed, we can achieve the above logic by using method option also.

methods: {
    reversedMessage : () => {
      return this.message.split("").reverse().join("");
    }
  },

In the above example, we are using method instead of computed. Indeed, the end results are same. Then what’s the difference ? which one is preferable ?. The difference is, computed are cached by nature based on their reactive dependencies. The computed logic re-executed only when it’s reactive variable changes. However The results are cached and immediately return the previously computed value.

Note that, whenever re-render happens, methods will always run the functions irrespective of it’s reactive dependency changes. So the use case depends on component creator. If we want to cache the result we can go for computed. If we want to run the function for every re-render, always we have to use methods.

Conclusion

Among Vue.js six data options, we have learned something about computed property. Some important revisions are,

• We can use computed for Behavior Dependency and to move complex expression logic from template
• It has get, set property. If we give single function, then it will be a get function by default.
• Computed are cached by nature. It won’t always run the function when re-render happens. The computed logic re-executed only when it’s reactive variable changes.

The post Computed in Vue 3 appeared first on Program Easily.

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 it has been written in different places.

Finally, Vue.js 3 introduced a Composition API where we can solve such problems. In Composition API, we can write or composite all options logics(data, computed, methods, watch) in a single place.

In Composition API, we call this place the setup. We can composite or write all component core logics in the setup function. Here we can organize single core logics even for the complex components. It will be very helpful to read about Single File Components in Vue 3 before moving to setup functions in this session. Let’s take the deep dive!

Setup function in Composition API

setup function is the entry point in the Composition API. It will be called before the component is created and after the props are prepared. Meaning that, before compiling and processing it’s template into a render object. Setup function is called before the beforeCreate hook. Note that this reference won’t be available inside the setup function. Because the component is not created yet.

Next we are going to see how to use the setup function. The setup is the function with two arguments(props and context). Anything returned from the setup function will be available throughout our component. In Addition to that It will be accessible inside the template also. Let me explain the same with the below example.

Setup Function syntax with example

CustomButton.vue

<template>
  <div>
    <button>
      {{ label }}
    </button>
  </div>
</template>

<script>
export default {
  props: {
    label: String,
  },
  setup(props) {
    console.log(props); // { label: '' }
    
    // Write Component Core Logics here
    
    // Anything returned from setup function will be
    // available throughout our component
    return {};
  },
  // return object from setup function accessible here
};
</script>

Setup function in Composition API – Arguments

Setup function has two arguments,

1. props
2. context

Let’s see how these arguments are being used in the components.

Props

Props is the first argument of setup function, which are reactive by nature. So while we update the props, the component will be updated. The basic example as follows,

export default {
  props: {
    label: String,
  },
  setup(props) {
    console.log(props.label);

  },
  
};

Props with ES6 Destructive

Note that props are reactive by default. So we can not use Object destructuring since it will remove reactive property. We can solve such problems using toRefs. toRefs is useful when the reactive objects are being destructure/spread.

import { toRefs } from "vue";
export default {
  props: {
    label: String,
  },
  setup(props) {
    const { label } = toRefs(props);
    console.log(label.value);
  },
};

Note that, if label is an optional prop, then toRefs will not create a reactive reference for the label. Here we are in need to use toRef instead of toRefs. Let me show the same with below example,

import { toRef } from "vue";
export default {
  props: {
    label: String,
  },
  setup(props) {
    const label = toRef(props, "label");
    console.log(label.value);
  },
};

Context

Context is the second argument of the setup function which is not reactive by nature. This is the normal JavaScript object. It has three component properties,

1. attrs – Attributes (Non-Reactive)
2. slots – Slots (Non-Reactive)
3. emit – Method (Emit events)

export default {
  setup(props, context) {
    console.log(context.attrs) // (Non-reactive)

    console.log(context.slots) // (Non-reactive)

    console.log(context.emit) // Emit Events
  }
}

Note that context is not reactive. So we can use Object destructuring here as follows,

export default {
  setup(props, { attrs, slots, emit }) {
    // write logics here
  }
}

Setup function with Template

Properties of props and anything returned from the setup function will be accessible in the component’s template. Let me explain with the below example,

CustomButton.vue

<template>
  <div>
    <div>{{ counterMsg.msg }} : {{ counter }}</div>
    <button @click="() => counter++">
      {{ label }}
    </button>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  // props properties accessible to template
  props: {
    label: String,
  },
  setup(props) {
    console.log(props.label);
    const counter = ref(0);
    const counterMsg = reactive({ msg: "Click the Button" });
    // below object accessible to template
    return {
      counter,
      counterMsg,
    };
  },
};
</script>

In the above example counter, counterMsg are from setup function and label from props which are accessible in the template. Note that when we access the ref inside template, it will unwrap the inner value automatically. No need to append .value in the template. For more details you can refer Ref vs Reactive in Vue 3

Setup function with render { h }

As same as with template, we can use setup with render functions also. Here we will be using h instead of template in the component. Let me explain with below example,

CustomButton.vue

<script>
import { ref, reactive, h } from "vue";
export default {
  // props properties accessible to template
  props: {
    label: String,
  },
  setup(props) {
    console.log(props.label);
    const counter = ref(0);
    const counterMsg = reactive({ msg: "Click the Button" });
    // Note that we have to give ref value in in render function
    return () =>
      h(
        "div",
        null,
        counterMsg.msg + ":" + counter.value,
        h(
          "button",
          {
            onClick: () => counter.value++,
          },
          props.label
        )
      );
  },
};
</script>

In the above example, the same component has been implemented using the render function. We can convert our template into render function (h) using Template Compilation

Conclusion

So we have learned about setup functions today. Composition API is the fundamental concept of Vue3. The ultimate goal of composition API is to organize the complex component logics in the single place. Typically the place is nothing but the setup function. Another important point is this won’t be available here unlike other options in the component.

The post Setup function in Composition API – Vue 3 appeared first on Program Easily.

1. Unique component name for each component
2. Since template type is string, poor look for large size templates
3. Failed to apply syntax highlights for template
4. Html(template string) and JavaScript are placed into component objects where CSS left out.

So a single file component(SFC’s) is the solution for above problems with .vue extension. Note that build tools like Webpack are used to parse and compile the .vue file.

Single file Components – SFC’s Syntax

SFC’s has three parts in the .vue file which are,

1. Template – HTML design of the component.
2. JavaScript – Supports common JS modules.
3. CSS – Scoped CSS which applies to elements of components alone.

Component.Vue

<template>
  <div>
    <!-- Write HTML for the component here -->
  </div>
</template>

<script>
// Write JavaScript for the component here
</script>

<style scoped>
/* Write CSS for the Component here.*/
/* Note that scoped attribute, apply css 
to this component HTML element only  */
</style>

Looks so pretty right!. The Single File Component in Vue.js makes the component so simple to use. And also it solved the problems that occurred in normal components.

• The HTML elements of the component are much simplified now.
• You can use syntax highlights for template ( I preferred Vetur).
• JavaScript part of the component are separated rather than insisting the same in the component object.
• Scoped CSS is introduced where its CSS apply to the component template HTML element.

Single file Components – SFC’s Example

Now, we are going to create a simple button component using SFC’s. Button Component has two props namely color and label.

CustomButton.vue

<template>
  <div class="btn-root">
    <button class="btn-custom" :style="{ color: color }">
      {{ label }}
    </button>
  </div>
</template>

<script>
export default {
  props: {
    color: String,
    label: {
      type: String,
      required: true,
      default: "none",
      validator: function (value) {
        // should return true, if the prop is valid
        return !!value;
      },
    },
  },
};
</script>

<style scoped>
.btn-custom {
  width: 200px;
  height: 50px;
}
.btn-root {
  margin: 8px;
}
</style>

Now we are going to use the CustomButton Component in our Application. Let me show you with the below example !

App.vue

<template>
  <div>
    <CustomButton color="red" label="Red Button" />
    <CustomButton color="green" label="Green Button" />
    <CustomButton color="blue" label="Blue Button" />
  </div>
</template>

<script>
import CustomButton from "./components/CustomButton";
export default {
  components: {
    CustomButton,
  },
};
</script>

So we have created different colored buttons with different labels using CustomButton Components.

Single file Components – SFC’s Vue Loader

Indeed, three types of single file components are processed by a vue loader. vue-loader parses the SFC’s file, extracts each language block and finally computes them into ES modules which is nothing but the Vue.js component option object.

vue-loader also supports non default languages like CSS pre-processors and compiles them into HTML. For example we can use Sass in our component to style the elements by specifying the attribute in the CSS block as below,

<style lang="sass">
  /* you can write Sass here! */
</style>

Template Block

• Each .vue file may contain template blocks.
• The template will be passed to vue-template-compiler where the content is compiled into JavaScript render functions and injected in the component script block.

Script Block

• Each .vue file may contain a script block.
• The plain object or constructor created by Vue.extend is supported, but exporting the object should be a component options object.

Style Block

• Each .vue file may contain style block
• The style tag may have scoped, modules or mixed tags in the same component. Default lang attribute is CSS.

Scoped CSS – Special Feature

Using scoped attributes in the style tag, the CSS will be applied to the current component only. Let me explain the same using below example,

<div>
  <div class="btn-root" data-v-75f860b3="">
    <button class="btn-custom" data-v-75f860b3="" style="color: red;">
      Red Button</button>
  </div>
  <div class="btn-root" data-v-75f860b3="">
    <button class="btn-custom" data-v-75f860b3="" style="color: green;">
      Green Button</button>
  </div>
  <div class="btn-root" data-v-75f860b3="">
    <button class="btn-custom" data-v-75f860b3="" style="color: blue;">
      Blue Button
    </button>
  </div>
</div>
<style type="text/css">
  .btn-custom[data-v-75f860b3] {
    width: 200px;
    height: 50px;
  }

  .btn-root[data-v-75f860b3] {
    margin: 8px;
  }
</style>

Note that id data-v-75f860b3  is generated using PostCSS. So the style will be applied to this component alone. At the same time if we want to use styles as globally, we can use global styles as like below

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>

Here global style is not scoped which means it will be available throughout our application.

Conclusion

So SFC’s single file component is the very special feature in the Vue.js framework. It will ease the Component structure by segregating components into three parts (template, script, style). Unlike global/ local registered components, SFC’s are well suited for large sized applications.

The post Single File Components Vue 3 appeared first on Program Easily.