State Provider

The State Provider patternThe State Provider pattern provides state to the whole application, or only a specific component tree. is inspired by the combination of React’s Hooks and Context API. In Vue, it’s done by using the provide/inject methods. Though this pattern was already possible in Vue 2, it was unpopular. It might be because values passed through provide aren’t reactive by default. Overall, working with provide/inject through Options API isn’t as easy compared to using it through Composition API.

Spinner

Imagine an application that needs to display an overlay with a spinner over the rest of the app, as shown below.

This feature is needed to prevent a user from doing anything in an app for a moment and to indicate that something is happening. What’s more, it should be possible to activate this overlay with a spinner from anywhere in an application. The State Provider pattern is a great choice for this because:

1. We need to provide a way for components around the application to consume the spinner state and methods to turn it on or off.
2. We need markup to display an overlay and the