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.

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 are new to Vue.js Component topics, you can read about Components in Vue 3 and Single File Components Vue 3 before moving to this session.

Dynamic Component With Cloning Example Vue.js

In the below example, we can dynamically change the component. Here the old component will unmount and the new component will mount when the changes are made.

<!-- Syntax -->
<!-- component changes when componentName changes -->
<component :is="componentName"></component>

We have to use  is attribute with component tag to achieve dynamic component features in Vue.js. Note that, here when we change the componentName the new component will render.

Dynamic Component With Native HTML elements

We can use is attribute with native HTML elements. When we bind an element to is attribute, it will render the HTML element in the DOM.

<component :is="'button'">This is Button</component>
// This will show a button

In addition, we can use the Vue.js component inside the HTML element using is attribute. In the below example, we are using my-row component inside the table HTML element

<table>
  <tr is="vue:my-row"></tr>
</table>

keep-alive with Dynamic Component

Sometimes when we switch the components, we need to maintain the old component state or need to avoid the re-render process. Which means, we want to cache the component states. To achieve this, Vue.js provides a keep-alive feature. We can use it as below to cache the component states,

<!-- components will be cached! -->
<keep-alive>
  <component :is="componentName"></component>
</keep-alive>

Dynamic Component With Cloning Example Vue.js

Generally in Vue.js we can use a for loop to clone a single component. Dynamic components along with a for loop helps us to clone different types of components at a go. Firstly we are going to create components for button, input and text-area.

DcButton.vue

<template>
  <button class="btn">
    {{ label }}
  </button>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: "Default",
    },
  },
  setup() {
    return {};
  },
};
</script>

<style scoped>
.btn {
  background-color: #4999f5;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 2px 2px;
  cursor: pointer;
}
.btn:hover {
  background-color: #0417c0;
  color: white;
}
</style>

DcInput.vue

<template>
  <div>
    <input
      type="text"
      class="input"
      v-model="value"
      :placeholder="placeHolderLabel"
    />
  </div>
</template>

<script>
export default {
  props: {
    placeHolderLabel: {
      type: String,
      default: "Enter the value",
    },
  },
  data() {
    return {
      value: "",
    };
  },
};
</script>

