Creating multiple forms in a website can be repetitive and result in a lot of duplicate code. I created npm package with the name vue-form to prevent our team to have this problem. This package contains;

• Vue composable to setup a form dynamically
• Validation
• API request handling
• Hooks

The form composable contains all logic to setup a form in a vue component with very little custom code. The composable returns methods and reactive state that can be used to register fields, add validation and provide a request that needs to be triggered on submit.

This package also contains validation and there are multiple types of validation. At the moment there is validation for fields with data types string, number, boolean or file. The validation rules can be chained into one big function, where it returns the first error that occurs. See below for example.

In the composable, there are multiple types of hooks and they can be used for multiple goals. For example to redirect to a specific page on a successfull submit, or to implement something like tracking when a user gets stuck in a validation process.

This package has been implemented in multiple projects. For example in asWatson, dienst toeslagen and kenonz.