Creating forms

Define our form

Since we're using TypeScript, we’ll start by defining the type for our form. Type definitions help reduce errors and provide autocompletion suggestions.

type FirstForm = {
	name: string;
	checked: boolean;
	nested: {
		text: string;
	}
	numbers: number[];
}

For simplicity in the next part we will create a login form so our type will look like this:

type LoginForm = {
	username: string;
	password: string;
}

Create a form

As mentioned above, we’ll use the useForm composable to create our form. The useForm composable returns all form-related components, methods, and variables we need.

For more details, see the useForm composable and Form Component section.

<script setup lang="ts">
import { useForm } from 'vue-formify'; 

type LoginForm = {
	username: string;
	password: string;
}

const { Form } = useForm<LoginForm>(); 

</script>
<template>
	<Form></Form>
</template>