However, sometimes logically, we need one component which could be a child to its parent component, But the component HTML div should not be nest to its parent. Meanwhile we need to place it somewhere else in the DOM. Little bit confusing right.

Generally the HTML tree structure will be the same as component tree structure. But if you want to change one component div’s parent somewhere else in the DOM, we can go for teleport in Vue.js. It is an advanced feature introduced in Vue.js 3. If you are not familiar with Vue.js You can refer to our page Vue Let’s go to the topic in detail.

Teleport

Teleport will change the parent element of a component. Note that teleport will move actual DOM nodes instead of recreating it. This will maintain the same component instance. Teleport has two attributes.

1. to – String
2. disabled – Boolean

to – string is a prop denoting a target parent element where the teleport will move it’s content. It is a mandatory prop. This prop can be a valid query selector, or an HTML element (Example : body).

<teleport to="#to-parent-id" /> 
<teleport to=".to-parent-id" /> 
<teleport to="[to-parent-data-teleport]" />

disabled – boolean is a prop which disables the teleport operation. This is an optional Boolean prop. If we apply the disable prop, this will not move the teleport content to the target element. At the same time it will render the elements where you specified the teleport tag just like normal components. A great example for this use case is, streaming the video in either pop up or normally like below,

<teleport to="#popup" :disabled="popupOrInline">
  <video src="./my-movie.mp4">
</teleport>

Teleport in Vue 3 with Example

Generally, we can achieve the same operation without teleport also. If we need to change the positions of the elements but quickly ,the process becomes difficult. But teleport makes the work simple for us. In our example, we are going to teleport a component to HTML  #toPlace div. Firstly we are creating Teleport component as follows

// TeleportComp.vue
<template>
  <div>
    <teleport :to="teleportTo" :disabled="disableTeleport">
      <TeleportChild:imagePath="imagePath" />
    </teleport>
  </div>
</template>

<script>
import TeleportChild from "./TeleportChild.vue";
export default {
  components: {
    TeleportChild,
  },
  props: {
    teleportTo: {
      type: String,
      default: "body",
    },
    imagePath: String,
    disableTeleport: Boolean,
  },
};
</script>

Secondly we are creating the TeleportChild.vue component as follows,

// TeleportChild.vue
<template>
  <img
    :src="imagePath"
    alt="Teleport child Text"
    :style="{ width: '100%', height: '100%' }"
  />
</template>

<script>
export default {
  props: {
    imagePath: String,
    altText: String,
  },
};
</script>

In the above example,  we are using the child component TeleportChild.vue inside the Teleport Component. Note that here, logically TeleportChild.vue component will remain as child for TeleportComp.vue component even when it’s position changed (But actually not). Moreover the Vue.js Dev-tools also will have the same component hierarchy structure. Now we are creating the TeleportDemo.vue file to check the behaviors. Here we are enabling teleport operation based on disableTeleport flag.

// TeleportDemo.vue
<template>
  <div id="toPlace"></div>
  <div :style="{ width: '200px', height: '200px' }">
    <button class="btn" @click="onClickBtn">
      {{ disableTeleport ? "Move to toPlace" : "Come Back" }}
    </button>
    <TeleportComp
      teleportTo="#toPlace"
      imagePath="logo_transparent.png"
      :disableTeleport="disableTeleport"
    />
  </div>
</template>

<script>
import { ref } from "vue";
import TeleportComp from "../components/teleport/TeleportComp.vue";
export default {
  components: {
    TeleportComp,
  },
  setup() {
    let disableTeleport = ref(true);
    const onClickBtn = () => {
      disableTeleport.value = !disableTeleport.value;
    };
    return {
      onClickBtn,
      disableTeleport,
    };
  },
};
</script>
<style scoped>
#toPlace {
  width: 200px;
  height: 200px;
  margin: auto;
  display: flex;
  justify-content: center;
}
.btn {
  background-color: #4999f5;
  border: none;
  color: white;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}
.btn:hover {
  background-color: #0417c0;
  color: white;
}
</style>

In the above example, if disableTeleport is set to true, then the teleport component acts as a normal component. if disableTeleport is set to false, the teleport component will be moved to #toPlace div element. Teleport will not change the hierarchy of component tree structure logically. But the effect will reflect in the HTML DOM. Now the image element moved to #toPlace element. You can check the full working example below,

Multiple Teleport in Vue 3 with Example

Now we are going to see multiple teleport operations. Here the same target element will have multiple teleport components. When we move the teleport components, It will follow the moving order and append to the target element.

<teleport to="#toPlace">
  <div>A</div>
</teleport>
<teleport to="#toPlace">
  <div>B</div>
</teleport>

<!-- result-->
<div id="toPlace">
  <div>A</div>
  <div>B</div>
</div>

In the above example, the #toPlace element will have A,B div elements on teleport operation. Now we are creating TeleportMultipleDemo.vue file where we are moving two teleport components to same #toPlace target element. You can refer the full working example below

Summary

• Teleport will change the parent of a component. Note that teleport will move actual DOM nodes instead of recreating it.
• Even though teleport changes the parent elements, it will maintain the instances of components.
• If disabled flag is given, it will render the elements where you specified the teleport tag just like normal components.
• The same target element will have multiple teleport components.

Reference

• https://v3.vuejs.org/guide/teleport.html#teleport
• https://v3.vuejs.org/api/built-in-components.html#teleport

The post Teleport in Vue 3 with Example 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.

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.