Vue 3 Forms and Validations with VueFormify and yup
Tags: vue, forms, validations, yup
Published: 2024-05-09 09:30:45

**What is VueFormify?**
[VueFormify](https://vue-formify.matenagy.me/) is a lightweight form building package I working on since last year. It is not a UI library although it contains some basic inputs(without styles) and you can easily create custom inputs.

It also have wrapper for several [UI libraries](https://vue-formify.matenagy.me/docs/third-party-ui-integrations/) and [schema validators](https://vue-formify.matenagy.me/docs/form-level-validation/) which can be added by package managers.

**Some feature:**

- Auto collect values
- Nested Objects and Arrays
- Form level validation with the most popular schema validators
- Easy to integrate
- Lightweight (~3kb gzipped)

**Let’s make our first form!**
We will create a simple login form with yup schema validator. With yup we can easily define nested object rules which make client-side validation much more easier. Check [yup documentation](https://github.com/jquense/yup) for more details.

First we need to install the required packages:

```bash
npm i vue-formify yup @vue-formify/yup
```

Because VueFormify build to [support multiple schema validators](https://vue-formify.matenagy.me/docs/form-level-validation/) we need to install `@vue-formify/yup` which contains the wrapper for yup schema object.

```ts
import { FormifyForm, FormifyError, FormifyInput } from 'vue-formify';
import { schemaFromYup } from '@vue-formify/yup';
import * as yup from 'yup';
```
After we install and import the required packages we can define our rules and create our function which handle our submit event:
```html
<script setup lang="ts">
import { FormifyForm, FormifyError, FormifyInput } from 'vue-formify';
import { schemaFromYup } from '@vue-formify/yup';
import * as yup from 'yup';

const schema = schemaFromYup(
  yup.object({
    email: yup.string().email('Invalid email').required('Required field'),
    password: yup.string().required('Required field'),
  })
);

const sendForm = (data) => {
  console.log('data: ', data);
};

</script>
```
Our next step is to create the form itself.

The form automatically extract the data:

```html
<template>
  <FormifyForm :validation-schema="schema" @submit="sendForm">
    <FormifyInput name="email" />
    <FormifyInput name="password" />

    <button type="submit">Submit</button>
  </FormifyForm>
</template>
```
Here is the full code:
```html
<script setup lang="ts">
import { FormifyForm, FormifyInput } from 'vue-formify';
import { schemaFromYup } from '@vue-formify/yup';
import * as yup from 'yup';

const schema = schemaFromYup(
  yup.object({
    email: yup.string().email('Invalid email').required('Required field'),
    password: yup.string().required('Required field'),
  })
);

const sendForm = (data) => {
  console.log('data: ', data);
};
</script>
<template>
  <FormifyForm :validation-schema="schema" @submit="sendForm">
    <FormifyInput name="email" />
    <FormifyInput name="password" />

    <button type="submit">Submit</button>
  </FormifyForm>
</template>
```
Here is a stackblitz where you can play around:
{% embed https://stackblitz.com/edit/vitejs-vite-frb9ke?embed=1&file=src%2FApp.vue %}

This is a very basic example and in the future I will make other post about using more advanced forms with different schema validators and UI libraries.

If you find this helpful please leave a comment or a give a ⭐️ on [VueFormify github page](https://github.com/mateenagy/vue-formify). I really appreciate any feedback.