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 setup>
import { Form, Field, ErrorMessage } from 'vee-validate';
import * as yup from 'yup';

const validateEmail = yup.string().required().email();
</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>

API

Props

Slots

default

The default slot gives you access to the following props:

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.