vue-hooks-form

KO | EN

gitlite — search

#python #react #llm #go #machine-learning #linux #docker #java #windows #cli #kubernetes #vue #security #mcp

(★ 149)

Building forms with vue composition API.

File Explorer

Download Latest Version (.zip)

- - node.js.yml
- FUNDING.yml
- - index.md
- .gitignore
- package.json
- yarn.lock
- - logo.png
- - Demo.vue
  - Input.vue
- App.vue
- main.ts
- favicon.ico
- index.html
- deepValidator.ts
- index.ts
- useForm.ts
- utils.ts
- - deepValidator.spec.ts
  - useForm.spec.tsx
- a.test.ts
- utils.ts
.browserslistrc
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
babel.config.js
cypress.json
jest.config.js
LICENSE
package.json
README.md
rollup.config.js
shims-vue.d.ts
tsconfig.json
vue.config.js
yarn.lock

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Vue Hooks Form &middot; [![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
<template>
  <form @submit="onSubmit">
    <label>Username</label>
    <input v-model="username.value" :ref="username.ref" />
    <p v-if="username.error">{{ username.error.message }}</p>
    <label>Password</label>
    <input v-model="password.value" :ref="password.ref" type="password" />
    <p v-if="password.error">{{ password.error.message }}</p>
    <button type="submit">submit</button>
  </form>
</template>

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),
    }
  },
}
</script>
```
## 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.

vue-hooks-form

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

vue-hooks-form

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README