Validation while issue form submitting

Step 01: Adding validationErrors variable in the issues.js composable as reactive and using it inside catch of storeIssue() method to catch any errors

import { ref } from 'vue'

export default function useIssues() {
    .....
    const validationErrors = ref({})
    
    const storeIssue = async (issue) => { 
        axios.post('/api/issues', issue)
            .then(response => {
                router.push({ name: 'issues.list' })
            })
            .catch(error => { 
                if (error.response?.data) {
                    validationErrors.value = error.response.data.errors
                }
            }) 
    }     
    
    return { issues, getIssues, storeIssue, validationErrors }

Step 02: Now, in Create.vue component inside resources/js/components/Issues folder we need to get the validationErrors variable and show errors for each input.

<script setup>
......
const { storeIssue, validationErrors } = useIssues() 

// inside template 
<form @submit.prevent="storeIssue(issue)">
    <div class="mb-3">
    <label for="email">Title:</label>
    <input v-model="issue.title" type="text" class="form-control" id="text" placeholder="Enter title" name="title">                               
    <div v-for="message in validationErrors?.title">
        <span class="text-danger">{{ message }}</span>
    </div>
    </div>
    <div class="mb-3">
    <label for="email">Description:</label>
    <textarea v-model="issue.description"  class="form-control" rows="5" id="description" name="description"></textarea>                              
    <div v-for="message in validationErrors?.description">
        <span class="text-danger">{{ message }}</span>
    </div>
    </div>                                
    <div class="mb-3">
        <label for="pwd">Client:</label>
        <select v-model="issue.client_id" id="client_id" class="form-control" name="client_id">
            <option value="" selected>-- Choose client --</option>
            <option v-for="client in clients" :value="client.id"> 
                {{ client.name }} 
            </option> 
        </select>      
        <div v-for="message in validationErrors?.client_id">
            <span class="text-danger">{{ message }}</span>
        </div>
    </div>
    <button type="submit" class="btn btn-primary cursor-not-allowed">
        <span>Save</span>                                    
    </button>
</form>    

Now if we submit the form without input values there will be validation error showing under each of input fields ( title, description and client id )

Step 03: Lastly, If we want to customize field names when validation message is showing for example instead of client id if we need to show client then we can do like following

// in StoreIssueRequest.php adding attributes() method 
public function attributes(): array
{
    return ['client_id' => 'client'];
}