Provide and Inject

Complex apps can have deeply nested HTML. This statement is true for any framework or language that produces HTML and is valid for Vue. The standard way of passing data to a component is by using props. Code for props can be very verbose though, especially if we need to pass them to child components deep in the tree. We might even have to pass the data through unrelated components, such as containers. This practice is known as prop drilling.

Vue provides a way to pass data to nested components without introducing dozens of props: we can provide data and inject it into any component. The two concepts provide and inject bypass most of the component tree and work on a more global level.