A flexible, schema driven form component for Vue 3

This component, written using TypeScript and the Vue 3 composition API, creates a schema-driven form that allows you to modify the state of an object. This component is currently a work in progress and is an early step in creating more flexible, open source versions of components I have developed in the past.

Features / Notes

  • Each key on the object/model being modified can be targeted with a number of different input types.
  • Input types that accept multiple options or values can be configured to use an array existing on the original object, or a custom array provided in the schema.
  • Multiple rows in the form can be set to modify the same key of the master model object, as seen in the example below where multiple form inputs are modifying the value of the “select” key.
  • A row type of “nested” allows you to selectively modify a nested array of objects, and selected keys within them. All of the form’s input types are compatible with this. Nesting multiple “nested” input types is possible allowing you to deeply modify a data structure, although the UI is not currently optimized for this. An example of a nested input within a nested input can bee seen below.
  • The visibility of rows can be determined conditionally

View Github

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

How To Format Dates In JavaScript

Vim basics for beginners – DEV Community