vue-json-form

A library for creating Vue3 components that automatically generate a large number of input forms from JSON.

Purpose

• Automatically generate a web form with a large number of input items
• In conflict libraries such as vue-flow-form, it is a mechanism to create a model class of the form to be automatically generated, but in vue-json-form, the entire Form is automatically generated from JSON data.
• Automatic generation of input items such as questionnaires, fortune-telling, and profiling.
• Support for config setting page of apps such as PCs, smartphones, tablets, and web services (especially large-scale systems)

Structure

• vue-json-form provides complete logic to easily create a Vue Component that automatically generates a Form. You could easily create an original auto-generated Form Component.
  • vue-json-form does not directly provide a vue component that automatically generates the entire input form.
  • Because Vue is tightly coupled with systemmatic components and HTML design and can't be separated.
• vue-json-form provides some template Components (InpytTypes) for basic input items. You can easily implement and add this.
  • Please show me your new Input Types :)
• It consists of src/form-setup.js and src/components/InputTypes.
• If you install vue-json-form in your project, define a configuration file equivalent to src/options.js in your project.
• This project itself is an valid sample, and you can check the operation with yarn serve.

How to use

• Put this library into your project. Maybe (git submodule)
• Add a new Vue component (e.g. AppConfigForm.vue)
• Write options.js. or you can write it directly in the vue file.
• import src/form-setup.js and src/components/InputTypes/*.vue
• JsonFormSetup is a single plain and complete Composition API. You could add new properties to this.
• Enter the InputType symbols in the components property.

Functions

• Input items can be narrowed down by categories.
• Input items can be narrowed down by text input.
• User input results are modelValues as well as form input values.
  • Therefore, it can be easily POSTed as a normal HTML Form.
• Easy to customize
  • The form input fields is auto-generated by a single plain JavaScript file. It can be easily and automatically generated in your project.
  • Helps you easily create auto-generated forms that allow you to freely change the design.
  • The initial value of form input can be easily set from your main Vue component or higher level component. Therefore, you can output the initial value in JSON in HTML or get it dynamically from your Web API.

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.