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

Generic placeholder image
Brijpal Sharma
vuejs  

Date:-April 04th, 2020 , Posted On:- Web Development


In this blog, we learn How To Display A Loader While Sent Request Is In Progress In Vue.

So, To demonstrate this loader function. we will create a component for login or register and then send a request to the server. while sending a request to the server we will show a loader animation or image on the page of login. so let's start.

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>

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

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.

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

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.

 

 

About the author

user profile
Brijpal Sharma

Hello, My Name is Brijpal Sharma. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of Codermen. I started this blog to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers...

0 comments

You must be logged in to post a comment.