Getting Started

Installation

npm

$ npm install @vuetils/form

pnpm

$ pnpm add @vuetils/form@latest

yarn

$ yarn add @vuetils/form

Usage

You start of by creating a Form instance with useForm(). The function takes in an object where every property represents an input element in your form. The key of the property corresponds to the name attribute of an input element and the value is an array where the first element is the initial value of the input and the second element is an array of validators.

<script setup>
import { UForm, UInput, email, minLength, required, useForm } from '@vuetils/form';

const form = useForm({
	email: ['', [required, email]],
	password: ['', [required, minLength(6)]],
});
</script>

@vuetils/form provides two helper componets that automatically link a Form instance with your input elements. The components handle two-way data binding and add validation classes like v-valid or v-submitted.

<template>
	<UForm :form="form">
		<label>
			Email:
			<UInput type="email" name="email" />
		</label>

		<label>
			Password:
			<UInput type="password" name="password" />
		</label>

		<button>Submit</button>
	</UForm>
</template>

The rendered form will look something like this. Play around with it and see how the errors and state change while you are typing.

Email: // errors: [required, email] state: [invalid, pristine] Password: // errors: [required, minLength] state: [invalid, pristine]

What's Next?

• To discover more about what the Form and Field instances can do, check out the useForm and useField guide.

• To better understand what is going on under the hood of UForm and UField, read about it in the components guide.

• Find out about all the built in validators or learn how you can easily write your own validator.

• Checkout what plugins are, explore a list of first party plugins or learn how you can write your own plugin.