Published:

Vue 3 + VeeValidate - Show Loading Spinner on Form Submit during HTTP Request to API

Tutorial built with Vue 3.2.33 and VeeValidate 4.5.11

This is a quick example of how to display a loading spinner in Vue 3 with VeeValidate when a form has been submitted and an HTTP (AJAX) request has been sent to the API. A loading spinner indicates to the user that the form has been submitted and the browser is waiting for a response from the API.

Disable submit button while form is submitting

The below example also disables the form submit button while the AJAX request is in progress to prevent the user from double submitting the form by mistake.

VeeValidate

VeeValidate is a library for building, validating and handling forms in Vue.js. VeeValidate 4 was recently released and is compatible with Vue 3, the official docs are available at https://vee-validate.logaretm.com/v4.


Vue 3 Loading Spinner Example

The example Vue app contains a form with a single button that submits an HTTP POST request to a fake API endpoint. The fake endpoint waits two seconds to return a response so the loading spinner is displayed and the button is disabled in the form.

Here it is in action: (See on StackBlitz at https://stackblitz.com/edit/vue-3-veevalidate-show-loading-spinner-on-form-submit)


Vue 3 + VeeValidate App Component with Loading Spinner

In the script block of the app component, the onSubmit() method returns the result of a fetch HTTP POST request to the API.

The app component template contains a form with a single submit button. The form is built with the VeeValidate <Form /> component and calls the onSubmit() method when the form is submitted. The isSubmitting form state prop is provided to the form template via the scoped slot v-slot="{ isSubmitting }".

Don't forget to return a Promise from onSubmit()!!

The loading spinner shows when the VeeValidate isSubmitting prop is true. For this to work a promise (or async function) must be returned from the onSubmit() function. VeeValidate sets isSubmitting to true while the promise/async function is pending (neither resolved nor rejected).

If you forget to return a promise (I have a few times) the loading spinner will not display at all. You can test by removing the return from the onSubmit() function in the demo.

<script setup>
import { Form } from 'vee-validate';

import { fetchWrapper } from '@/helpers';

function onSubmit() {
    return fetchWrapper.post('/api/fake-end-point', {});
}
</script>

<template>
    <div class="card m-3">
        <h5 class="card-header">Vue 3 + VeeValidate - Show Loading Spinner on Form Submit</h5>
        <Form class="card-body" @submit="onSubmit" v-slot="{ isSubmitting }">
            <button class="btn btn-primary" :disabled="isSubmitting">
                <span v-show="isSubmitting" class="spinner-border spinner-border-sm mr-1"></span>
                Submit
            </button>
        </Form>
    </div>
</template>

 


Subscribe or Follow Me For Updates

Subscribe to my YouTube channel or follow me on Twitter, Facebook or GitHub to be notified when I post new content.

Other than coding...

I'm currently attempting to travel around Australia by motorcycle with my wife Tina on a pair of Royal Enfield Himalayans. You can follow our adventures on YouTube, Instagram and Facebook.


Need Some Vue 3 Help?

Search fiverr to find help quickly from experienced Vue 3 developers.



Supported by