GavinZhuLei/vue-form-making
Vue Form Making
Vue Form Making is a visual form designer for Vue.js that lets you build forms by dragging and dropping components onto a canvas, without writing code. It generates runnable Vue.js code and structured JSON from the visual design, enabling rapid form creation and reuse.
The tool provides a complete form-building environment with component configuration, input validation with error messages, live preview, and JSON export for storage or sharing. It supports remote data integration to populate dropdowns and other fields from external APIs, and allows custom Vue components to be registered and used within the designer.
Additional capabilities include image upload functionality and the ability to generate Vue.js template code from the form schema. The documentation covers installation and usage for integrating the designer into Vue.js projects.
Features
- Visual Form Designers - Provides a drag-and-drop interface for visually constructing form layouts without writing code.
- Vue.js - Provides a drag-and-drop interface for building Vue.js forms visually without writing code.
- Canvas-Based Component Renderers - Provides a drag-and-drop canvas for visually placing and arranging form components in real time.
- Form Validation - Supports defining and applying input validation rules with error messages for form fields.
- JSON Forms - Exports form layouts as structured JSON for storage, sharing, or programmatic reuse.
- Form Schema Serializers - Serializes the entire form design into a structured JSON schema defining component types, properties, and layout.
- Form Field Configuration - Allows setting properties such as labels, placeholders, and validation rules for each added field.
- Form Input Validation - Checks user input against defined rules and displays error messages when validation fails.
- Vue Form Code Generators - Generates ready-to-run Vue.js code from the visual design, eliminating manual coding.
- Vue.js - Provides a plugin interface to register and use custom Vue components within the visual form designer.
- Vue Form Code Generators - Generates runnable Vue.js code and JSON configuration from a visual form design canvas.
- JSON Exports - Exports the form's configuration as structured JSON for storage, sharing, or programmatic use.
- Remote Data Fetching - Loads asynchronous data from external endpoints to populate form fields like dropdowns.
- Form Previewers - Shows a live preview of the configured form to verify its appearance and behavior before deployment.
- Dropdown Data Population - Loads asynchronous data from external APIs to populate form fields like dropdowns.
- Plugin Registries - Provides a plugin interface for registering and loading custom Vue components into the designer.
- Custom Component Extensions - Allows registering and using user-defined Vue components within the visual form designer.
- Custom Form Field Components - Enables registering and integrating user-defined components into the visual designer for extended functionality.
- Property Editing Panels - Ships a side panel that updates component properties in real time via events from the canvas.
- Dynamic Component Factories - Instantiates form fields dynamically from a component registry based on the JSON schema at runtime.
Star history
How this analysis was created: This summary and feature list are AI-generated from collected project material and can contain mistakes. Stars, license and language are imported from GitHub. Inclusion does not mean that we have tested or audited this project. Check the source documentation for any feature you depend on. Learn more on our About page.
