https://github.com/bedus-creation/formjs
https://github.com/bedus-creation/formjs
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/bedus-creation/formjs
- Owner: bedus-creation
- Created: 2022-04-10T03:49:35.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-02-15T05:38:47.000Z (over 3 years ago)
- Last Synced: 2025-02-13T22:37:11.959Z (over 1 year ago)
- Language: JavaScript
- Size: 161 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Form Js
The 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.
### Installation
```bash
yarn add vue3-formjs
```
### Forms
Formjs can be used to send form data through api.
```vue
First name:
Last name:
Email:
Avatar:
Submit
import { reactive } from 'vue'
import { Http } from 'vue3-formjs'
export default {
setup() {
const form = reactive({
first_name: null,
last_name: null,
email: null,
avatar: null,
})
function submit() {
Http.post('/users', form)
}
return {
form,
submit
}
},
}
```
### Form Helper
Form js provides fluent api to handle form.
```vue
{{ form.errors.email }}
{{ form.errors.password }}
Remember Me
Login
import { useForm } from 'vue3-formjs'
export default {
setup() {
const form = useForm({
email: null,
password: null,
remember: false,
})
return { form }
},
}
```
To submit the form, use the get, post, put, patch and delete methods.
```js
form.submit(method, url, options)
form.get(url, options)
form.post(url, options)
form.put(url, options)
form.patch(url, options)
form.delete(url, options)
```
### Api Call
It can be used to perform api call. This can be done with
`Http.visit()` method.
```js
import { Http } from "vue3-formjs"
Http.visit(url, {
method: 'get',
data: {},
onSuccess: response => {},
onError: errors => {},
onFinish: () => {},
})
```
However, there are other shortcut methods as well, where all the methods share same options as `Http.visit()`.
```js
import { Http } from "vue3-formjs"
Http.get(url, data, options)
Http.post(url, data, options)
Http.put(url, data, options)
Http.patch(url, data, options)
Http.delete(url, options)
```
### Event Callback
Form js also provides a number of per call event callbacks.
```js
import { Http } from "vue3-formjs"
Http.post('/users', data, {
onSuccess: (response) => {},
onError: (errors) => {},
onFinish: () => {},
})
```