veevalidate-form-validatorlisted
Install: claude install-skill smicolon/ai-kit
# VeeValidate + Zod Form Validator
## Activation Triggers
This skill activates when:
- Creating form components
- Mentioning "form", "validation", "input"
- Writing `<form>` or v-model
- Handling user input
## Required Pattern
```vue
<script setup lang="ts">
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import { z } from 'zod'
// Define schema with Zod
const schema = toTypedSchema(
z.object({
email: z.string().email('Invalid email'),
password: z.string().min(8, 'Password too short'),
})
)
// Create form with VeeValidate
const { handleSubmit, errors, defineField } = useForm({
validationSchema: schema,
})
// Define reactive fields
const [email, emailAttrs] = defineField('email')
const [password, passwordAttrs] = defineField('password')
// Type-safe submit handler
const onSubmit = handleSubmit((values) => {
// values is typed: { email: string, password: string }
console.log(values.email, values.password)
})
</script>
<template>
<form @submit="onSubmit">
<div>
<label for="email">Email</label>
<input
id="email"
v-model="email"
v-bind="emailAttrs"
type="email"
aria-describedby="email-error"
/>
<span v-if="errors.email" id="email-error" class="error" role="alert">
{{ errors.email }}
</span>
</div>
<div>
<label for="password">Password</label>
<input
id="password"
v-model="password"
v-bind