<style scoped>
.input {
  width: 200px;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
</style>

DcTextArea.vue

<template>
  <div>
    <textarea
      v-model="value"
      rows="3"
      cols="3"
      class="input"
      :placeholder="placeHolderLabel"
    />
  </div>
</template>

<script>
export default {
  props: {
    placeHolderLabel: {
      type: String,
      default: "Enter the value",
    },
  },
  data() {
    return {
      value: "",
    };
  },
};
</script>

<style scoped>
.input {
  width: 200px;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
</style>

Secondly, we are going to create a dynamic component using the component tag. Note that, here we have two props namely componentName, componentProps. So whenever we pass the component name to this component it will render the specific component. We can also provide props for our component at runtime. So let’s do it.

DynamicComp.vue

<template>
  <component :is="componentName" v-bind="componentProps"></component>
</template>
<script>
export default {
  props: {
    componentName: String,
    componentProps: Object,
  },
};
</script>

Since we are going to use input and text area components dynamically, we have to add the same with app component in main.js as follows,

import { createApp } from "vue";
import router from "./router/router.js";
import App from "./App.vue";
import dcInput from "./components/dynamic-comp/DcInput"
import dcTextArea from "./components/dynamic-comp/DcTextArea"

let app = createApp(App);
app.component("dcInput",dcInput)
app.component("dcTextArea",dcTextArea)

app.use(router).mount("#app");

Now we are going to use the above components to create a simple cloning example. Here we are using two methods namely addInput, addTextArea to add input and text area components respectively.

DyanamicComponentDemo.vue

<template>
  <h1>Simple Cloning Component Example</h1>
  <div class="grp">
    <dcButton label="Add Input" @click="addInput" />
    <dcButton label="Add Text Area" @click="addTextArea" />
  </div>
  <dynamicComp
    v-for="(item, index) in items"
    :key="index"
    :componentName="item.componentName"
    :componentProps="item.componentProps"
  >
  </dynamicComp>
</template>

<script>
import { ref } from "@vue/reactivity";
import dynamicComp from "../components/dynamic-comp/DynamicComp.vue";
import dcButton from "../components/dynamic-comp/DcButton.vue";
export default {
  components: {
    dynamicComp,
    dcButton,
  },
  setup() {
    let items = ref([]);
    const addInput = () => {
      items.value.push({
        componentName: "dcInput",
        componentProps: {
          placeHolderLabel: "Cloning Input",
        },
      });
    };
    const addTextArea = () => {
      items.value.push({
        componentName: "dcTextArea",
        componentProps: {
          placeHolderLabel: "Cloning Text Arae",
        },
      });
    };
    return {
      items,
      addInput,
      addTextArea,
    };
  },
};
</script>

<style scoped>
.grp {
  padding-left: 408px;
}
</style

In the above example, we are using a dynamic component with a for loop to clone different components. so whenever we update the items, it will create the new component dynamically. The thing is we have to push the component name and props to items as we did in addInput, addTextArea methods. You can find the full working example below,

Dynamic Component With Cloning Example Vue.js

Full Sources

• https://github.com/programeasily/vue-3-basics/tree/main/src/components/dynamic-comp
• https://github.com/programeasily/vue-3-basics/blob/main/src/page/DynamicComponentDemo.vue

Reference

• https://v3.vuejs.org/guide/list.html#mapping-an-array-to-elements-with-v-for
• https://v3.vuejs.org/api/special-attributes.html#is
• https://v3.vuejs.org/guide/component-dynamic-async.html#dynamic-components-with-keep-alive

Summary

• We can render different components dynamically using component tag.
• The old component will unmount and the new component will mount when the changes are made.
• when we bind HTML elements to is attribute in the component tag, it will render the same in the DOM.
• We can use dynamic components with a for loop to clone different types of components at a go.

The post Dynamic Component With Cloning Example 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.

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 suggests, the parent component has a provide option and the child component has an inject option. The provide option will provide the data and inject will acquire this data.

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.

Root
└─ Page (<- Use Provide Here ->)
   ├─ App Bar
   └─ Layout
      ├─ Drawer Menu
      └─ Main Floor
         └─ Header Room (<- Use Inject Here ->)
         └─ Content Room
   └─ Footer

Let me take the above example, where we want Page component data in Header room component. We can pass as prop data from Page -> Layout -> Main Floor -> Header Room  components one by one. Alternatively we can use provide/inject here.

Use Provide

Firstly, our goal is to pass Page Component data to it’s inner child Header Room Component without passing as prop data.  So we are using Provide in Page.vue.

Page.vue

<template>
  <div />
  <!-- <AppBar /> 
  // Here we supposed to pass pageProperties
  // to Layout and Layout -> Main Floor -> Header Room
  // But with the help of provide/inject we can directly
  // use this in Header Room component -->
  <Layout />
</template>

<script>
import Layout from "./Layout";
export default {
  components: {
    Layout,
  },
  provide: {
    pageProperties: {
      pageName: "Provide/Inject",
      pageVersion: "1.0.0",
      pageUser: "admin",
    },
  },
};
</script>

Use Inject

Secondly, we will be using inject in HeaderRoom.vue Component to get the data given in Page.vue Component with provide option.

HeaderRoom.vue

<template>
  <div>Page Name : {{ pageProperties.pageName }}</div>
  <div>Page Name : {{ pageProperties.pageVersion }}</div>
  <div>Page Name : {{ pageProperties.pageUser }}</div>
</template>

<script>
export default {
  inject: ["pageProperties"],
};
</script>

The full working example

Note :

Some points to be noted here,

1. Parent component wouldn’t know which child is going to use the provided data.
2. Likewise the child component wouldn’t be aware where the injected data coming from.

Provide And Inject in Vue.js with Composition API

In addition, we can use provide and inject in the composition API also. We have to call both methods inside the setup function.

Provide in setup

We have to import provide function from vue module. The provide function has two parameters,

1. The Property Name (type should be string)
2. The Property Value  (type can be anything)

we are updating  Page.vue component as follows,

Page.vue

<template>
  <div />
  <!-- <AppBar /> 
  // Here we supposed to pass pageProperties
  // to Layout and Layout -> Main Floor -> Header Room
  // But with the help of provide/inject we can directly
  // use this in Header Room component -->
  <Layout />
</template>

<script>
import { provide } from "vue";
import Layout from "../provideinject/Layout";
export default {
  components: {
    Layout,
  },
  setup() {
    provide("pageProperties", {
      pageName: "Provide/Inject",
      pageVersion: "1.0.0",
      pageUser: "admin",
    });
  },
};
</script>

Inject in setup

We have to import the inject function from the vue module. The inject function has two parameters,

1. The property Name
2. Default value (optional)

we are updating  HeaderRoom.vue component as follows,

HeaderRomm.vue

<template>
  <div>Page Name : {{ pageProperties.pageName }}</div>
  <div>Page Name : {{ pageProperties.pageVersion }}</div>
  <div>Page Name : {{ pageProperties.pageUser }}</div>
</template>

<script>
import { inject } from "vue";
export default {
  setup() {
    let pageProperties = inject("pageProperties");
    return {
      pageProperties,
    };
  },
};
</script>

The full working example

Provide And Inject in Vue.js with Reactivity

In the above example, pageProperties will not be reactive by default. Moreover, They are not reactive by nature. We have to use ref/reactive with provide to make it reactive.

Note that, In the below example we are using reactive with provide to make pageProperties reactive. Here updateVersion method is provided to all it’s children with pageProperties.

Page.vue

<template>
  <div />
  <!-- <AppBar /> 
  // Here we supposed to pass pageProperties
  // to Layout and Layout -> Main Floor -> Header Room
  // But with the help of provide/inject we can directly
  // use this in Header Room component -->
  <Layout />
</template>

<script>
import { provide, reactive } from "vue";
import Layout from "./Layout";
export default {
  components: {
    Layout,
  },
  setup() {
    let pageProperties = reactive({
      pageName: "Provide/Inject",
      pageVersion: "1.0.0",
      pageUser: "admin",
    });
    provide("pageProperties", pageProperties);
    provide("updateVersion", () => {
      pageProperties.pageVersion = "2.0.0";
    });
    return {
      pageProperties,
    };
  },
};
</script>

After that, we are going to update the version from HeaderRoom Component with the help of inject directly.

HeaderRoom.vue

<template>
  <div>
    <button @click="updateVersion">Update Parent Version</button>
  </div>
  <div>Page Name : {{ pageProperties.pageName }}</div>
  <div>Page Name : {{ pageProperties.pageVersion }}</div>
  <div>Page Name : {{ pageProperties.pageUser }}</div>
</template>

<script>
import { inject } from "vue";
export default {
  setup() {
    let pageProperties = inject("pageProperties");
    let updateVersion = inject("updateVersion");
    return {
      pageProperties,
      updateVersion,
    };
  },
};
</script>

So we can update parent component data(pageProperties version) from the child component using provide and inject concepts in Vue.js effectively.

The full working example

Global Provider – Provide Application API

However, we can use provide as a global provider to all components. The provided data would be injected to all it’s components within the application. It’s an alternative way for global properties in Vue.js.

Let me show you the example below,

index.js

const app = Vue.createApp({});
// Global Provider
app.provide("appProperties", {
  user: "admin",
  appVersion: "1.0.0"
});
// Page Component where contains content component
app.component("Page", {
  template: `<Content />`
});
// Content component where inject used to get
// global properties
app.component("Content", {
  inject: ["appProperties"],
  template: `
    <div>User Name : {{ appProperties.user }}</div>
    <div>Version : {{ appProperties.appVersion }}</div>
  `
});

index.html

<div id="app">
      <Page />
</div>

Here the appProperties is provided to all components within the application. We got the data in the Content component using inject.

The full working example

Conclusion

• In conclusion, Provide and inject makes ease of data communication between parent and it’s child components.
• Provide and Inject are not reactive by nature. But we can make it reactive with the help of reactive/ref.
• We can use provide as global provider instead of global properties in Vue.js

The post Provide And Inject in Vue.js 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.

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 core logic that encapsulates as reusable code.

In Vue.js components are the most important and powerful feature. we can abstract large application interfaces into small reusable components. Let’s take a deep dive!

Components in Vue 3

Almost any type of application can be abstracted or organized into a group of components. For example in our application design, we are having header, footer, menu, content area etc. Here we can create each piece as a component and organize all into a single core as a page effectively.

In Vue.js, components are reusable instances and that can be created with the below anatomy.

Component Anatomy

import { createApp } from "vue";
import App from "./App.vue";

const customComponent = {
  components: {
    // mention sub components, if we used in the template
  },
  // the parameters which component accepts
  props: {
    color: String,
    label: {
      type: String,
      required: true,
      default: "none",
      validator: function(value) {
        // should return true, if the prop is valid
        return !!value;
      },
    },
  },
  // the reusable html element
  template: `<button :style="{ color: color }">
          {{ label }}
          </button>`,
};
const app = createApp(App);
// register the component globally
app.component("CustomButton", customComponent);
app.mount("#app");

Here, we have created a Vue.js component named CustomButton. The component object has below properties,

1. components – mention sub components
2. props – the parameters component accepts
3. template – html element

In Addition, setup hook plays a major role. You can learn about it from Setup function in Composition API – Vue 3 topic.

Reusable Components in Vue 3

We can reuse CustomButton based on our needs.

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

In the above example, we are passing prop attributes( label, color ). The prop attributes will become property of the component instance. So the props are accessible inside the template tag.

Note that, each component maintain its own state. it’s because whenever we use the components, a new instance created for the same.

Global Registration

Here the components registered globally for the application which means it can be used in any template of the application.

const app = Vue.createApp({})

app.component('add-button', {
  /* ... */
})
app.component('save-button', {
  /* ... */
})
app.component('delete-button', {
  /* ... */
})

app.mount('#app')

So we can use above component in any template of our application now,

<div id="app">
  <add-button></add-button>
  <save-button></save-button>
  <delete-button></delete-button>
</div>

Local Registration

In the real time project, global registration is not preferred. Because if we are using a build system like Webpack, global registration loads all components in the build irrespective of component usage in our application. This will increase the script file size unnecessarily.

So Vue.js introduced local registration for components. Here we can create plain objects as like below first ,

const ComponentOne = {
  /* ... */
}
const ComponentTwo = {
  /* ... */
}
const ComponentThree = {
  /* ... */
}

Next, we have to map above object to component property in the Vue.js application instance as like below,

const app = Vue.createApp({
  components: {
    'component-one': ComponentOne,
    'component-two': ComponentTwo,
    'component-three': ComponentThree
  }
})

Here another important point is, local registered components not available in our subcomponents. Let me explain with the below example, Here ComponentOne used in ComponentTwo so we have to mention the same in ComponentTwo Object.

const ComponentOne = {
  /* ... */
}

const ComponentTwo = {
  components: {
    'component-one': ComponentOne
  }
  // ...
}

Custom Events in Components Vue 3

Children - Emit the event

Parent - Listen to the event

Custom events are another interesting topic of Vue.js Components. In the component hierarchy some time we came up to communicate back to the parent from child component. In that situation, Parent listen to any events from the child where the child emits the event.

Emit event in the Child.vue

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

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 major rule in a Vue’s reactive world. Lets take a deep dive!

Ref

It takes an primitives argument and return a reactive mutable object. The object has single property ‘value’ and it will point to the argument taken by it.

const increment = ref(0);
console.log(increment.value) // 0

increment.value++;
console.log(increment.value) // 1

Within Template

when we access ref inside template, it will unwrap the inner value automatically. No need to append .value in the template. Ref should be return as a property of setup hook(render context).

<template>
  <div>{{ state }}</div>
</template>

<script>
import { ref } from 'vue';
  export default {
    setup() {
      return {
        state: ref('Hello World...')
      }
    }
  }
</script>

Within Reactive Object

when we pass ref as a argument to reactive object, it automatically unwraps its inner value. ref unwrapping won’t happens for Array, Map.

const increment = ref(0)
const state = reactive({
  increment
})

console.log(state.increment) // 0

state.increment = 1
console.log(count.increment) // 1

Reactive

It takes a JavaScript object as a argument and returns Proxy based reactive copy of the object.

const state = reactive({
name : 'john',
age  : 21
});

we have to note that, the returned proxy is not same as original object. so in-terms of identity === comparison will be failed.

Reactive within template

<template>
  <div>
    <div> User Name : {{ state.name }}</div>
    <div>Age : {{ state.age }}</div>
  </div>
</template>

<script>
import { reactive } from 'vue';
export default {
  setup() {
    
    const state = reactive({
      name: "john",
      age: 21,
    });
    return {
      state,
    };
  },
};
</script>

Ref vs Reactive

Typically, ref and reactive both have been used to create reactive objects where ref is used to make the primitive values to be reactive (Boolean, Number, String). But reactive won’t work with primitives rather than it works for objects.

Here the problem with reactive is the returned object of setup hook cannot be destructured or spread. To solve this issue Vue introduced toRefs which converts each property on a reactive object into ref object. So we have to remember to use toRefs with reactive when we returning the reactive proxy object from setup hook (composite functions)

Summary

So ref / reactive both are been used to create reactive object where the changes been tracked. The DOM will get updated only when there is a change in reactive objects. This is the fundamental understanding!.

The post Ref vs Reactive in Vue 3 appeared first on Program Easily.