Skip to content

Commit c2300a0

Browse files
logaretmlogaretm
committed
docs: update readme
1 parent 0f0eaee commit c2300a0

File tree

2 files changed

+95
-96
lines changed

2 files changed

+95
-96
lines changed

‎README.md‎

Lines changed: 45 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -77,81 +77,77 @@ vee-validate offers two styles to integrate form validation into your Vue.js app
7777

7878
#### Composition API
7979

80-
If you want more fine grained control, you can use `useField` function to compose validation logic into your component:
80+
The fastest way to create a form and manage its validation, behavior, and values is with the composition API.
8181

82-
```vue
83-
<script setup>
84-
// MyInputComponent.vue
85-
import { useField } from 'vee-validate';
86-
87-
const props = defineProps<{
88-
name: string;
89-
}>();
90-
91-
// Validator function
92-
const isRequired = value => (value ? true : 'This field is required');
93-
94-
const { value, errorMessage } = useField(props.name, isRequired);
95-
</script>
96-
97-
<template>
98-
<input v-model="value" />
99-
<span>{{ errorMessage }}</span>
100-
</template>
101-
```
102-
103-
Then you can you can use `useForm` to make your form component automatically pick up your input fields declared with `useField` and manage them:
82+
Create your form with `useForm` and then use `defineInputBinds` to create your fields bindings and `handleSubmit` to use the values and send them to an API.
10483

10584
```vue
10685
<script setup>
10786
import { useForm } from 'vee-validate';
108-
import MyInputComponent from '@/components/MyInputComponent.vue';
10987
110-
const { handleSubmit } = useForm();
88+
// Validation, or use `yup` or `zod`
89+
function required(value) {
90+
return value ? true : 'This field is required';
91+
}
92+
93+
// Create the form
94+
const { defineInputBinds, handleSubmit, errors } = useForm({
95+
validationSchema: {
96+
field: required,
97+
},
98+
});
99+
100+
// Define fields
101+
const field = defineInputBinds('field');
111102
103+
// Submit handler
112104
const onSubmit = handleSubmit(values => {
113105
// Submit to API
114-
console.log(values); // { email: '[email protected]' }
106+
console.log(values);
115107
});
116108
</script>
117109
118110
<template>
119111
<form @submit="onSubmit">
120-
<MyInputComponent name="email" />
112+
<input v-bind="field" />
113+
<span>{{ errors.field }}</span>
114+
115+
<button>Submit</button>
121116
</form>
122117
</template>
123118
```
124119

