https://github.com/kanryu/vue-json-form
A library for creating Vue3 components that automatically generate a large number of input forms from JSON.
https://github.com/kanryu/vue-json-form
Last synced: 6 months ago
JSON representation
A library for creating Vue3 components that automatically generate a large number of input forms from JSON.
- Host: GitHub
- URL: https://github.com/kanryu/vue-json-form
- Owner: kanryu
- License: mit
- Created: 2022-02-08T11:30:28.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-02-08T12:31:42.000Z (over 4 years ago)
- Last Synced: 2025-04-04T18:17:31.728Z (over 1 year ago)
- Language: Vue
- Size: 15.6 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://cli.vuejs.org/config/).