Vue-form-loader NPM

Vue Form Loader Directive

Use this Vue directive to add a loader on a <form>s submit event.

Installation

You can install the package via yarn:

yarn add vue-form-loader

or npm:

npm install vue-form-loader --save

Usage

Import the directive and use it:

// Eg. in app.js
import FormLoader  from 'vue-form-loader';
Vue.use(FormLoader);

There are several ways to use the directive on a <form>.

Bind the directive automatically to all `<form>` elements:

// Eg. in app.js
const app = new Vue({
    el: '#app',
    mounted() {
        FormLoader.autoBindToForms();
    }
});

Add the directive to a regular `<form>`:

<form v-loading>
    <button type="submit">Submit form</button>
</form>

Add the directive to a Vue-component `<form>` to sync the loading state:

<template>
    <form v-loading="loading">
        <button type="submit">Submit form</button>
    </form>
</template>
<script>
    export default {
        data() {
            return {
                loading: false
            }
        }
    }
</script>

The loader class

You need to create the css for button loader yourself. When a form submits, the class is-loading will be added to the submit button (must be of `type="submit").

To change which class the directive adds/removes:, set FormLoader.loadingClass in your app.js

Disabling

On form submission, the submit button(s) will be disabled to prevent erroneous double submissions. Buttons with the name attribute will however not be disabled since that would prevent them from being included in the request. To make sure they are disabled, use css and target the loading class instead.