{"id":14988586,"url":"https://github.com/14nrv/vue-form-json","last_synced_at":"2025-07-31T09:10:30.054Z","repository":{"id":48993236,"uuid":"147236722","full_name":"14nrv/vue-form-json","owner":"14nrv","description":"Generate a vue form with validation from an array","archived":false,"fork":false,"pushed_at":"2021-10-12T20:32:59.000Z","size":1140,"stargazers_count":90,"open_issues_count":0,"forks_count":16,"subscribers_count":6,"default_branch":"dev","last_synced_at":"2025-06-28T19:46:54.909Z","etag":null,"topics":["bulma","form","form-builder","form-generator","form-schema","schema","vee-validate","vue","vue-component","vue-form","vue-form-generator","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/14nrv.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-03T17:50:34.000Z","updated_at":"2025-03-15T20:59:05.000Z","dependencies_parsed_at":"2022-09-04T23:02:06.375Z","dependency_job_id":null,"html_url":"https://github.com/14nrv/vue-form-json","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"purl":"pkg:github/14nrv/vue-form-json","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/14nrv%2Fvue-form-json","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/14nrv%2Fvue-form-json/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/14nrv%2Fvue-form-json/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/14nrv%2Fvue-form-json/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/14nrv","download_url":"https://codeload.github.com/14nrv/vue-form-json/tar.gz/refs/heads/dev","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/14nrv%2Fvue-form-json/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267582675,"owners_count":24111210,"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","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["bulma","form","form-builder","form-generator","form-schema","schema","vee-validate","vue","vue-component","vue-form","vue-form-generator","vuejs"],"created_at":"2024-09-24T14:16:59.495Z","updated_at":"2025-07-31T09:10:29.988Z","avatar_url":"https://github.com/14nrv.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["UI Components","Form"],"readme":"[![NPM Version](https://img.shields.io/npm/v/vue-form-json.svg)](https://www.npmjs.com/package/vue-form-json)\n[![Build Status](https://travis-ci.com/14nrv/vue-form-json.svg?branch=dev)](https://travis-ci.com/14nrv/vue-form-json)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/af5a15db118dac6343ab/test_coverage)](https://codeclimate.com/github/14nrv/vue-form-json/test_coverage)\n[![Maintainability](https://api.codeclimate.com/v1/badges/af5a15db118dac6343ab/maintainability)](https://codeclimate.com/github/14nrv/vue-form-json/maintainability)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n# vue-form-json\n\n[![Edit vue-form-json-demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-form-json-demo-t97l5?file=/src/main.js)\n\n## Generate a vue form with validation from [an array](https://github.com/14nrv/vue-form-json/blob/master/src/components/Form/fields.json)\nAll fields are required and input text by default.\nOnce submitted, an event 'formSubmitted' is emitted on $root with the formName and all values.\n\n## Features\n* **Generate a form** from an array (formFields prop)\n* **Bulma classes** by default (that can be overwritten)\n* **Responsive**\n* Fields on **multiples columns**\n  ```js\n  const formFields = [ [{ label: 'label one' }, { label: 'label two' }] ]\n  ```\n* **Pre filled values**\n  ```js\n  const formFields = [{ label: 'the label', value: 'the value' }]\n  ```\n* [**Simple rules validation**](https://logaretm.github.io/vee-validate/guide/rules.html#rules)\n  ```js\n  const formFields = [{ label: 'the label', rules: { is_not: 'label' } }]\n  ```\n* **Cross field validation** (see password confirmation example in the CodeSandbox link)\n* **Custom attr** (class, data-*, ...) on .field \u0026 real fields (input, textarea...)\n  ```js\n  const formFields = [{\n    attr: { class: 'classOnInput' },\n    alternativeLabel: 'an alternative label text that will be displayed',\n    field: { attr: { class: 'classOnFieldClassName' } },\n    label: 'the label'\n  }]\n  ```\n* **Help text** (putted right after the label, see the age field on the CodeSandbox link)\n  ```js\n  const formFields = [{\n    label: 'label one',\n    help: 'help text content'\n  }]\n  ```\n* **Scoped slot support** everywhere inside the form\n  ```js\n  const formFields = [{ slot: 'nameOfTheSlot', props: { foo: 'bar' } }]\n  ```\n* **Custom fields support**\n  * for a simple field ([with `is` attribute + `components` prop](https://codesandbox.io/s/vue-form-demo-pgpbd))\n    ```js\n    const formFields = [{ is: 'CustomFieldName' }]\n    ```\n\n  * [inside a scoped slot](https://codesandbox.io/s/vue-form-json-demo-dgk2n?file=/src/App.vue) for more flexibility\n    ```html\n    \u003ctemplate #nameOfTheSlot=\"{ foo, updateFormValues, isFormReseted }\"\u003e\n    ```\n* **Html support**\n  ```js\n  const formFields = [{ html: '\u003cp\u003eYour html content\u003c/p\u003e' }]\n  ```\n\n## Install\n```sh\nyarn add vue-form-json\n# Optional: bulma @fortawesome/fontawesome-free (fontawesome is not needed if hasIcon prop is false)\n```\n\n## Usage\n```js\n// main.js\nimport { extend, ValidationProvider } from 'vee-validate'\nimport * as rules from 'vee-validate/dist/rules'\nimport { messages } from 'vee-validate/dist/locale/en.json'\n// ...\nVue.component('ValidationProvider', ValidationProvider)\n\nObject.keys(rules).forEach(rule =\u003e {\n  extend(rule, {\n    ...rules[rule],\n    message: messages[rule]\n  })\n})\n// ...\n```\n\n```html\n\u003ctemplate lang=\"pug\"\u003e\n  #app.section\n    form-json(:btnReset=\"{value: 'Reset'}\",\n              :btnSubmit=\"{value: 'Submit'}\",\n              :formFields=\"jsonFields\",\n              formName=\"userProfil\")\n      template(#slotNameAddedInJsonFields=\"{ prop }\")\n        p Your slot content and {{ prop }}\n\u003c/template\u003e\n\n\u003cscript\u003e\n  // import 'bulma/css/bulma.min.css'\n  // import '@fortawesome/fontawesome-free/css/all.min.css'\n  // import 'vue-form-json/dist/vue-form-json.css'\n\n  import formJson from 'vue-form-json'\n  import jsonFields from './../assets/fields'\n\n  export default {\n    name: 'app',\n    components: {\n      formJson\n    },\n    mounted () {\n      this.$root.$on('formSubmitted', values =\u003e console.log(values))\n    },\n    computed: {\n      jsonFields: () =\u003e jsonFields\n    }\n  }\n\u003c/script\u003e\n```\n\n## Props available on formJson component\n```js\nprops: {\n  formFields: {\n    type: Array,\n    required: true\n  },\n  formName: {\n    type: String,\n    required: true\n  },\n  hasAsteriskJustAfterLabel: {\n    type: Boolean,\n    default: false\n  },\n  mandatoryAsteriskLegend: {\n    type: String,\n    default: '* field required'\n  },\n  btnSubmit: {\n    type: Object,\n    default: () =\u003e ({})\n  },\n  btnReset: {\n    type: Object,\n    default: () =\u003e ({})\n  },\n  resetFormAfterSubmit: {\n    type: Boolean,\n    default: false\n  },\n  defaultMin: {\n    type: [Boolean, Number],\n    default: false\n  },\n  defaultMax: {\n    type: [Boolean, Number],\n    default: false\n  },\n  defaultMinValue: {\n    type: [Boolean, Number],\n    default: 0\n  },\n  defaultMaxValue: {\n    type: [Boolean, Number],\n    default: false\n  },\n  hasIcon: {\n    type: Boolean,\n    default: true\n  },\n  camelizePayloadKeys: {\n    type: Boolean,\n    default: false\n  },\n  components: {\n    type: Object,\n    default: () =\u003e ({})\n  },\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F14nrv%2Fvue-form-json","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F14nrv%2Fvue-form-json","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F14nrv%2Fvue-form-json/lists"}