gavinzhulei/vue-form-making

★ 5,575VueAudience · developerComplexity · 2/5LicenseSetup · moderate

Mindmap

mindmap
  root((repo))
    What it does
      Visual form builder
      Drag and drop layout
      JSON config export
    Components
      Designer interface
      Form generator
    Features
      Validation rules
      Remote data sources
      Internationalization
      Code generation
    Setup
      Vue 2
      Element UI
      MIT license

mindmap root((repo)) What it does Visual form builder Drag and drop layout JSON config export Components Designer interface Form generator Features Validation rules Remote data sources Internationalization Code generation Setup Vue 2 Element UI MIT license

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Let a non-technical teammate design and update forms visually without writing any HTML or JavaScript

USE CASE 2

Build a configurable form system where layouts are stored as JSON and rendered on demand

USE CASE 3

Quickly prototype a multi-field input form with validation without writing form HTML by hand

USE CASE 4

Generate ready-to-run Vue form code directly from the visual designer interface

Tech stack

VueJavaScriptElement UI

Getting it running

Difficulty · moderate Time to first run · 30min

Supports Vue 2 only, the free base version does not work with Vue 3.

Free to use for any purpose, including commercial projects, as long as you keep the copyright notice. (MIT license)

In plain English

vue-form-making is a visual form builder for web applications. Instead of writing HTML and JavaScript by hand to create input forms, you use a drag-and-drop design interface to lay out fields, set validation rules, and configure layout. The tool then exports a JSON description of your form design, which a companion component can read to render the actual form inside your application. The project is built with Vue.js, a popular JavaScript framework, and uses a UI component library called Element UI for the form controls. It is aimed at developers who need to build forms quickly or who want to give non-technical teammates a way to configure forms without touching code. The README describes the tool as having two main parts: the designer, where you visually assemble the form, and the generator, which takes the saved JSON configuration and produces a working form on the page. Features listed in the README include grid-based layout using flexbox, built-in form validation, support for fetching data from remote APIs to populate dropdowns or other fields, and internationalization support for multiple languages. A one-click preview lets you see how the form will look before deploying it. There is also an option to generate ready-to-run code directly from the designer. The repository is described as the base version of the tool. An advanced commercial version is available separately and adds more field types, nested layout containers, support for Vue 3, and Ant Design-style components alongside the default Element UI ones. The base version supports Vue 2 and works in modern browsers as well as Internet Explorer 10 and 11. The project is licensed under MIT.

Copy-paste prompts

Prompt 1

How do I embed the vue-form-making designer component in a Vue 2 project and save the exported JSON form config to a backend API?

Prompt 2

Show me how to take a JSON config exported from vue-form-making and render it as a live form using the generator component

Prompt 3

How do I add a custom validation rule to a field in vue-form-making so it shows an error message when the field is left blank?

Prompt 4

How do I configure a dropdown field in vue-form-making to load its options dynamically from a remote API endpoint?

Prompt 5

What features does the advanced commercial version of vue-form-making add on top of the free MIT base version?

Open on GitHub → Explain another repo

← gavinzhulei on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.