@vorms/resolvers

Install

npm install @vorms/resolvers

Quickstart

Yup

Dead simple Object schema validation

<script setup lang="ts">
import { useForm } from '@vorms/core';
import { yupResolver } from '@vorms/resolvers/yup';
import * as yup from 'yup'

const { register, errors, handleSubmit } = useForm({
  initialValues: {
    account: '',
    password: '',
  },
  validate: yupResolver(yup.object({
    account: yup.string().required(),
    password: yup.string().required()
  })),
  onSubmit(values) {
    alert(JSON.stringify(values, null, 2));
  },
});

const { value: account, attrs: accountAttrs } = register('account');
const { value: password, attrs: passwordAttrs } = register('password');
</script>

<template>
  <form @submit="handleSubmit">
    <div>
      <input
        v-model="account"
        type="text"
        placeholder="Account"
        v-bind="accountAttrs"
      />
      <div v-show="'account' in errors">
        {{ errors.account }}
      </div>
    </div>
    <div>
      <input
        v-model="password"
        type="password"
        placeholder="Password"
        v-bind="passwordAttrs"
      />
      <div v-show="'password' in errors">
        {{ errors.password }}
      </div>
    </div>
    <div>
      <input type="submit" />
    </div>
  </form>
</template>

Zod

TypeScript-first schema validation with static type inference

<script setup lang="ts">
import { useForm } from '@vorms/core';
import { zodResolver } from '@vorms/resolvers/zod';
import z from 'zod'

const { register, errors, handleSubmit } = useForm({
  initialValues: {
    account: '',
    password: '',
  },
  validate: yupResolver(z.object({
    account: z.string().min(1),
    password: z.string().min(1)
  })),
  onSubmit(values) {
    alert(JSON.stringify(values, null, 2));
  },
});

const { value: account, attrs: accountAttrs } = register('account');
const { value: password, attrs: passwordAttrs } = register('password');
</script>

<template>
  <form @submit="handleSubmit">
    <div>
      <input
        v-model="account"
        type="text"
        placeholder="Account"
        v-bind="accountAttrs"
      />
      <div v-show="'account' in errors">
        {{ errors.account }}
      </div>
    </div>
    <div>
      <input
        v-model="password"
        type="password"
        placeholder="Password"
        v-bind="passwordAttrs"
      />
      <div v-show="'password' in errors">
        {{ errors.password }}
      </div>
    </div>
    <div>
      <input type="submit" />
    </div>
  </form>
</template>

Examples

• Validate With Yup
• Validate With Zod

Credits

API inspired by React Hook Form - Resolvers