@dynamicforms/vue-forms ​

A lightweight, reactive data entry forms library for Vue.js that handles form state management without dictating your UI components.

Introduction ​

@dynamicforms/vue-forms provides a powerful yet simple way to manage form data, validation, and state in Vue applications. The library focuses on the logic layer of forms, giving you complete freedom to use any UI components you prefer.

Unlike other form libraries that couple data management with specific UI components, @dynamicforms/vue-forms separates these concerns, allowing you to build forms that match your design system perfectly.

Interactive Demo ​

Below is an interactive demo of a simple person form built with @dynamicforms/vue-forms and Vuetify. Try toggling the field states and see how the form output changes:

{
  "firstName": "John",
  "lastName": "Doe",
  "age": 30,
  "active": true
}

Basic Usage Example ​

Here's a simple example of how to create and use a form with fields and groups:

import { Field, Group, ValueChangedAction } from '@dynamicforms/vue-forms';

// Create a form with fields
const personForm = new Group({
  firstName: Field.create({ value: 'John' }),
  lastName: Field.create({ value: 'Doe' }),
  age: Field.create({ value: 30 }),
  active: Field.create({ value: true })
});

// Access values
console.log(personForm.value);  // { firstName: 'John', lastName: 'Doe', age: 30, active: true }

// Update a field
personForm.fields.firstName.value = 'Jane';

// Disable a field
personForm.fields.age.enabled = false;

// Form serializes only enabled fields
console.log(personForm.value);  // { firstName: 'Jane', lastName: 'Doe', active: true }