Introducing Formango: The fruitful way to simplify form validation in Vue!

Heyhey!

Me and a colleague made an internal form tool for our company based on the popular react-hook-form library. We recently decided to rebrand it and make it open-source! We came up with the name pretty quick, and asked our designers to make a little mascot guy for us.

Introducing Formango, a brand new form library!

Usage example

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

• 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.
• Built-in Zod integration: Formango is built to integrate with Zod, a powerful schema validation library. This means you can define your data structures with Zod and effortlessly apply these schemas to your Vue forms using Formango.
• 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.
• 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.
• Vue ecosystem friendly: Built-in devtools makes it easy to debug your complex forms.
• Fruity: It follows the trend of fruit-based Vue libraries.

We have been using it internally for a little while now, so it should be stable. Using it internally also means we keep it up-to-date and maintain it pretty regularly. For example we are looking into expanding its usage to also support Valibot, a new schema library, once that is stable.

We're excited to hear your feedback and feature requests. While we aim to keep Formango minimal, we're open to suggestions that enhance its usability and value.

Check out the Documentation and GitHub Repository for more details.

Comments

[oggo]

Hi, i personally use vee-validate and i think it is pretty good. Do you know it? Can you list some advantages formango offers?

[Robbe Vaes]

Hey!
We looked at vee-validate too, we also got a lot of inspiration from it (like making devtools), personally we missed a few features.

I've made a small example in both to show the different syntax.

• The biggest difference is that we work fully from the form object you get from useForm, which means we can type the path. For example it is not possible to write form.register('firstName') in this example, since the form object knows it can only contain 'name' and 'email'. This is impossible in vee-validate since it uses a completely seperate useField function.

• Secondly, the values from email and password are both unknown in this example, because the useField function has no knowledge of the useForm function.
  With Formango, we know the type since it is linked.
  You can type it in vee-validate like this
  const fieldSchema = toTypedSchema(z.string().nonempty('Field is required').email({ message: 'Must be a valid email' }))
const { value, errorMessage } = useField('email', fieldSchema)
  But then you would have to make a schema per field, which is not ideal.

• Another small benefit is that you can register and bind a field fully inside the template, removing some boilerplate code <SomeInput v-bind="form.register('name')" />

Also by relying fully on Zod and supporting a minimal approach, the package size is a bit smaller, though that shouldn't matter that much.

All these are things small things, but for us it added up to enough of a problem to try our hands at creating our own package, and personally I really am a fan of the result!