Using inject and provide in vue 3

Vue 3 has some cool new features, including “inject” and “provide”, which allow you to share data between parent and child components without having to pass it down as props. This makes your components more modular and reusable.

“Provide” is used in the parent component to provide data, which can be anything like a string, object, or function. “Inject” is used in the child component to get access to that data.

For example, let’s say you have a “message” variable in your parent component that you want to share with your child component. You can use “provide” to make that happen:

// Parent Component
<script>
import { provide } from 'vue';

export default {
  setup() {
    const message = 'Hello from parent!';

    provide('message', message);

    return {
      message,
    };
  },
};
</script>

Then, in your child component, you can use “inject” to get that “message” variable:

// Child Component
<script>
import { inject } from 'vue';

export default {
  setup() {
    const message = inject('message');

    return {
      message,
    };
  },
};
</script>

By using “provide” and “inject”, you can make your Vue 3 components more efficient and organized. Plus, the syntax is super easy to use!

You can read more here.