Vue.js Composition API using Provide

Last Updated : 23 May, 2022

Vue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript, making it easier for developers to integrate Vue.js into any application.

Vue.js Composition API provides a helpful tool for Provide and Inject. Sometimes the parent element may want to pass some data to the child element or to the nested child element. In that case, data is passed on to every child in between. So, a better way is to use the provide() which provides the value and can be used by any descendants or nested child element.

Provide() in Composition API takes 2 parameters, which are described as follows:

Key: It can be a string or an InjectionKey which should be unique to fetch the passed-on data correctly.
Value: It can be either a string or an object that contains multiple values.

Syntax: Call the provide function inside the setup() function of the script. Passon the key-value pair to the provide() function.

setup() {
  provide("message", "Welcome to GeeksforGeeks");
},

Example: In the following example, we will use the provide() function to send some message to a child element that will receive it and display it.

Step 1: Create a new Vue.js project with the npm node.js package manager using the following command.

npm init vue@latest

Enter the project name and preset the project as follows:

Step 2: Under the src/ directory in the project folder, create a new file and name it MessageComp.vue.

Project Structure: After successful installation and creation of the new file, the following project structure will be formed.

Project Structure

Step 3: In the App.vue file, register the MessageComp.vue component, and then inside the setup() function, call the provide function and pass the value with the key. In the template section, we will have the MessageComp component with some other elements.

App.vue

<script> 
import { provide } from "vue"; 
import MessageComp from "./MessageComp.vue"; 
export default { 
  setup() { 
    provide("message", "Welcome to GeeksforGeeks"); 
  }, 
  components: { MessageComp }, 
}; 
</script> 
  
<template> 
  <center> 
    <h1 style="text-align: center;  
        color: green"> 
        GeeksforGeeks 
    </h1> 
    <strong> 
        Vue.js Composition API using Provide 
    </strong> 
    <br /> 
  </center> 
  <MessageComp></MessageComp> 
</template>

Step 4: Inside the MessageComp.vue, call the inject function to fetch the value from the key. Then return the fetched data so that it becomes accessible to the template section.

MessageComp.vue

<script> 
import { inject } from "vue"; 
  
export default { 
  setup() { 
    const message = inject("message"); 
    console.log(message); 
    return { message }; 
  }, 
}; 
</script> 
  
<template> 
  <p style= 
      "text-decoration: underline;  
     color: green"> 
     {{ message }} 
  </p> 
  
</template>