Form plugin for Alpine.js

form.js

document.addEventListener('alpine:init', () => {
    Alpine.magic('form', el => () => {
        return Alpine.reactive({
            processing: false,
            recentlySuccessful: false,
            errors: {},
            submit() {
                return axios.post(el.action, el).then(response => {
                    this.errors = {};
                    this.recentlySuccessful = true;
                    this.dispatch('success', response.data);

                    setTimeout(() => this.recentlySuccessful = false, 3000);

                    return Promise.resolve(response.data);
                }).catch(({ response }) => {
                    this.dispatch('error', response);
                    this.errors = response.data.errors ?? {};

                    return Promise.reject(response);
                }).finally(() => this.dispatch('finish'));
            },
            dispatch(event, data) {
                el.dispatchEvent(new CustomEvent(event, { detail: data, bubbles: true }));
            },
        });
    });
});

Usage

<form
    action="/profile"
    x-data="{ form: $form() }"
    @submit.prevent="form.submit()"
    @success="..."
>
    @method('patch')

    <input name="name">
    <p x-text="form.errors.name" class="text-red-500"></p>

    <input name="email" type="email">
    <p x-text="form.errors.email" class="text-red-500"></p>
    
    <button type="submit" :disabled="form.processing">
        Submit
    </button>
</form>