Install FontAwesome Icon for Loading Animation
yarn add @fortawesome/fontawesome-svg-coreyarn add @fortawesome/free-solid-svg-iconsyarn 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';library.add(faSpinner);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
<template> <div> <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> <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> <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> </div> </div> </form> </div></template><script>import axios from 'axios'export default { data() { return { email: '', state: { isSending: false } } }, methods: { onSubmit() { this.save(); }, save() { this.state.isSending = true; axios({ method: 'post', url: '/functions/request_invite', data: { email: this.email } }) .then((response) => { this.state.isSending = false const data = response.data console.log(data) }) .catch((error) => { this.state.isSending = false console.log(error) }); } }}</script>
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.