NotMessage

Component for displaying validation errors for a specific field.

<NotMessage> is a component for displaying the validation error message for a specific field.

It automatically displays the first active validation error for the field and renders nothing when the field has no validation errors.

Unlike <NotField> and <NotArrayField>, <NotMessage> is not renderless — by default it renders a <span> element containing the error text, and it can be swapped for a different element or component with the as prop, covered below.

"Renders nothing when there are no errors" is literal here: the wrapping element itself is not rendered at all while the field has no active error, rather than being rendered empty. There's nothing in the DOM to select or style until there's a message to show.

Usage

The most common usage is alongside a <NotField>:

<template>
  <NotField
    v-slot="{ events, path }"
    path="email"
  >
    <label :for="path">Email</label>

    <input
      :id="path"
      v-model="form.values.email"
      v-bind="events"
      type="email"
    >

    <NotMessage :path="path" />
  </NotField>
</template>

When validation fails, <NotMessage> displays the first validation error associated with the email field, and nothing when there are no active validation errors.

Displaying Multiple Errors

<NotMessage> intentionally displays only the first active validation error.

If you need to display every validation issue for a field, use the field's errors slot prop instead:

<template>
  <NotField
    v-slot="{ events, path, errors }"
    path="email"
  >
    <input
      :id="path"
      v-model="form.values.email"
      v-bind="events"
      type="email"
    >

    <div v-if="errors.length > 0">
      <p
        v-for="(error, index) in errors"
        :key="index"
      >
        {{ error.message }}
      </p>
    </div>
  </NotField>
</template>

This gives you the complete list of validation issues instead of only the first message.

API

Props

path

Paths<TSchema> required

Field path whose first error message is shown.

It supports the same dot-separated paths used by <NotField>:

<template>
  <NotMessage path="email" />
</template>

For nested fields:

<template>
  <NotMessage path="user.email" />
</template>

form

NotFormAPI<TSchema>

Form instance. Overrides <NotForm> inject.

By default, <NotMessage> uses the form instance provided by a surrounding <NotForm>.

You can explicitly provide a form instance when needed:

<template>
  <NotMessage
    :form="form"
    path="email"
  />
</template>

An explicit form takes priority over the form provided by a <NotForm> ancestor.

This is also required when using <NotMessage> as a standalone component outside of a <NotForm>.

Component | string

Root element or component used to render the message. Defaults to 'span'.

Pass a string tag name to change the rendered element:

<template>
  <NotMessage
    path="email"
    as="p"
  />
</template>

Or pass a component — useful when your application already has a shared component for validation messages:

<template>
  <NotMessage
    path="email"
    :as="ErrorMessage"
  />
</template>

When as is a component, the message is passed as default slot content, not as a prop. ErrorMessage in the example above must render its own default <slot /> for the message text to appear — a component that instead expects something like a message prop will render with no visible text. If you need to reshape the message before it reaches a component like that, use the default slot documented below instead of as directly.

Any attribute passed to <NotMessage> that isn't path, form, or as is forwarded to the rendered element — the same way native HTML attributes fall through on any Vue component. This is how you'd attach a class, an id, or a data-* attribute for styling:

<template>
  <NotMessage
    path="email"
    class="text-sm text-red-500"
  />
</template>

Slots

`default`

The default slot receives the current error message.

<template>
  <NotMessage
    v-slot="slotProps"
    path="email"
  >
    ...
  </NotMessage>
</template>

message

string | undefined

The first active error message for the specified field.

If no error is present for the field, this value is undefined.

<template>
  <NotMessage
    v-slot="{ message }"
    path="email"
  >
    <span>{{ message }}</span>
  </NotMessage>
</template>

Because <NotMessage> already renders nothing when there's no error, you don't need to guard against message being undefined yourself — the slot's content only ever renders while there's a message to show.

Even so, using the slot is useful when you want control over the surrounding markup — for example, adding an icon or custom classes, rather than the plain text <NotMessage> renders by default:

<template>
  <NotField
    v-slot="{ events, path }"
    path="email"
  >
    <input
      :id="path"
      v-model="form.values.email"
      v-bind="events"
      type="email"
    >

    <NotMessage
      v-slot="{ message }"
      :path="path"
      as="p"
    >
      <span class="flex items-center gap-2">
        <Icon name="tabler:alert-circle" />
        {{ message }}
      </span>
    </NotMessage>
  </NotField>
  /template>
</template>

NotField

Renderless component for individual form fields with validation state and event handlers.

NotArrayField

Renderless component for managing dynamic array fields with typed items, stable keys, validation state, and array operations.