{"id":13435085,"url":"https://github.com/logaretm/vue-use-form","last_synced_at":"2025-03-18T02:30:53.987Z","repository":{"id":66183691,"uuid":"204069332","full_name":"logaretm/vue-use-form","owner":"logaretm","description":"✅ A Vue.js composition API function to validate forms","archived":true,"fork":false,"pushed_at":"2020-03-19T23:54:21.000Z","size":630,"stargazers_count":97,"open_issues_count":2,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-27T17:25:19.252Z","etag":null,"topics":["form","form-validation","forms","validation","validation-library","vee-validate","vue","vue-composition-api","vuejs"],"latest_commit_sha":null,"homepage":"","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/logaretm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2019-08-23T21:00:39.000Z","updated_at":"2024-03-02T08:22:31.000Z","dependencies_parsed_at":"2023-02-23T01:15:53.840Z","dependency_job_id":null,"html_url":"https://github.com/logaretm/vue-use-form","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logaretm%2Fvue-use-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logaretm%2Fvue-use-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logaretm%2Fvue-use-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logaretm%2Fvue-use-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/logaretm","download_url":"https://codeload.github.com/logaretm/vue-use-form/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244143922,"owners_count":20405296,"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":["form","form-validation","forms","validation","validation-library","vee-validate","vue","vue-composition-api","vuejs"],"created_at":"2024-07-31T03:00:32.215Z","updated_at":"2025-03-18T02:30:53.616Z","avatar_url":"https://github.com/logaretm.png","language":"TypeScript","funding_links":[],"categories":["✨ Composition API functions"],"sub_categories":[],"readme":"# vue-use-form\n\n**⚠ Deprecated. ⚠**\n\nThis project will be continued in the future releases of vee-validate starting with `vee-validate@4` which will come with Vue.js 3 support.\n\n---\n\nThis is a [Vue composition API](https://github.com/vuejs/composition-api) function that allows you to do form validation, powered by vee-validate.\n\n## Install\n\n**⚠ Not production ready yet. ⚠**\n\n```sh\nyarn add vue-use-form\n\n# OR\n\nnpm i vue-use-form\n```\n\n## Usage\n\nIn your component file:\n\n```js\nimport { ref } from '@vue/composition-api';\nimport { useForm, useField } from 'vue-use-form';\n\nexport default {\n  setup() {\n    const fname = ref('');\n    const { form, submit } = useForm({\n      onSubmit () {\n        console.log('Submitting!', {\n          fname: fname.value\n        });\n      }\n    });\n\n    const { errors } = useField('firstName', {\n      rules: 'required',\n      value: fname,\n      form\n    });\n\n    return { fname, errors, submit };\n  }\n};\n```\n\nIn your Template:\n\n```vue\n\u003cform @submit.prevent=\"submit\"\u003e\n  \u003cinput v-model=\"fname\"\u003e\n  \u003cspan\u003e{{ errors[0] }}\u003c/span\u003e\n  \u003cbutton\u003eSubmit\u003c/button\u003e\n\u003c/form\u003e\n```\n\n## API\n\n### useForm(object)\n\nThe `useForm` function accepts options to configure the form.\n\n```js\nconst { form, submit } = useForm({\n  onSubmit () {\n    // this will only run when the form is valid.\n    // send to server!\n  }\n});\n```\n\nIt returns an object containing two properties:\n\n- `form`: A form controller object, which can be used with `useField` to associate fields in the same form.\n- `submit`: A safe form submit handler to bind to your submission handler, it will validate all the fields before it runs the given `onSubmit` handler.\n\n### useField(string, string | object)\n\nThe `useField` function accepts a `string` which is the input name, and options to configure the field:\n\n```js\nconst field = useField('firstName', {\n  rules: 'required', // vee-validate style rules, can be a Ref\u003cstring\u003e.\n  value: fname, // the initial field value, optional.\n  form // a form controller object returned from \"useForm\", used to group fields. optional.\n});\n```\n\nIt returns the following members:\n\n| Prop     | Type                   | Description                                                                            |\n| -------- | ---------------------- | -------------------------------------------------------------------------------------- |\n| flags    | `ValidationFlags`        | Object containing vee-validate flags for that field.                                   |\n| errors   | `string[]`               | list of validation errors                                                              |\n| validate | `() =\u003e ValidationResult` | Triggers validation for the field.                                                     |\n| reset    | `() =\u003e void`             | Resets validation state for the field.                                                 |\n| onInput  | `() =\u003e void`             | Updates some flags when the user inputs, you should bind it to the element.            |\n| onBlur   | `() =\u003e void`             | Updates some flags when the user focuses the field, you should bind it to the element. |\n| value   | `Ref\u003cstring\u003e`  | A default ref in-case you didn't pass the initial value |\n\n## Credits\n\n- API Inspired by some react libraries: [Formik](https://jaredpalmer.com/formik/), [react-final-form-hooks](https://github.com/final-form/react-final-form-hooks).\n- Powered by [vee-validate](https://github.com/baianat/vee-validate).\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogaretm%2Fvue-use-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flogaretm%2Fvue-use-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogaretm%2Fvue-use-form/lists"}