NotMessage

<NotMessage> is a small 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.

Props

path

path identifies the field whose validation error should be displayed.

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

<NotMessage path="email" />

For nested fields:

<NotMessage path="user.email" />

as

By default, the error message is rendered as a <span>.

Use as to change the rendered element or provide a Vue component:

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

You can also provide a component:

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

This is useful when your application has a shared component for validation messages.

form

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

You can explicitly provide a form instance:

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

It is required when using NotMessage outside of a NotForm.

Slot Props

The default slot receives the current error message:

Because message is optional, it may be undefined when there is no active error.

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

Basic Usage

The most common usage is alongside a NotField:

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

When validation fails, NotMessage displays the first validation error associated with email.

When there are no active errors, it renders nothing.

Custom Error Display

Use the default slot when you need control over the message markup:

<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"
  >
    <span class="error-text">
      {{ message }}
    </span>
  </NotMessage>
</NotField>

This lets you add your own classes, icons, wrappers, or other presentation.

For example:

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

Rendering as Another Element

Use the as prop when you only need to change the underlying element without replacing the slot content:

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

This renders the validation message as a paragraph instead of the default <span>.

Nested Fields

NotMessage accepts nested field paths using dot notation:

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

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

The message is resolved for the exact field path provided.

Standalone Usage

NotMessage can also be used outside a NotField.

When there is no surrounding NotForm, provide the form instance explicitly:

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

This makes NotMessage useful when the field input and error message are rendered in different parts of the component tree.

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:

<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">
    <p
      v-for="(error, index) in errors"
      :key="index"
    >
      {{ error.message }}
    </p>
  </div>
</NotField>

This gives you access to the complete StandardSchemaV1.Issue[] returned by validation rather than only the first message.

Conditional Rendering

You generally do not need to conditionally render <NotMessage> yourself.

It automatically renders nothing when there is no active validation error:

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

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

This makes it safe to place the component directly below an input without additional error checks.

Custom Component

The as prop also accepts a Vue component, making it possible to integrate your own error-message component:

<NotMessage
  :as="FormError"
  path="email"
/>

The component receives the rendered message through the normal Vue component rendering mechanism.