Using Provide and Inject in Vue.js

Mar 22, 2021

Vue's provide/inject API is a neat way to send props directly to the component you want while avoiding prop drilling. To use provide and inject, you declare what variables you will send (provide) in one component, then each component underneath it can define what variables it will receive (inject). Below is a live example with code:

const app = Vue.createApp({
  provide() {
    return { state: 'Hi grandma' };
  },
  template: "<div><child /></div>",
});
app.component("child", {
  template: "<grandchild />",
});
// Displays "Hi grandma", despite the fact that `state` isn't a prop. 
app.component("grandchild", {
  inject: ["state"],
  template: "<h2>{{state}}</h2>",
});

Reactivity

To make your injected property reactive, wrap it around the reactive property. In the setup function, define a variable to store the reactive property and then use Vue.provide to give access to the child components. Below is a live example with code:

const example = Vue.createApp({
  setup: function() {
    const state = Vue.reactive({ message: "Row" });
    Vue.provide("state", state);
    return state;
  },
  template: `
  <div>
    <child />
    <button v-on:click="message += ' row'">Add</button>
  </div>
  `
});
example.component("child", {
  template: "<grandchild />"
});
example.component("grandchild", {
  inject: ["state"],
  template: "<h2>{{state.message}} your boat</h2>"
});

With inject, you don't have to explicitly pass a state prop to the child component.


Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase. Check it out!


Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

More Vue Tutorials