DEV Community

Cover image for Vue 3 Forms and Validations with VueFormify and yup
Máté Nagy
Máté Nagy

Posted on

Vue 3 Forms and Validations with VueFormify and yup

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
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)