Server Side Validation Error show in Vuetify

In Vuetify, you can use the rules prop of the v-text-field component to add validation rules for your form fields. You can pass an array of functions to the rules prop, and each function should return a boolean indicating whether the input is valid or not. If the input is not valid, you can return a string with an error message, which will be displayed to the user.

To add a validation rule for email existence after checking it on the server side, you can create a function that makes an API call to your server to check the email existence and returns the appropriate error message if the email already exists. Here's an example of how you might implement this:

<template><v-form ref="form" v-model="valid"><v-text-fieldv-model="email":rules="emailRules"label="Email"required
    ></v-text-field></v-form></template><script>export default {
  data() {
    return {
      email: '',
      valid: true,
      emailRules: [
        (v) => !!v || 'Email is required',
        (v) => /.+@.+\..+/.test(v) || 'Email must be valid',
        async (v) => {
          const response = await checkEmailExistence(v)
          if (response.data.exists) {
            return 'Email already exists'
          }
          return true
        }
      ],
    }
  },
  methods: {
    async checkEmailExistence(email) {
      return await axios.post('/check-email', { email })
    }
  }
}
</script>

Here checkEmailExistence is your API call that check whether the email exists or not. You can also add more validation rules in the emailRules array.

Note that the third function in the emailRules array is an async function, which allows you to make the API call and wait for the response before returning the error message or true if the email does not exist.

When you submit the form, you can use the ref attribute on the v-form component to access the form's valid property to check if the form is valid.