Global Loader Component using Vue.js and Axios Interceptors

Making of a global loader component that will be invoked from anywhere in the app while making ajax calls using Axios interceptors

Sandip Shrestha

We are always optimizing our web pages and applications to open in a zippy. But, sometimes, it is necessary to let the users wait for a brief moment for all the data and pages to load. We will need something to get the users’ attention and keep them on the site long enough for all the content to load or to notify them that work is being done in the background.

One way to do that is by showing a beautiful, engaging and informative loading animation or loading gif in the website whenever background tasks are running.

Below is the code for a simple Loader component in vue . We have two states isVisible to show/hide the loader and text to define the loading text.

animated loader
Loader Component

Using the loader in our Laravel application

<!DOCTYPE html><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
</head>

<body>
<main id="app">

@include('flash::message')
@yield('content')
{{-- Loader --}}
<loader :is-visible="isLoading"></loader>

</main>

</body>

</html>