Creating a Global Loader Component in Vue.js

In any frontend application, invariably, one has to deal with showing the user an HTTP request is in progress. This is usually done by displaying a spinner while the request is being executed.

As I got bored dealing with Axios callbacks and independent isLoading data property in my Vue.js components, I realized I needed a global solution that would prevent me from cluttering my components with those redundant data properties.

But I also wanted my solution to work with simultaneous requests. And this is where the tricky part comes in, because on most posts I’ve seen, the author assumes you only ever have one API call that toggles a single loading switch. However, in real life, you have have 2, 3 or more API calls to build a page.