UseVueValidateSchema

Use Vue As Is, Simple Form Validation.

Schema Based Validation ･ Little Changes ･ Developer experience

Features

• 💯 Schema Based Validation: Use powerful schema-based libraries for validation (e.g. Zod, Valibot) so you don't need to learn this library validation rules.
• 🤏 Little Changes: Use Vue as is, so need little changes. Making integration with custom components is easy.
• 🛠️ Developer Experience: It enhances your TypeScript development experience by being type-safe and type-hinting enabled.

Installation

# pnpm
pnpm i use-vue-validate-schema zod
# or
pnpm i use-vue-validate-schema valibot

# npm
npm i use-vue-validate-schema zod
# or
npm i use-vue-validate-schema valibot

# yarn
yarn add use-vue-validate-schema zod
# or
yarn add use-vue-validate-schema valibot

Usage

<script setup lang="ts">
import { useVueValidateZod } from 'use-vue-validate-schema/zodV4';
import { ref } from 'vue';
import { z } from 'zod/v4';

const schema = z.object({
  username: z.string().trim().min(1),
  email: z.string().email(),
});

const modelValue = ref({
  username: '',
  email: '',
});

const { validateSubmit, ErrorMessage } = useVueValidateZod(schema, modelValue);

const handleSubmit = validateSubmit((validValue) => {
  // Executed only when validation passes
  console.log(validValue);
});
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="modelValue.username" />
    <ErrorMessage field="username" />

    <input v-model="modelValue.email" />
    <ErrorMessage field="email" />

    <button type="submit">Submit</button>
  </form>
</template>