@treesoft/vue3-hook-form NPM

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 🚀🚀🚀