alpine-livewire-errors.js

let alpineLoaded = false;
let livewireLoaded = false;

document.addEventListener('alpine:init', () => {
    alpineLoaded = true;
    setupLivewireErrorListener();
});

document.addEventListener('livewire:load', () => {
    livewireLoaded = true;
    setupLivewireErrorListener();
});

function setupLivewireErrorListener() {
    if (!alpineLoaded || !livewireLoaded) {
        return;
    }

    //Because errorBag is a global Alpine.reactive, it can be accessed inside alpine
    //via $watch(() => window.errorBag, val => errors = val.errors)
    window.errorBag = Alpine.reactive({errors:{}});

    window.Livewire.hook("message.processed", (message, component) => {

        let errorEvent;
        if (Array.isArray(message.response.serverMemo.errors) && message.response.serverMemo.errors.length === 0) {
            window.errorBag.errors = {};
            errorEvent = new CustomEvent('validation', {detail: {}});
        } else {
            window.errorBag.errors = message.response.serverMemo.errors
            errorEvent = new CustomEvent('validation', {detail: message.response.serverMemo.errors});
        }

        //dispatch custom validation event so it can be listened for via @validation.window or via @validation on the root level node
        window.dispatchEvent(errorEvent);
        component.el.dispatchEvent(errorEvent);
    });
}