@treesoft/vue3-hook-form

Easy way to handle submit and validate form. No state, No two way binding or v-model in the component, just give the attribute name on the input elements. Vue 3 hook form is simpler and faster.

Install

npm i @treesoft/vue3-hook-form

Usage basic

<template>
    <form @submit="handleSubmit($event, onSubmit)">
        <input name="name">
        <textarea name="address">
        <button type="submit">Submit</button>
    </form>
</template>

<script>
import useForm from '@treesoft/vue3-hook-form'

export default {
    setup() {
        const { handleSubmit } = useForm()

        const onSubmit = (data) => {
            console.log(data) // { name: '', address: '' }
        }

        return {
            handleSubmit,
            onSubmit,
        }
    }
}
</script>

APIs methods

Name	Params	Description
setValue(name: string, value: string)		set element value such as: input, textarea, select, etc.
	name	attributes name value of element.
	value	value to be change.
handleSubmit(event: object, callback: function)		hanler function when form is submitted.
	event	eventListener interface represents an object that can handle .an event dispatched by an EventTarget object.
	callback	callback function when the form was submitedd.
values: object		form state values, can be render in the template.
errors: object		error state, can be render in the template.

APIs options

Name	Params	Description
useForm(options: object)		options
	options.defaultValue: object	form values to set by default
	options.validate: object	form validation such as: email, password and ect.

Set form value after called service api

setup() {
    const { setValue, handleSubmit } = useForm()

    const onSubmit = (data) => console.log(data)

    // call to service api to get user info
    axios.get('https://api.fake.com/me').then(({ status, data }) => {
        const { name, address } = data
        if(status === 200) {
            // then set form value
            setValue('name', name)
            setValue('address', address)
        }
    })

    return {
        handleSubmit,
        onSubmit,
    }
}

Set form value by default

setup() {
    const options = {
        defaultValues: {
            name: 'Facebook',
            address: '1 Hacker Way, Menlo Park, 94025',
        }
    }
    
    const { formState, handleSubmit } = useForm(options)

    const onSubmit = (data) => {
        console.log(data)
    }

    return {
        formState,
        handleSubmit,
        onSubmit,
    }
}

Validation form

setup() {
    const options = {
        validate: {
            email: {
                required,
            },
            password: {
                minLength: minLength(8)
            }
        },
    }

    const { errors, handleSubmit } = useForm(options)

    const onSubmit = (data) => {
        console.log(data)
    }

    return {
        errors,
        handleSubmit,
        onSubmit,
    }
}

Web development in 2020 is very interesting and the hook form is trending now on react but not for vue now.

So, I have created the @treesoft/vue3-hook-form to make the component clean up and strongly code structure. No state, No two way binding or v-model but only one for onSubmit callback function. If you want to contribution with us don't be hesitate, create the pull request on Github to make vue comunnity stronger 🚀🚀🚀