Vue Provide/Inject

❮ Previous Next ❯

Provide/Inject in Vue is used to provide data from one component to other components, particularly in large projects.

Provide makes data available to other components.

Inject is used to get the provided data.

Provide/Inject is a way to share data as an alternative to passing data using props.

Provide/Inject

In a large project, with components inside components, it can be hard to use props to provide data from "App.vue" to a sub-component, because it requires props to be defined in every component the data passes through.

If we use provide/inject instead of props, we only need to define the provided data where it is provided, and we only need to define the injected data where it is injected.

Provide Data

We use the 'provide' configuration option to make data available to other components:

App.vue:

<template>
  <h1>Food</h1>
  <div @click="this.activeComp = 'food-about'" class="divBtn">About</div>
  <div @click="this.activeComp = 'food-kinds'" class="divBtn">Kinds</div>
  <div id="divComp">
    <component :is="activeComp"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeComp: 'food-about',
      foods: [
        { name: 'Pizza', imgUrl: '/img_pizza.svg' },
        { name: 'Apple', imgUrl: '/img_apple.svg' },
        { name: 'Cake', imgUrl: '/img_cake.svg' },
        { name: 'Fish', imgUrl: '/img_fish.svg' },
        { name: 'Rice', imgUrl: '/img_rice.svg' }
      ]
    }
  },
  provide() {
    return {
      foods: this.foods
    }
  }
}
</script>

In the code above, the 'foods' array is now provided so that it is available to be injected in other components in your project.

Inject Data

Now that the 'foods' array is made available by 'provide' in 'App.vue', we can include it in the 'FoodKinds' component.

With the 'foods' data injected in the 'FoodKinds' component, we can use the data from App.vue to display different foods in the 'FoodKinds' component:

Example

FoodKinds.vue:

<template>
    <h2>Different Kinds of Food</h2>
    <p><mark>In this application, food data is provided in "App.vue", and injected in the "FoodKinds.vue" component so that it can be shown here:</mark></p>
    <div v-for="x in foods">
        <img :src="x.imgUrl">
        <p class="pName">{{ x.name }}</p>
    </div>
</template>

<script>
export default {
    inject: ['foods']
}
</script>

<style scoped>
    div {
        margin: 10px;
        padding: 10px;
        display: inline-block;
        width: 80px;
        background-color: #28e49f47;
        border-radius: 10px;
    }
    .pName {
        text-align: center;
    }
    img {
        width: 100%;
    }
</style>

Run Example »

Vue Exercises