Vue 3 Forms and Validations with VueFormify and yup

Máté Nagy — Thu, 09 May 2024 09:30:45 +0000

What is VueFormify?
VueFormify 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 and schema validators 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 for more details.

First we need to install the required packages:

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

Because VueFormify build to support multiple schema validators we need to install @vue-formify/yup which contains the wrapper for yup schema object.

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:

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

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

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

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. I really appreciate any feedback.

Forem: Máté Nagy

Vue 3 Forms and Validations with VueFormify and yup