NotMessage
Renders the first validation error for a field. Renders nothing when there is no error.
<NotMessage> reads the first error for a field path from form.errorsMap and renders it. When the field has no error, nothing is added to the DOM.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
path | string | Yes | Dot-separated path to the field whose error should be displayed. |
as | string | No | HTML tag to render as. Defaults to span. |
form | NotFormInstance<any> | No | Explicit instance override. Required when used outside of <NotForm>. |
Slots
| Slot | Props | Description |
|---|---|---|
default | { message: string | undefined } | The first active error message for the field. undefined when there is no error. When this slot is used, <NotMessage> renders no element of its own — you control the output. |
Usage
Default
Renders a <span> with the error text. Renders nothing when there is no error.
Custom slot rendering
When you need an icon, wrapper, or different structure — use the default slot. The v-if on message is your responsibility.
<template>
<NotMessage
v-slot="{ message }"
path="email"
as="div"
class="flex items-center gap-1.5 text-sm text-error"
>
<Icon
v-if="message"
name="i-lucide-circle-alert"
class="block-4 inline-4 shrink-0"
/>
<span>{{ message }}</span>
</NotMessage>
</template>
Singleton
<template>
<NotMessage
:form="form"
path="email"
/>
</template>