{"id":13880885,"url":"https://github.com/asigloo/vue-dynamic-forms","last_synced_at":"2025-07-16T17:31:14.908Z","repository":{"id":44504002,"uuid":"232615685","full_name":"asigloo/vue-dynamic-forms","owner":"asigloo","description":"Easy way to dynamically create reactive forms in Vue based on a varying business object model ","archived":true,"fork":false,"pushed_at":"2022-02-10T10:20:44.000Z","size":8055,"stargazers_count":395,"open_issues_count":24,"forks_count":45,"subscribers_count":12,"default_branch":"main","last_synced_at":"2024-11-24T09:34:11.556Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://vue-dynamic-forms.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/asigloo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["alvarosabu"],"ko_fi":"alvarosaburido"}},"created_at":"2020-01-08T17:10:22.000Z","updated_at":"2024-07-17T00:43:09.000Z","dependencies_parsed_at":"2022-09-24T15:45:19.806Z","dependency_job_id":null,"html_url":"https://github.com/asigloo/vue-dynamic-forms","commit_stats":null,"previous_names":[],"tags_count":90,"template":false,"template_full_name":null,"purl":"pkg:github/asigloo/vue-dynamic-forms","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asigloo%2Fvue-dynamic-forms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asigloo%2Fvue-dynamic-forms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asigloo%2Fvue-dynamic-forms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asigloo%2Fvue-dynamic-forms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asigloo","download_url":"https://codeload.github.com/asigloo/vue-dynamic-forms/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asigloo%2Fvue-dynamic-forms/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265527547,"owners_count":23782480,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-08-06T08:03:35.762Z","updated_at":"2025-07-16T17:31:14.418Z","avatar_url":"https://github.com/asigloo.png","language":"TypeScript","funding_links":["https://github.com/sponsors/alvarosabu","https://ko-fi.com/alvarosaburido","https://github.com/sponsors/alvarosaburido","https://paypal.me/alvarosaburido"],"categories":["TypeScript"],"sub_categories":[],"readme":"![Library Banner](https://res.cloudinary.com/alvarosaburido/image/upload/v1589993773/portfolio/web/vue-dynamic-forms/open-graph-preview_kv4glm.png)\n\n# Vue `3.x.x` Dynamic Forms\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@asigloo/vue-dynamic-forms\"\u003e\n    \u003cimg src=\"https://badgen.net/npm/v/@asigloo/vue-dynamic-forms\" alt=\"Current npm version\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://bundlephobia.com/result?p=@asigloo/vue-dynamic-forms\"\u003e\n    \u003cimg src=\"https://flat.badgen.net/bundlephobia/min/@asigloo/vue-dynamic-forms\" alt=\"Minified size\"\u003e\n   \u003c/a\u003e\n\n  \u003ca href=\"https://vuejs.org\"\u003e\n    \u003cimg src=\"https://flat.badgen.net/badge/vue.js/3.x.x/4fc08d?icon=github\" alt=\"Vue.js version\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nImplementing handcrafted forms can be:\n\n1. Costly\n2. Time-consuming\n\nEspecially 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.\n\nSo, wouldn't it be more economical to create the forms dynamically? Based on metadata that describes the business object model?\n\nThat's **Vue Dynamic Forms**.\n\n## Status: Stable\n\nThis 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).\n\n## Documentation\n\nComplete documentation and examples available at\n\n- **[Documentation](https://vue-dynamic-forms.alvarosaburido.dev/)**\n- **[Demos](#demos)** or if you prefer online [here](https://vue-dynamic-forms-demos.alvarosaburido.dev/)\n- **[Stackblitz](https://stackblitz.com/edit/vitejs-vite-e5dxci?file=src%2FApp.vue\u0026terminal=dev)**\n- **[Code Sandbox](https://codesandbox.io/s/vue-dynamic-forms-3xx-wfpix?file=/src/App.vue)**\n- **[Migration Guide](https://vue-dynamic-forms.alvarosaburido.dev/guide/migration-guide.html)**\n\n## You can help me keep working on this project 💚\n\n- [Become a Sponsor on GitHub](https://github.com/sponsors/alvarosaburido)\n- [One-time donation via PayPal](https://paypal.me/alvarosaburido)\n\n\u003ch4 align=\"center\"\u003eGenerous Unicorns 🦄\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/OmgImAlexis\" target=\"_blank\" rel=\"noopener noreferrer\" \"\u003e\n    \u003cimg src=\"https://avatars.githubusercontent.com/u/6525926?v=4\" height=\"72px\"  style=\"border-radius: 100%; overflow: hidden; border: 4px solid #5EDCAE\" alt=\"OmgImAlexis\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch4 align=\"center\"\u003eAccesible Benevolents 🦄\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/easingthemes\" target=\"_blank\" rel=\"noopener noreferrer\" \"\u003e\n    \u003cimg src=\"https://avatars.githubusercontent.com/u/2750284?v=4\" height=\"72px\"  style=\"border-radius: 100%; overflow: hidden; border: 4px solid #5EDCAE\" alt=\"easingthemes\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Installation\n\n```bash\n$ npm install @asigloo/vue-dynamic-forms\n```\n\nor if you prefer yarn\n\n```bash\n$ yarn add @asigloo/vue-dynamic-forms\n```\n\n## Usage\n\nThe installation and usage has change to align with new Vue 3 plugin installation.\n\nTo create a new `Dynamic Form` instance, use the `createDynamicForms` function;\n\n```js\nimport { createApp } from 'vue'\nimport { createDynamicForms } from '@asigloo/vue-dynamic-forms'\n\nconst VueDynamicForms = createDynamicForms()\n\nexport const app = createApp(App)\n\napp.use(VueDynamicForms)\n```\n\nIn your component:\n\n```javascript\n\u003ctemplate\u003e\n  \u003cdynamic-form :form=\"form\" @change=\"valueChanged\" /\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\nimport { computed, defineComponent, reactive } from 'vue';\n\nimport {\n  CheckboxField,\n  TextField,\n  SelectField,\n} from '@asigloo/vue-dynamic-forms';\n\nexport default defineComponent({\n  name: 'BasicDemo',\n  setup() {\n    const form = ref({\n      id: 'basic-demo',\n      fields: {\n        username: TextField({\n          label: 'Username',\n        }),\n        games: SelectField({\n          label: 'Games',\n          options: [\n            {\n              value: 'the-last-of-us',\n              label: 'The Last of Us II',\n            },\n            {\n              value: 'death-stranding',\n              label: 'Death Stranding',\n            },\n            {\n              value: 'nier-automata',\n              label: 'Nier Automata',\n            },\n          ],\n        }),\n        checkIfAwesome: CheckboxField({\n          label: 'Remember Me',\n        }),\n      },\n    });\n\n    function valueChanged(values) {\n      console.log('Values', values);\n    }\n\n    return {\n      form,\n      valueChanged,\n    };\n  },\n});\n\u003c/script\u003e\n```\n\n## Demos\n\n![Vue Dynamic Forms Demo](https://res.cloudinary.com/alvarosaburido/image/upload/v1610265908/vue-dynamic-forms-demo.png)\n\nWe've prepared some demos to show different use cases of the library and how to use each type of input field.\n\nTo check them just run the command bellow which run the app at `http://localhost:3000/ `\n\n```\nyarn run serve\n```\n\n- [x] General Form\n- [x] Text Fields\n- [x] Number Fields\n- [x] Select Fields\n- [x] Textarea Fields\n- [x] Radio Fields\n- [x] Login\n- [x] Custom Fields\n- [ ] Axios form (Retrieve form structure from an API)\n- [ ] TailwindCSS styling\n\n## Development\n\n### Project setup\n\n```\nyarn install\n```\n\n### Compiles and hot-reloads\n\n```\nyarn run serve\n```\n\n### Compiles and minifies for production\n\n```\nyarn run build\n```\n\n### Generate types\n\n```\nyarn run build:dts\n```\n\n### Lints and fixes files\n\n```\nyarn run lint\n```\n\n### Run your unit tests\n\n```\nyarn run test\n```\n\n### Run your e2e tests\n\n```\nyarn run test\n```\n\n## Contributing\n\nIf 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 😁.\n\n## Todolist\n\n- [ ] Update docs\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasigloo%2Fvue-dynamic-forms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasigloo%2Fvue-dynamic-forms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasigloo%2Fvue-dynamic-forms/lists"}