Creating a reusable loader component in Vue Js

This is a simple control just to get you started creating components, once you get the hang of it, you can teach me some 🙂

<template>
    <div class="center-vh" v-if="show">
        <div class="spinner-dots">
            <span class="dot1"></span>
            <span class="dot2"></span>
            <span class="dot3"></span>
        </div>
    </div>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";

@Component({
  props: {
    show: Boolean   
  }
})
export default class LoaderComponent extends Vue {}
</script>

Let see how we can use this component in our main component.

<template>
    <div class="px-80 py-30">
       <!-- your other html code -->
       <Loader :show="showLoading"></Loader>
    </div>   
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import Loader from "../shared/Loader.vue";
import { userService } from "../../services/UserService";

@Component({
  components: {
    Loader,
    FormMessage
  }
})
export default class LoginComponent extends Vue {
  email: string = "";
  password: string = "";
  showLoading: boolean = false;
  
  private onSubmit() {  
      this.showLoading = true;
      userService
        .login({
          Email: this.email,
          Password: this.password
        })
        .then((response :any) => {
          this.showLoading = false;
          if (!response.is_error && response.content) {
            // your login on success full login
          } else {           
            // show error message to user   
          }
        })
        .catch(error => { 
          // show error message to user   
        });
    }
  }
}
</script>

According to Vue js components should be lower case  Ex: my <Loader> should be “<loader>” instead of