{"id":15012954,"url":"https://github.com/jarvelov/vue-form-json-schema","last_synced_at":"2025-04-05T22:09:53.423Z","repository":{"id":46823657,"uuid":"113006631","full_name":"jarvelov/vue-form-json-schema","owner":"jarvelov","description":"Create forms using JSON schema. Bring your components!","archived":false,"fork":false,"pushed_at":"2023-03-30T19:55:19.000Z","size":5499,"stargazers_count":357,"open_issues_count":41,"forks_count":52,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-03-29T21:07:42.906Z","etag":null,"topics":["ajv","component","components","form","form-generator","form-schema","forms","generator","json","json-schema","schema","vue","vue-component","vue-components","vue2","vuejs2"],"latest_commit_sha":null,"homepage":"https://jarvelov.gitbook.io/vue-form-json-schema/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jarvelov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-04T06:55:08.000Z","updated_at":"2025-02-09T11:31:52.000Z","dependencies_parsed_at":"2024-09-20T08:01:15.929Z","dependency_job_id":"db829195-c1f6-4340-93cb-71872a357259","html_url":"https://github.com/jarvelov/vue-form-json-schema","commit_stats":{"total_commits":1076,"total_committers":10,"mean_commits":107.6,"dds":"0.016728624535315983","last_synced_commit":"84801fa4d62474413aea7d9169c60a633d75a1c2"},"previous_names":[],"tags_count":94,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jarvelov%2Fvue-form-json-schema","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jarvelov%2Fvue-form-json-schema/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jarvelov%2Fvue-form-json-schema/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jarvelov%2Fvue-form-json-schema/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jarvelov","download_url":"https://codeload.github.com/jarvelov/vue-form-json-schema/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247406111,"owners_count":20933806,"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":["ajv","component","components","form","form-generator","form-schema","forms","generator","json","json-schema","schema","vue","vue-component","vue-components","vue2","vuejs2"],"created_at":"2024-09-24T19:43:30.664Z","updated_at":"2025-04-05T22:09:53.388Z","avatar_url":"https://github.com/jarvelov.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Form JSON Schema\n\n\u003e A [JSON schema](https://json-schema.org) based form generator, bring your components!\n\n##### Use any Vue component or HTML element!\n\nThere are *no prebuilt components* for you to puzzle your form together with. Instead you can use any component or element which emits an event, custom or native.\n\n\u003e Note that essentially all Vue components that uses `v-model` emits an `input` (or similar) event. [See Vue's guide for more info](https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events)\n\n## Installation\n\n### Upgrading from v1? Check out the [v2 release notes](https://github.com/jarvelov/vue-form-json-schema/releases/tag/v2.0.0) to see if and how migration affects you.\n\nInstall from npm\n\n`npm install vue-form-json-schema`\n\nImport to your app\n\n```js\nimport Vue from 'vue';\nimport VueFormJsonSchema from 'vue-form-json-schema';\n\nVue.component('vue-form-json-schema', VueFormJsonSchema);\n```\n\n\u003e Note if you're not using Webpack / Rollup and want to use the ESM version you need to import VueFormJsonSchema like this:\n\n```js\nimport VueFormJsonSchema from 'vue-form-json-schema/dist/vue-form-json-schema.esm.js';\n```\n\nCheck out the demos or see a minimal example in the [usage instructions](#usage) to get started.\n\n### UMD\n\n\u003e If you're using the UMD version you can find more examples in the `examples` folder of the [github repo](https://github.com/jarvelov/vue-form-json-schema/tree/master/examples) and the [UMD demo below](#umd-demos).\n\nIf you want to use `vue-form-json-schema` directly in a browser you can do so by using the UMD version. The UMD version autoinstalls the `vue-form-json-schema` component if Vue is found on the window. The entire module is also available on `window.VueFormJsonSchema` where the named exports such as for example `vfjsFieldMixin` can be accessed.\n\n#### Hosted by unkpg\n\n`\u003cscript src=\"https://unpkg.com/vue-form-json-schema@latest/dist/vue-form-json-schema.umd.js\"\u003e\u003c/script\u003e`\n\nYou can substite `vue-form-json-schema@latest` to a fixed version, such as `vue-form-json-schema@2.3.0`\n\n#### Installed from npm\n\n`\u003cscript src=\"../node_modules/dist/vue-form-json-schema.umd.js\"\u003e\u003c/script\u003e`\n\n## Demo\n\n\u003e Note that all demos use Bootstrap styling, but no styling is included in this package and it is up to you what styles should be used.\n\n### [Minimal demo](https://py6611pr9m.codesandbox.io)\n\nThe least amount of configuration to render an `input` element.\n\n### [Nested UI demo](https://882w4v374l.codesandbox.io)\n\nUsing Bootstrap classes to show how layout can be different for devices with different screen sizes.\nIn this example two input fields will be wrapped inside a div with `col-12 col-sm-6` classes.\nTry resizing your browser window too see it in action.\n\n### [Conditional visibility and Animation demo](https://k0q8wk946o.codesandbox.io/)\n\nSometimes a field should only be shown if a condition is met. Uses `\u003ctransition\u003e` to provide animation.\n\n### [Vue components demo](https://z549j1vxx.codesandbox.io)\n\nSee how to use your own or third party Vue components in `vue-form-json-schema`.\n\n### [Vue async loading of form](https://2p51q8q14y.codesandbox.io)\n\nLoading the form from a backend? Check out this example.\n\n### [Registration form with validation](https://4rykx7jj19.codesandbox.io)\n\nA more complete example with validation and error messages\n\n### [Registration form example with nested properties](https://nxn8y.codesandbox.io/)\n\nThe registration form above where the form model keys are nested under another key\n\n### UMD demos\n\nAll the examples above are replicated using the UMD version in the `examples` folder of this repo.\n\n[Online version of the first demo](https://jsfiddle.net/jarvelov/ewg6dfqL/)\n\n## Features\n\n* Supports any HTML element or Vue component\n* Small (`32K` uncompressed, `6.5K` gzipped)\n* Standardized [JSON schema](json-schema.org) for annotation and validation (by [Ajv](https://github.com/epoberezkin/ajv))\n* Layout is independent from data structure\n\n## Documentation\n\n[Gitbook](https://jarvelov.gitbook.io/vue-form-json-schema/)\n\n## Usage\n\n### Basic example with one field\n\n\u003eFor using the UMD version, check out the `examples` folder where all the demos above are replicated using the UMD version\n\n[See demo](https://codesandbox.io/s/py6611pr9m)\n\n```js\n\u003ctemplate\u003e\n    \u003cvue-form-json-schema\n      v-model=\"model\"\n      :schema=\"schema\"\n      :ui-schema=\"uiSchema\"\n    \u003e\n  \u003c/vue-form-json-schema\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    data() {\n      return {\n        // An object which holds the form values\n        model: {},\n        // A valid JSON Schema object\n        schema: {\n          type: 'object',\n          properties: {\n            firstName: {\n              type: 'string',\n            },\n          },\n        },\n        // Array of HTML elements or Vue components\n        uiSchema: [{\n          component: 'input',\n          model: 'firstName',\n          // Same API as [Vue's render functions](https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth)\n          fieldOptions: {\n            class: ['form-control'],\n            on: ['input'],\n            attrs: {\n              placeholder: 'Please enter your first name',\n            },\n          },\n        }],\n      };\n    }\n  };\n\u003c/script\u003e\n```\n\n### Dependencies\n\n#### Ajv\nFor form validation using [JSON Schema](http://json-schema.org/) and internal validation\n\n#### Lodash\n`get`, `set` and `merge` are used throughout the package.\nBundle size is very important though and is always considered and so we heavily strip down lodash to only include the absolute necessities\n\n#### Vue\n\nTested with v2.5.9 but will probably work on any version \u003e= v2.4.0\n\n### TODO\n\n* Write tests\n* ~~Add i18n support~~\n  * Added in 1.15.2 with `options.ajv.locale` setting\n* ~~Write this README~~\n* Use Ajv internally to validate:\n  * `vfs-global` prop `ui-schema`\n  * `vfs-component` prop `ui-schema`\n* ~~Write docs~~\n* ~~Publish with Gitbook~~\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjarvelov%2Fvue-form-json-schema","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjarvelov%2Fvue-form-json-schema","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjarvelov%2Fvue-form-json-schema/lists"}