Vue.js Disable Button (Prevent Double Click) With Loading Animation During Network Request (Ajax)

June 2, 2019

Install FontAwesome Icon for Loading Animation

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/vue-fontawesome
import { library } from '@fortawesome/fontawesome-svg-core';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

Vue.component('font-awesome-icon', FontAwesomeIcon);

NOTE: Refer Using FontAwesome 5.1.x for Vue.js.

Install Axios for Ajax

yarn add axios

Vue.js Component

    <form @submit.prevent="onSubmit" class="needs-validation" novalidate>
      <div class="form-row  justify-content-md-center">
        <div class="my-3">Join our early access program and be the first to experience the warmth of 暖心芽.</div>
      <div class="form-row justify-content-md-center">
        <div class="col-md-auto mb-3">
          <label for="inputEmail" class="sr-only">Your email</label>
          <input v-model="email" class="form-control" name="email" type="email" id="inputEmail" placeholder="Your email">
        <div class="col-md-auto mb-3">
          <button type="submit" class="btn btn-primary" style="position: relative;" :disabled="state.isSending">Request Invite <font-awesome-icon :icon="['fas', 'spinner']" pulse size="lg" style="margin: auto; position: absolute; top: 0;  bottom: 0; left: 0; right: 0; " v-show="state.isSending" /></button>

import axios from 'axios'

export default {
  data() {
    return {
      email: '',
      state: {
        isSending: false
  methods: {
    onSubmit() {;
    save() {
      this.state.isSending = true;
        method: 'post',
        url: '/functions/request_invite',
        data: {
      .then((response) => {
        this.state.isSending = false
        const data =
      .catch((error) => {
        this.state.isSending = false

NOTE: Refer Setup Bootstrap 4 with Vue Cli 3 for Form CSS.

NOTE: Refer Pre-launch Signup Email Component With VuePress/Vue.js and Cloud Functions for a more complete example.

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.