Get the latest Laravel/PHP jobs, events and curated articles straight to your inbox, once a week
Source: adrien.poupa.fr
Creating a Global Loader Component in Vue.jsCategory: api, javascript
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.
This number is increased or decreased using Axios interceptors, meaning they will be triggered whenever you do a call to axios[get|post|put|patch|delete|etc].
Whatever you want to do, you can know if there is a request pending by adding a mapState to your computed block: Then, in your layout template or wherever, you can do as follows: My Loader component simply shows a Vuetify v-progress-circular component, but this is of course entirely up to you.
This number is increased or decreased using Axios interceptors, meaning they will be triggered whenever you do a call to axios[get|post|put|patch|delete|etc].
Whatever you want to do, you can know if there is a request pending by adding a mapState to your computed block: Then, in your layout template or wherever, you can do as follows: My Loader component simply shows a Vuetify v-progress-circular component, but this is of course entirely up to you.
Newsletter
ToastMail
Achieve superior email deliverability with ToastMail! Our AI-driven tool warms up inboxes, monitors reputation, and ensures emails reach their intended destination. Sign up today for a spam-free future.
Community Partners
Laravel/PHP Careers