Getting started

Installation

pnpm i formango

The validation of this package relies on Zod, Valibot or ArkType, or any other schema library that implements the standard schema spec.

Why Go Bananas for Formango

Formango takes the hassle out of form validation in your Vue applications, providing solid benefits that enhance your development process:

1. Type-Safe Confidence: Formango is built with TypeScript at its core, ensuring that your form validations are robust and free from type-related surprises. Catch errors at compile-time and enjoy a more confident development experience.
2. Built-in Standard Schema Spec Integration: Formango is built to integrate with Standard Schema Spec, which means it works with Zod, Valibot and ArkType. This means you can define your data structures with any of these libraries and effortlessly apply these schemas to your Vue forms using Formango.
3. Clean and Maintainable: Say goodbye to tangled validation logic. Formango promotes a clean and declarative approach to form validation, making your codebase easier to understand and maintain.
4. Flexibility in Your Hands: As a headless validation library, Formango adapts to your needs, whether it's handling complex and custom forms or a simple login form. Customize the validation to fit your specific use cases without compromising on quality.
5. Vue Ecosystem Friendly: Built-in devtools makes it easy to debug your complex forms.
6. Fruity: It follows the trend of fruit-based Vue libraries.

Usage Example

<script setup lang="ts">
import { useForm } from 'formango'
import { z } from 'zod'
import { toFormField } from './toFormField'

// Create a schema
const exampleForm = z.object({
  name: z.string().min(1),
  email: z.string().email(),
})

// Parse the schema to `useForm` along with a function to handle the submit.
// Optionally, you can also pass an object to prepare the form.
const form = useForm({
  schema: exampleForm,
  initialState: {
    name: 'Foo',
    email: 'foo@mail.com',
  },
  onSubmit: (data) => {
    /* Data type is inferred from the schema, hande your submit logic here.
      Will only get here if the form is fully valid.
      {
        email: string
        name: string
      }
    */
    console.log(values)
  }
})

// Now you can register fields on the form, which are fully typed.
// These fields will handle the actual data-binding
const name = form.register('name')
const email = form.register('email')
</script>

<template>
  <CustomInput v-bind="toFormField(name)" />
  <CustomInput v-bind="toFormField(email)" />
  <button @click="form.submit">
    Submit
  </button>
</template>

Refer to the form, field and array field API for more details.