125-
You can do so much more than this, for more info [check the composition API documentation](https://vee-validate.logaretm.com/v4/guide/composition-api/validation/).
120+
You can do so much more than this, for more info [check the composition API documentation](https://vee-validate.logaretm.com/v4/guide/composition-api/getting-started/).
126121

127122
#### Declarative Components
128123

129-
Higher-order components are better suited for most of your cases. Register the `Field` and `Form` components and create a simple `required` validator:
124+
Higher-order components can also be used to build forms. Register the `Field` and `Form` components and create a simple `required` validator:
130125

131-
```js
126+
```vue
127+
<script setup>
132128
import { Field, Form } from 'vee-validate';
133129
134-
export default {
135-
components: {
136-
Field,
137-
Form,
138-
},
139-
methods: {
140-
isRequired(value) {
141-
return value ? true : 'This field is required';
142-
},
143-
},
144-
};
145-
```
130+
// Validation, or use `yup` or `zod`
131+
function required(value) {
132+
return value ? true : 'This field is required';
133+
}
146134
147-
Then use the `Form` and `Field` components to render your form:
135+
// Submit handler
136+
function onSubmit(values) {
137+
// Submit to API
138+
console.log(values);
139+
}
140+
</script>
148141
149-
```vue
150-
<Form v-slot="{ errors }">
151-
<Field name="email" :rules="isRequired" />
142+
<template>
143+
<Form v-slot="{ errors }" @submit="onSubmit">
144+
<Field name="field" :rules="required" />
152145
153-
<span>{{ errors.email }}</span>
154-
</Form>
146+
<span>{{ errors.field }}</span>
147+
148+
<button>Submit</button>
149+
</Form>
150+
</template>
155151
```
156152

157153
The `Field` component renders an `input` of type `text` by default but you can [control that](https://vee-validate.logaretm.com/v4/api/field#rendering-fields)
@@ -165,6 +161,7 @@ Read the [documentation and demos](https://vee-validate.logaretm.com/v4).
165161
You are welcome to contribute to this project, but before you do, please make sure you read the [contribution guide](/CONTRIBUTING.md).
166162

167163
## Translations 🌎🗺
164+
168165
[![translation badge](https://inlang.com/badge?url=github.com/logaretm/vee-validate)](https://inlang.com/editor/github.com/logaretm/vee-validate?ref=badge)
169166

170167
To add translations, you can manually edit the JSON translation files in `packages/i18n/src/locale`, use the [inlang](https://inlang.com/) online editor, or run `pnpm machine-translate` to add missing translations using AI from Inlang.

‎packages/vee-validate/README.md‎

Lines changed: 50 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -77,81 +77,77 @@ vee-validate offers two styles to integrate form validation into your Vue.js app
7777

7878
#### Composition API
7979

80-
If you want more fine grained control, you can use `useField` function to compose validation logic into your component:
80+
The fastest way to create a form and manage its validation, behavior, and values is with the composition API.
8181

82-
```vue
83-
<script setup>
84-
// MyInputComponent.vue
85-
import { useField } from 'vee-validate';
86-
87-
const props = defineProps<{
88-
name: string;
89-
}>();
90-
91-
// Validator function
92-
const isRequired = value => (value ? true : 'This field is required');
93-
94-
const { value, errorMessage } = useField(props.name, isRequired);
95-
</script>
96-
97-
<template>
98-
<input v-model="value" />
99-
<span>{{ errorMessage }}</span>
100-
</template>
101-
```
102-
103-
Then you can you can use `useForm` to make your form component automatically pick up your input fields declared with `useField` and manage them:
82+
Create your form with `useForm` and then use `defineInputBinds` to create your fields bindings and `handleSubmit` to use the values and send them to an API.
10483

10584
```vue
10685
<script setup>
10786
import { useForm } from 'vee-validate';
108-
import MyInputComponent from '@/components/MyInputComponent.vue';
10987
110-
const { handleSubmit } = useForm();
88+
// Validation, or use `yup` or `zod`
89+
function required(value) {
90+
return value ? true : 'This field is required';
91+
}
92+
93+
// Create the form
94+
const { defineInputBinds, handleSubmit, errors } = useForm({
95+
validationSchema: {
96+
field: required,
97+
},
98+
});
99+
100+
// Define fields
101+
const field = defineInputBinds('field');
111102
103+
// Submit handler
112104
const onSubmit = handleSubmit(values => {
113105
// Submit to API
114-
console.log(values); // { email: '[email protected]' }
106+
console.log(values);
115107
});
116108
</script>
117109
118110
<template>
119111
<form @submit="onSubmit">
120-
<MyInputComponent name="email" />
112+
<input v-bind="field" />
113+
<span>{{ errors.field }}</span>
114+
115+
<button>Submit</button>
121116
</form>
122117
</template>
123118
```
124119

125-
You can do so much more than this, for more info [check the composition API documentation](https://vee-validate.logaretm.com/v4/guide/composition-api/validation/).
120+
You can do so much more than this, for more info [check the composition API documentation](https://vee-validate.logaretm.com/v4/guide/composition-api/getting-started/).
126121

127122
#### Declarative Components
128123

129-
Higher-order components are better suited for most of your cases. Register the `Field` and `Form` components and create a simple `required` validator:
124+
Higher-order components can also be used to build forms. Register the `Field` and `Form` components and create a simple `required` validator:
130125

131-
```js
126+
```vue
127+
<script setup>
132128
import { Field, Form } from 'vee-validate';
133129
134-
export default {
135-
components: {
136-
Field,
137-
Form,
138-
},
139-
methods: {
140-
isRequired(value) {
141-
return value ? true : 'This field is required';
142-
},
143-
},
144-
};
145-
```
130+
// Validation, or use `yup` or `zod`
131+
function required(value) {
132+
return value ? true : 'This field is required';
133+
}
146134
147-
Then use the `Form` and `Field` components to render your form:
135+
// Submit handler
136+
function onSubmit(values) {
137+
// Submit to API
138+
console.log(values);
139+
}
140+
</script>
148141
149-
```vue
150-
<Form v-slot="{ errors }">
151-
<Field name="email" :rules="isRequired" />
142+
<template>
143+
<Form v-slot="{ errors }" @submit="onSubmit">
144+
<Field name="field" :rules="required" />
152145
153-
<span>{{ errors.email }}</span>
154-
</Form>
146+
<span>{{ errors.field }}</span>
147+
148+
<button>Submit</button>
149+
</Form>
150+
</template>
155151
```
156152

157153
The `Field` component renders an `input` of type `text` by default but you can [control that](https://vee-validate.logaretm.com/v4/api/field#rendering-fields)
@@ -164,6 +160,12 @@ Read the [documentation and demos](https://vee-validate.logaretm.com/v4).
164160

165161
You are welcome to contribute to this project, but before you do, please make sure you read the [contribution guide](/CONTRIBUTING.md).
166162

163+
## Translations 🌎🗺
164+
165+
[![translation badge](https://inlang.com/badge?url=github.com/logaretm/vee-validate)](https://inlang.com/editor/github.com/logaretm/vee-validate?ref=badge)
166+
167+
To add translations, you can manually edit the JSON translation files in `packages/i18n/src/locale`, use the [inlang](https://inlang.com/) online editor, or run `pnpm machine-translate` to add missing translations using AI from Inlang.
168+
167169
## Credits
168170

169171
- Inspired by Laravel's [validation syntax](https://laravel.com/docs/5.4/validation)

0 commit comments

Comments
 (0)