ErrorMessage

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:

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

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

export default {
  components: {
    Form,
    Field,
    ErrorMessage,
  },
  data() {
    const validateEmail = yup.string().required().email();

    return {
      validateEmail,
    };
  },
};
</script>

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>Error:</p>
  <p>{{ message }}</p>
</ErrorMessage>

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>Error:</p>
  <p>{{ message }}</p>
</ErrorMessage>

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.

API

Props

PropTypeRequired/DefaultDescription
asstring"span"The element to render as a root node
namestringRequiredThe field's name to display messages for

Slots

default

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

Caveats

  • 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.