Composable para manejar errores al hacer una peticion a un backend Laravel. Utiliza la libreria vue-sonner para retroalimentar al usuario.

useAxiosErrors.ts

import { ref } from 'vue';
import { AxiosError } from 'axios';
import { toast } from 'vue-sonner';

type LaravelError = {string : string};

export const useAxiosErrors = () => {

    const errors = ref<LaravelError | object>({});

    const handleAxiosError = (error : AxiosError) => {
        console.log("New Axios error : ", error);
        const status = error.status ?? 'desconocido';
        const data = error?.response?.data;
        const title = `Error (${status})`;
        const message = data?.message ?? "Error desconocido";
        if(data?.errors){
            errors.value = formatLaravelErrors(data?.errors)
        }
        toast.error(title, {description : message});
    }

    const formatLaravelErrors = ( errors : {string : array}) => {
        const keys = Object.keys(errors);
        const errorsFormatted = {};
        keys.forEach(k => {
             errorsFormatted[k] = errors[k][0]
        });

        return errorsFormatted;

    }

    return {
        errors,
        handleAxiosError
    }
}

z-example.vue

<script setup lang="ts">
import { OrderPaymentForm } from '@/types/order';
import OrderPaymentsTable from './OrderPaymentsTable.vue';
import InputForm from '@/components/form/InputForm.vue';
import { ref } from 'vue';
import { Button } from '@/components/ui/button';
import http from '@/lib/http';
import { store } from '@/actions/App/Http/Controllers/OrderPaymentController'
import SelectCurrencies from '@/components/currencies/SelectCurrencies.vue';
import { useAxiosErrors } from '@/composables/useAxiosErrors';
import { router } from '@inertiajs/vue3';

const props = defineProps<{
    order_id : number
}>();

const payment = ref<OrderPaymentForm>({
    method : '',
    amount : undefined,
    notes : '',
    paid_at : undefined,
    currency_id : undefined,
});

const {errors, handleAxiosError} = useAxiosErrors();

const handleSumbit = () => {
    const url = store({order : props.order_id}).url;
    http.post(url, payment.value)
        .then(() => {
            router.reload();
        })
        .catch(handleAxiosError)
}

</script>

<template>
    <form @submit.prevent="handleSumbit" class="flex flex-col gap-4">
        <InputForm v-model="payment.method" type="text" id="method" label="Metodo de pago" :error="errors.method" required />
        <InputForm v-model="payment.amount" type="number" id="amount" label="Monto" required :error="errors.amount" />
        <SelectCurrencies v-model="payment.currency_id" required/>
        <InputForm v-model="payment.paid_at" type="date" id="amount" label="Fecha" required :error="errors.paid_at" />
        <div>
            <Button type="submit">Crear</Button>
        </div>
    </form>
</template>

<style scoped>

</style>

¿Como usarlo?

• importas la funcion useAxiosErrors
• Extraer la variable errors, y la funcion handleAxiosError
• Utilizar la funcion handleAxiosError en un catch de una peticion de axios y pasarle como parametro el error.
• Utilizar errors.['field'] para obtener el error del campo enviado.

Ejemplo:

import { useAxiosErrors } from '@/composables/useAxiosErrors';
const {errors, handleAxiosError} = useAxiosErrors();

Cuando utilices handleAxiosError, automaticamente la variable errors se rellenera con los errores que vengan en la respuesta de Laravel.