How to Use Provide/Inject in Vue

DEV Community

vue'; const message = ref('Hello from parent'); provide('sharedMessage', message); </script> <template> <ChildComponent /> </template>

In this example, we use provide to share a reactive reference (message) with child components.

To consume the provided data in a child component, we use the inject function.

<script setup>
import { inject } from 'vue';
const sharedMessage = inject('sharedMessage');
</script>
<template>
 <p>{{ sharedMessage }}</p>
</template>

This allows the child component to access and display the value of sharedMessage from its ancestor component.

🟢 Best Practices and Common Issues for Provide/Inject

When using Provide/Inject, you may encounter following issues:

Forgetting Reactivity - Values provided using provide are not automatically reactive unless wrapped in ref() or reactive(). If updates are not reflecting, ensure your data is reactive.
Overcomplicating Component Hierarchies - If you find yourself using Provide/Inject across many levels, consider restructuring your components to keep dependencies more local.

So, always remember to follow these best practices:

1.Use Provide/Inject for Contextual Dependencies - Provide/Inject is best suited for sharing dependencies like form contexts, themes, or service instances, rather than global state management. If multiple components rely on the same data structure, consider Vuex or Pinia.
2.Use Reactive Data When Needed - Since provide passes values by reference, you may need to use ref() or reactive() to ensure reactivity.

const theme = reactive({ color: 'blue' });
provide('theme', theme);

3.Provide Defaults for Injected Values - To prevent errors when an injected value is missing, use a default value in inject.

const theme = inject('theme', { color: 'defaultColor' });

4.Avoid Overusing Provide/Inject - While convenient, excessive use of Provide/Inject can make code harder to trace. Use it only when it simplifies component communication.

📖 Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:

Vue School Link

It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉

✅ Summary

Vue’s Provide/Inject API is a great way to manage dependencies between nested components without unnecessary prop drilling. By following best practices and being mindful of its limitations, you can effectively use it to improve your Vue application’s structure and maintainability.

Take care and see you next time!

And happy coding as always 🖥️