https://github.com/beizhedenglong/vue-hooks-form

Building forms with vue composition API.
https://github.com/beizhedenglong/vue-hooks-form

vue-components vue-composition-api vue-hooks-form vueuse

Last synced: about 1 month ago
JSON representation

Building forms with vue composition API.

• Host: GitHub
• URL: https://github.com/beizhedenglong/vue-hooks-form
• Owner: beizhedenglong
• License: mit
• Created: 2020-08-19T13:32:57.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-11-13T02:29:20.000Z (about 1 year ago)
• Last Synced: 2024-12-10T12:43:12.672Z (about 2 months ago)
• Topics: vue-components, vue-composition-api, vue-hooks-form, vueuse
• Language: TypeScript
• Homepage: https://beizhedenglong.github.io/vue-hooks-form/
• Size: 1.04 MB
• Stars: 150
• Watchers: 8
• Forks: 10
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue-3 - vue-hooks-form - Building forms with Vue composition API (Packages)

README

        
# Vue Hooks Form · [![license](https://img.shields.io/github/license/beizhedenglong/vue-hooks-form)](https://github.com/beizhedenglong/vue-hooks-form/blob/master/LICENSE) ![build status](https://github.com/beizhedenglong/vue-hooks-form/workflows/Node.js%20CI/badge.svg) [![Coverage Status](https://coveralls.io/repos/github/beizhedenglong/vue-hooks-form/badge.svg?branch=master)](https://coveralls.io/github/beizhedenglong/vue-hooks-form?branch=master)

Building forms with Vue composition API.

>The API is not stable and might change in the future.

## Docs

Visit https://beizhedenglong.github.io/vue-hooks-form/.

## Installation

```

  yarn add vue-hooks-form

```

## Features

- UI decoupling: Since It does not contain any UI code, It can be easily integrated with other UI libraries.

- Easy to adoptable: Since form state is inherently local and ephemeral, it can be easily adopted.

- Easy to use: No fancy stuffs, just reactive values/errors.

- TypeScript support.

  

## Quickstart

```vue

  

    Username

    

    
{{ username.error.message }}

    Password

    

    
{{ password.error.message }}

    submit

  


import { useForm } from 'vue-hooks-form'

export default {

  setup() {

    const { useField, handleSubmit } = useForm({

      defaultValues: {},

    })

    const username = useField('username', {

      rule: { required: true },

    })

    const password = useField('password', {

      rule: {

        required: true,

        min: 6,

        max: 10,

      },

    })

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

    return {

      username,

      password,

      onSubmit: handleSubmit(onSubmit),

    }

  },

}

```

## Live Demo

[![Edit Vue Hooks Form Demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-hooks-form-demo-lqtp0?fontsize=14&hidenavigation=1&theme=dark)

## API(TODO)

### `useForm`

```js

const {

  values,

  getFieldValues,

  errors,

  validateFields,

  validateField,

  get,

  set,

  useField,

  handleSubmit

} = useForm({

  defaultValues: {},

  shouldUnregister: true,

  validateMode: 'change',

})

```

### `useField`

```js

const {

 ref,

 value,

 error,

 validate

} = useField(path, options)

```

## Credits

This project was inspired by [react-hook-form](https://react-hook-form.com/), [formik](https://formik.org), and many other form libraries.