{"id":18212043,"url":"https://github.com/bedus-creation/formjs","last_synced_at":"2025-04-07T21:16:24.657Z","repository":{"id":100396685,"uuid":"479906100","full_name":"bedus-creation/formjs","owner":"bedus-creation","description":null,"archived":false,"fork":false,"pushed_at":"2023-02-15T05:38:47.000Z","size":165,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-13T22:37:11.959Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/bedus-creation.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":"2022-04-10T03:49:35.000Z","updated_at":"2023-10-08T03:14:18.000Z","dependencies_parsed_at":"2023-05-14T09:15:21.416Z","dependency_job_id":null,"html_url":"https://github.com/bedus-creation/formjs","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bedus-creation%2Fformjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bedus-creation%2Fformjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bedus-creation%2Fformjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bedus-creation%2Fformjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bedus-creation","download_url":"https://codeload.github.com/bedus-creation/formjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247730069,"owners_count":20986404,"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":[],"created_at":"2024-11-03T15:04:29.916Z","updated_at":"2025-04-07T21:16:24.643Z","avatar_url":"https://github.com/bedus-creation.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Form Js\nThe idea of form data is to make easy form handling as well as API call. This library is highly inspired by the way that [inertiajs](https://inertiajs.com/) handles form and page visit.\n\n### Installation\n\n```bash\nyarn add vue3-formjs\n```\n\n### Forms\n\nFormjs can be used to send form data through api.\n\n```vue\n\n\u003ctemplate\u003e\n    \u003cform @submit.prevent=\"submit\"\u003e\n        \u003clabel for=\"first_name\"\u003eFirst name:\u003c/label\u003e\n        \u003cinput id=\"first_name\" v-model=\"form.first_name\"/\u003e\n        \u003clabel for=\"last_name\"\u003eLast name:\u003c/label\u003e\n        \u003cinput id=\"last_name\" v-model=\"form.last_name\"/\u003e\n        \u003clabel for=\"email\"\u003eEmail:\u003c/label\u003e\n        \u003cinput id=\"email\" v-model=\"form.email\"/\u003e\n        \u003clabel for=\"email\"\u003eAvatar:\u003c/label\u003e\n        \u003cinput type=\"file\" @input=\"form.avatar = $event.target.files[0]\" /\u003e\n        \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n    \u003c/form\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n    import { reactive } from 'vue'\n    import { Http } from 'vue3-formjs'\n\n    export default {\n        setup() {\n            const form = reactive({\n                first_name: null,\n                last_name: null,\n                email: null,\n                avatar: null,\n            })\n\n            function submit() {\n                Http.post('/users', form)\n            }\n\n            return {\n                form,\n                submit\n            }\n        },\n    }\n\u003c/script\u003e\n```\n\n### Form Helper\n\nForm js provides fluent api to handle form.\n\n```vue\n\n\u003ctemplate\u003e\n    \u003cform @submit.prevent=\"form.post('/login')\"\u003e\n        \u003c!-- email --\u003e\n        \u003cinput type=\"text\" v-model=\"form.email\"\u003e\n        \u003cdiv v-if=\"form.errors.email\"\u003e{{ form.errors.email }}\u003c/div\u003e\n        \u003c!-- password --\u003e\n        \u003cinput type=\"password\" v-model=\"form.password\"\u003e\n        \u003cdiv v-if=\"form.errors.password\"\u003e{{ form.errors.password }}\u003c/div\u003e\n        \u003c!-- remember me --\u003e\n        \u003cinput type=\"checkbox\" v-model=\"form.remember\"\u003e\n        Remember Me\n        \u003c!-- submit --\u003e\n        \u003cbutton type=\"submit\" :disabled=\"form.processing\"\u003eLogin\u003c/button\u003e\n    \u003c/form\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n    import { useForm } from 'vue3-formjs'\n\n    export default {\n        setup() {\n            const form = useForm({\n                email: null,\n                password: null,\n                remember: false,\n            })\n\n            return { form }\n        },\n    }\n\u003c/script\u003e\n```\nTo submit the form, use the get, post, put, patch and delete methods.\n\n```js\nform.submit(method, url, options)\nform.get(url, options)\nform.post(url, options)\nform.put(url, options)\nform.patch(url, options)\nform.delete(url, options)\n```\n\n### Api Call\n\nIt can be used to perform api call. This can be done with\n`Http.visit()` method.\n\n```js\nimport { Http } from \"vue3-formjs\"\n\nHttp.visit(url, {\n    method: 'get',\n    data: {},\n    onSuccess: response =\u003e {},\n    onError: errors =\u003e {},\n    onFinish: () =\u003e {},\n})\n```\n\nHowever, there are other shortcut methods as well, where all the methods share same options as `Http.visit()`.\n\n```js\nimport { Http } from \"vue3-formjs\"\n\nHttp.get(url, data, options)\nHttp.post(url, data, options)\nHttp.put(url, data, options)\nHttp.patch(url, data, options)\nHttp.delete(url, options)\n```\n\n### Event Callback\n\nForm js also provides a number of per call event callbacks.\n\n```js\nimport { Http } from \"vue3-formjs\"\n\nHttp.post('/users', data, {\n    onSuccess: (response) =\u003e {},\n    onError: (errors) =\u003e {},\n    onFinish: () =\u003e {},\n})\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbedus-creation%2Fformjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbedus-creation%2Fformjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbedus-creation%2Fformjs/lists"}