Lightweight, practical validation for Vue. Only 40 lines of code. No special components to wrap your forms. No proprietary schema syntax to learn. Just bring your favorite schema library and go.
🔌 Works with Zod, Yup, Valibot, and any other Standard Schema library.
npm i validation-composableimport { useValidation } from 'validation-composable' const { validate, issues } = useValidation(data, schema)<script setup> // Use your own data (Reactive, Ref, Pinia, etc.) const data = reactive({ subject: '', body: '', }) // Use your favorite schema library const schema = z.object({ subject: z.string().min(1, 'Subject is required'), body: z.string().min(1, 'Body is required'), }) // Pass the data and schema to the composable const { validate, issues } = useValidation(data, schema) // Validate before submission. It auto-validates on data changes. async function send() { const valid = await validate() if (!valid) return … } </script> <template> <form @submit="send"> <input v-model="data.subject" :class="{ 'border-red': issues.subject }" /> <span v-if="issues.subject">{{ issues.subject[0] }}</span> <textarea v-model="data.body" :class="{ 'border-red': issues.body }" /> <span v-if="issues.body">{{ issues.body[0] }}</span> </form> </template>💡 Pro Tip: Consider creating reusable input components to display validation errors automatically. This eliminates repetition and ensures consistent styling across your forms.
const { validate, issues, clearIssues } = useValidation(data, schema)validate(): validates and fillsissues; returns true when validissues: reactive object that mirrors your data; failing fields contain arrays of error messagesclearIssues(): clears all issues