How To Display A Loader While Sent Request Is In Progress In Vue

Step: 1 Create a Login or Register component

Here I create login component 

Login.vue

<template>
    <div class="container">
        
         <div v-if="loading">
            <!-- here put a spinner or whatever you want to do when request is on proccess -->
            <div class="se-pre-con"></div>
        </div>

        <div v-if="!loading" class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Login vue</div>

                    <div class="card-body">
                        <form>
                            <div class="form-group row">
                                <label for="email" class="col-sm-4 col-form-label text-md-right">E-Mail Address</label>

                                <div class="col-md-6">
                                    <input id="email" type="email" v-bind:class="{ 'is-invalid' : error }" class="form-control " v-model="email" required autofocus>
                                    <small class="text-danger" >{{ error }} </small>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="password" class="col-md-4 col-form-label text-md-right">Password</label>

                                <div class="col-md-6">
                                    <input id="password" type="password" class="form-control" v-model="password" required>
                                   <router-link :to="{ name: 'email' }" class="text-danger">Forget Your Password ?</router-link>
                       
                                </div>
                            </div>
                            <div class="form-group row mb-0">
                                <div class="col-md-8 offset-md-4">
                                    <button type="submit" class="btn btn-primary" @click="handleSubmit">
                                        Login
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

After that add CSS code for Loader image.

 <style type="text/css">
        .js #loader { display: block; position: absolute; left: 100px; top: 0; }
        .se-pre-con {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 99;
            background: url("https://wpamelia.com/wp-content/uploads/2018/11/ezgif-2-6d0b072c3d3f.gif") center no-repeat #fff;
        }
    </style>

Add Vue Code

<script>
 
    export default {
        data(){
            return {
                email : "",
                password : "",
                error    : "",
                loading: false,
                name: 'vue-title',
                props: ['title'],
            }
        },
        methods : {
            handleSubmit(e) {
                e.preventDefault()
                if (this.password.length > 0){
                     this.loading = true ;
                    axios.post('api/login', {
                        email: this.email,
                        password: this.password
                      }).then((response) => {
                        
                        let is_admin = response.data.user.is_admin
                        localStorage.setItem('user',JSON.stringify(response.data.user))
                        localStorage.setItem('jwt',response.data.token)
                        this.loading = false;
                        if (localStorage.getItem('jwt') != null){
                            this.$emit('loggedIn')
                            if(this.$route.params.nextUrl != null){
                                this.$router.push(this.$route.params.nextUrl)
                            }
                            else {
                                if(is_admin== 1){
                                    this.$router.push('admin')
                                }
                                else {
                                    
                                    this.$router.push('dashboard')
                                }
                            }
                        }
                      })
                      .catch(error => {
                        console.error(error);
                        this.loading = false
                        if (error.response.status == 401){
                            this.error = error.response.data.error
                        }
                      });
                }
            }
        },
    }
</script>

After add code successfully run your application 

Don't forget to run this flowing command.

After that Received Response from backend this loader will we automatically hide. So here we will complete a blog post on How To Display A Loader While Sent Request Is In Progress In Vue.