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.