Components

NotMessage

A component for automatically displaying validation error messages for a specific field.

NotMessage is a convenient component that listens to validation errors for a specific field and renders them automatically. It's smart enough to only show the first relevant error message.

Usage

form.vue

<template>
<NotField name="email" v-slot="{ methods, name }">
  <input v-model="state.email" v-bind="methods" :id="name" />

  <!-- NotMessage will automatically show errors for 'email' -->
  <NotMessage name="email" />
</NotField>
</template>

API

Props

Prop	Type	Default	Description
`name`	`string`	Required	The path to the field in the form state.
`as`	`string`	`'span'`	The HTML tag to render the message as.

Slots

`default`

You can use the default slot to customize how the message is rendered.

Scope:

Property	Type	Description
`message`	`string \| undefined`	The first validation error message for the field.

Example:

form.vue

<template>
<NotMessage name="email" v-slot="{ message }">
    <span v-if="message" class="text-red-500 text-sm">
      <Icon name="i-tabler-alert-triangle" class="inline w-4 h-4 mr-1" />
      {{ message }}
    </span>
</NotMessage>
</template>

Internal Logic

NotMessage uses getFieldErrors from the current form context.
It reactively updates whenever the errors array for the specified name changes.
If no errors exist, it renders nothing.

NotArrayField

A specialized component for managing dynamic lists of fields with ease.

Shadcn Vue

Build forms in Vue using NotForm, shadcn-vue, and Zod.