The ErrorMessage component is used to conveniently display error messages without resorting to scoped slots on either the Form and Field components.

The basic usage looks like this:

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

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

export default {
  components: {
  data() {
    const validateEmail = yup.string().required().email();

    return {

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.

<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

<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:

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



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.