The ErrorMessage component is used to conveniently display error messages without resorting to scoped slots on either the Form and Field components. It also renders nothing if there are no messages for the associated field.

The basic usage looks like this:

    <Field name="email" type="email" :rules="validateEmail" />
    <ErrorMessage name="email" />

<script setup>
import { Form, Field, ErrorMessage } from 'vee-validate';
import * as yup from 'yup';

const validateEmail = yup.string().required().email();

Rendering Messages

The ErrorMessage component accepts an as prop that allows to control the root node to render for your error messages, by default it will render a span if none provided if there is an error message for the field.

vue<ErrorMessage name="email" as="p" />

For more flexible markup and the ability to render multiple root nodes, you can use the ErrorMessage component’s default scoped slot

vue<ErrorMessage name="email" v-slot="{ message }">
  <p>{{ message }}</p>

If an as prop is not provided while having a slot, it will render the slot contents only. Effectively becoming a renderless-component.

You can use a combination of both to render a root node with children:

vue<ErrorMessage as="div" name="email" v-slot="{ message }">
  <p>{{ message }}</p>

No Errors Rendering

When there are not any error messages for the field the <ErrorMessage /> component will render nothing, even if you used the slot or as prop.



asstring"span"The element to render as a root node
namestringRequiredThe field’s name to display messages for



The default slot gives you access to the following props:

Scoped PropTypeDescription
messagestringThe element’s error message

Check the sample above for rendering with scoped slots


  • The ErrorMessage component must be used inside a Form component otherwise it won’t be able to find the errors.
  • ErrorMessage component can only display errors for a field that exists within the same form, it cannot reference fields outside its own form.