Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/asigloo/vue-dynamic-forms
Easy way to dynamically create reactive forms in Vue based on a varying business object model
https://github.com/asigloo/vue-dynamic-forms
dynamic-forms form form-validations form-validator forms forms-generator generation input reactive-forms reactive-forms-dynamic-fields typrescript validation vue vue-dynamic-forms vue3 vuejs
Last synced: 3 months ago
JSON representation
Easy way to dynamically create reactive forms in Vue based on a varying business object model
- Host: GitHub
- URL: https://github.com/asigloo/vue-dynamic-forms
- Owner: asigloo
- License: mit
- Archived: true
- Created: 2020-01-08T17:10:22.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2022-02-10T10:20:44.000Z (almost 3 years ago)
- Last Synced: 2024-06-04T00:39:58.295Z (5 months ago)
- Topics: dynamic-forms, form, form-validations, form-validator, forms, forms-generator, generation, input, reactive-forms, reactive-forms-dynamic-fields, typrescript, validation, vue, vue-dynamic-forms, vue3, vuejs
- Language: TypeScript
- Homepage: https://vue-dynamic-forms.netlify.app/
- Size: 7.68 MB
- Stars: 394
- Watchers: 13
- Forks: 45
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Vue `3.x.x` Dynamic Forms
Implementing handcrafted forms can be:
1. Costly
2. Time-consuming
Especially if you need to create a very large form, in which the inputs are similar to each other, and they change frequently to meet rapidly changing business and regulatory requirements.
So, wouldn't it be more economical to create the forms dynamically? Based on metadata that describes the business object model?
That's **Vue Dynamic Forms**.
## Status: Stable
This is the Vue `3.x.x` compatible version. Out of the box `Typescript` support, tree shakeable, improved accessibility and lighter in size. For Vue `2.x.x` please use the library tags [2.x](https://github.com/alvarosaburido/vue-dynamic-forms/tree/2.x).
## Documentation
Complete documentation and examples available at
- **[Documentation](https://vue-dynamic-forms.alvarosaburido.dev/)**
- **[Demos](#demos)** or if you prefer online [here](https://vue-dynamic-forms-demos.alvarosaburido.dev/)
- **[Stackblitz](https://stackblitz.com/edit/vitejs-vite-e5dxci?file=src%2FApp.vue&terminal=dev)**
- **[Code Sandbox](https://codesandbox.io/s/vue-dynamic-forms-3xx-wfpix?file=/src/App.vue)**
- **[Migration Guide](https://vue-dynamic-forms.alvarosaburido.dev/guide/migration-guide.html)**
## You can help me keep working on this project 💚
- [Become a Sponsor on GitHub](https://github.com/sponsors/alvarosaburido)
- [One-time donation via PayPal](https://paypal.me/alvarosaburido)
Generous Unicorns 🦄
Accesible Benevolents 🦄
## Installation
```bash
$ npm install @asigloo/vue-dynamic-forms
```
or if you prefer yarn
```bash
$ yarn add @asigloo/vue-dynamic-forms
```
## Usage
The installation and usage has change to align with new Vue 3 plugin installation.
To create a new `Dynamic Form` instance, use the `createDynamicForms` function;
```js
import { createApp } from 'vue'
import { createDynamicForms } from '@asigloo/vue-dynamic-forms'
const VueDynamicForms = createDynamicForms()
export const app = createApp(App)
app.use(VueDynamicForms)
```
In your component:
```javascript
import { computed, defineComponent, reactive } from 'vue';
import {
CheckboxField,
TextField,
SelectField,
} from '@asigloo/vue-dynamic-forms';
export default defineComponent({
name: 'BasicDemo',
setup() {
const form = ref({
id: 'basic-demo',
fields: {
username: TextField({
label: 'Username',
}),
games: SelectField({
label: 'Games',
options: [
{
value: 'the-last-of-us',
label: 'The Last of Us II',
},
{
value: 'death-stranding',
label: 'Death Stranding',
},
{
value: 'nier-automata',
label: 'Nier Automata',
},
],
}),
checkIfAwesome: CheckboxField({
label: 'Remember Me',
}),
},
});
function valueChanged(values) {
console.log('Values', values);
}
return {
form,
valueChanged,
};
},
});
```
## Demos
We've prepared some demos to show different use cases of the library and how to use each type of input field.
To check them just run the command bellow which run the app at `http://localhost:3000/ `
```
yarn run serve
```
- [x] General Form
- [x] Text Fields
- [x] Number Fields
- [x] Select Fields
- [x] Textarea Fields
- [x] Radio Fields
- [x] Login
- [x] Custom Fields
- [ ] Axios form (Retrieve form structure from an API)
- [ ] TailwindCSS styling
## Development
### Project setup
```
yarn install
```
### Compiles and hot-reloads
```
yarn run serve
```
### Compiles and minifies for production
```
yarn run build
```
### Generate types
```
yarn run build:dts
```
### Lints and fixes files
```
yarn run lint
```
### Run your unit tests
```
yarn run test
```
### Run your e2e tests
```
yarn run test
```
## Contributing
If you find this library useful and you want to help improve it, maintain it or just want a new feature, feel free to contact me, or feel free to do a PR 😁.
## Todolist
- [ ] Update docs
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.