vue-hooks-form - GitLite

KO | EN

gitlite — search

#react #ai #machine-learning #rust #deep-learning #linux #docker #macos #windows #awesome #kubernetes #vue #pytorch #ios

vue-hooks-form

(★ 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

# Installation Guide

1. Get the code

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

Downloads the entire project code from GitHub to your computer.

cd vue-hooks-form

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

yarn add vue-hooks-form

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

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

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