vue

Felte: A form library for Vue JS

Felte is an extensible form library originally built for Svelte but now supporting VueJS with the help of this package. Felte, on its most simple form, only requires you to set a directive (v-form) on the form you want it to manage. No custom Field or Form components are needed, making custom styles really easy to do.

Features

• Single directive to make your form reactive.
• Use HTML5 native elements to create your form. (Only the name attribute is necessary).
• Provides stores and helper functions to handle more complex use cases.
• No assumptions on your validation strategy. Use any validation library you want or write your own strategy.
• Handles addition and removal of form controls during runtime.
• Well tested. Currently at 99% code coverage and constantly working on improving test quality.
• Supports validation with yup, zod and superstruct.
• Easily extend its functionality.

Simple usage example

<script setup>
  // inside some Vue SFC file
  import { useForm } from '@felte/vue';

  const { vForm } = useForm({
    onSubmit: (values) => console.log(values);
  });
</script>
<template>
  <form v-form>
    <input type="text" name="email" />
    <input type="password" name="password" />
    <input type="submit" value="Sign in" />
  </form>
</template>

Installation

npm install --save @felte/vue

# Or, if you use yarn

yarn add @felte/vue

Usage

This package does not have documentation yet but. The API is really similar to that of other packages, mainly the ones returning "accessors" such as the react/preact/solid ones. The main differences are:

• It doesn't return a form action, but a vForm object that should be used as a custom directive. (In <script setup> it's enough to destructure it from the response and use it as v-form in your form).
• It doesn't return observables but accessors. These accessors, when called, return reactive refs (objects containing a reactive value property).

You can check the official documentation for Solid to have an idea on how to accessors may look like. Or take a look at the example in this repo.