vue-yup-form

Appearance

On this page

Getting Started ​

Installation ​

sh
$ npm install yup vue-yup-form
sh
$ yarn add yup vue-yup-form
sh
$ pnpm add yup vue-yup-form

Architecture ​

  • Headless form validation: i.e. vue-yup-form does not export UI-related components.
  • High version compatibility
    • both Vue 2 and 3 are supported (powered by vue-demi)
    • compatible with both yup ^1.0.0 and yup ^0.32.11
  • This library is inspired by useValidation() in vue-composable.

Code ​

Here's an example using <script setup>:

vue
<script setup lang="ts">
import { defineForm, field } from "vue-yup-form";
import * as yup from "yup";

const form = defineForm({
  firstName: field("", yup.string().required()),
  lastName: field("", yup.string().required()),
  age: field<number | null>(null, yup.number().required().integer().min(18)),
});

form.firstName.$error; // ValidationError: this is a required field
form.firstName.$value = "Alice";
form.firstName.$error; // undefined

form.age.$error; // ValidationError: this is a required field
form.age.$value = 15;
form.age.$error; // ValidationError: this must be greater than or equal to 18
form.age.$value = 20;
form.age.$error; // undefined
</script>

<template>
  <input name="firstName" v-model="form.firstName.$value" />
  <span v-if="form.firstName.$error">{{ form.firstName.$error.message }}</span>

  <input name="lastName" v-model="form.lastName.$value" />
  <span v-if="form.lastName.$error">{{ form.lastName.$error.message }}</span>

  <input name="age" type="number" v-model="form.age.$value" />
  <span v-if="form.age.$error">{{ form.age.$error.message }}</span>
</template>