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 handles form and page visit.
yarn add vue3-formjs
Formjs can be used to send form data through api.
<template>
<form @submit.prevent="submit">
<label for="first_name">First name:</label>
<input id="first_name" v-model="form.first_name"/>
<label for="last_name">Last name:</label>
<input id="last_name" v-model="form.last_name"/>
<label for="email">Email:</label>
<input id="email" v-model="form.email"/>
<label for="email">Avatar:</label>
<input type="file" @input="form.avatar = $event.target.files[0]" />
<button type="submit">Submit</button>
</form>
</template>
<script>
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
}
},
}
</script>
Form js provides fluent api to handle form.
<template>
<form @submit.prevent="form.post('/login')">
<!-- email -->
<input type="text" v-model="form.email">
<div v-if="form.errors.email">{{ form.errors.email }}</div>
<!-- password -->
<input type="password" v-model="form.password">
<div v-if="form.errors.password">{{ form.errors.password }}</div>
<!-- remember me -->
<input type="checkbox" v-model="form.remember">
Remember Me
<!-- submit -->
<button type="submit" :disabled="form.processing">Login</button>
</form>
</template>
<script>
import { useForm } from 'vue3-formjs'
export default {
setup() {
const form = useForm({
email: null,
password: null,
remember: false,
})
return { form }
},
}
</script>
To submit the form, use the get, post, put, patch and delete methods.
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)
It can be used to perform api call. This can be done with
Http.visit()
method.
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()
.
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)
Form js also provides a number of per call event callbacks.
import { Http } from "vue3-formjs"
Http.post('/users', data, {
onSuccess: (response) => {},
onError: (errors) => {},
onFinish: () => {},
})