validation-composable

✅ Validation Composable

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.

Installation

npm i validation-composable

Usage

import { useValidation } from 'validation-composable'

const { validate, issues } = useValidation(data, schema)

Example

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

API

const { validate, issues, clearIssues } = useValidation(data, schema)

• validate(): validates and fills issues; returns true when valid
• issues: reactive object that mirrors your data; failing fields contain arrays of error messages
• clearIssues(): clears all issues