tanstack-vue-form-skilld

Name: tanstack-vue-form-skilld
Author: skilld-dev

173stars8forks

How to install tanstack-vue-form-skilld?

skilld-dev/vue-ecosystem-skills/tanstack-vue-form-skilld

$npx -y skills add skilld-dev/vue-ecosystem-skills --skill tanstack-vue-form-skilld

Installs into the current project.

Summary

Powerful, type-safe forms for Vue. ALWAYS use when writing code importing \"@tanstack/vue-form\". Consult for debugging, best practices, or modifying @tanstack/vue-form, tanstack/vue-form, tanstack vue-form, tanstack vue form, form.

Files · 1

View on GitHub

SKILL.md

1	# TanStack/form `@tanstack/vue-form@1.29.1`
2	Tags: latest: 1.29.1
3
4	References: [Docs](./references/docs/_INDEX.md)
5	## API Changes
6
7	This section documents version-specific API changes for `@tanstack/vue-form`.
8
9	- BREAKING: `field.errors` — v1.28.0 flattens errors by default (`[error]` not `[[error]]`), use `disableErrorFlat: true` to restore old nested behavior [source](./references/releases/@tanstack/vue-form@1.28.0.md)
10
11	- DEPRECATED: `field.getValue()` — use `field.state.value` instead as direct accessor methods on FieldApi are deprecated in favor of state access [source](./references/docs/reference/classes/FieldApi.md)
12
13	- NEW: `field.parseValueWithSchema()` — validates field value against Standard Schema V1 without affecting internal field error state [source](./references/docs/reference/classes/FieldApi.md)
14
15	- NEW: `form.parseValuesWithSchema()` — form-level Standard Schema V1 validation helper for third-party schemas like Zod or Valibot [source](./references/docs/reference/classes/FormApi.md)
16
17	- NEW: `formOptions()` — helper to define reusable, type-safe form options with inference outside of the `useForm` hook [source](./references/docs/reference/functions/formOptions.md)
18
19	- NEW: `Field` component — declarative Vue component alternative to `useField` for defining form fields directly in templates [source](./references/docs/framework/vue/reference/variables/Field.md)
20
21	- NEW: `Subscribe` component — Vue component for fine-grained subscriptions to form or field state changes to optimize re-renders [source](./references/docs/framework/vue/reference/interfaces/VueFormApi.md)
22
23	- NEW: `useStore()` — Vue hook providing direct, reactive access to the underlying TanStack Store state for the form or field [source](./references/docs/framework/vue/reference/functions/useStore.md)
24
25	- NEW: `resetField()` — `FormApi` method to reset a specific field's value and metadata back to its default state [source](./references/docs/reference/classes/FormApi.md)
26
27	- NEW: `clearFieldValues()` — `FormApi` utility to efficiently remove all items from an array field's data [source](./references/docs/reference/classes/FormApi.md)
28
29	- NEW: `setErrorMap()` — allows manual overriding of the internal validation error map for custom validation logic [source](./references/docs/reference/classes/FieldApi.md)
30
31	- NEW: `StandardSchemaV1` — native support for the Standard Schema validation protocol across all validator fields [source](./references/docs/reference/type-aliases/StandardSchemaV1.md)
32
33	- NEW: `mode` option — `UseFieldOptions` now supports explicit `'value'` or `'array'` modes for better type safety in complex forms
34
35	- NEW: `disableErrorFlat` — new option in `FieldApiOptions` to opt-out of automatic error flattening introduced in v1.28.0 [source](./references/releases/@tanstack/vue-form@1.28.0.md)
36
37	Also changed: `resetFieldMeta()` new helper · `insertFieldValue()` array utility · `moveFieldValues()` array utility · `swapFieldValues()` array utility · `FieldApi.getInfo()` metadata helper · `VueFieldApi` interface stabilization · `VueFormApi` interface stabilization
38
39	## Best Practices
40
41	- Use `formOptions()` to define type-safe, reusable form configurations that can be shared across components or used for better type inference [source](./references/docs/reference/functions/formOptions.md)
42
43	```ts
44	const options = formOptions({
45	defaultValues: { email: '' },
46	validators: {
47	onChange: z.object({ email: z.string().email() })
48	}
49	})
50
51	const form = useForm(options)
52	```
53
54	- Link field validations with `onChangeListenTo` to trigger re-validation when dependent field values change, such as password confirmations [source](./references/docs/framework/vue/guides/linked-fields.md)
55
56	```vue
57	<form.Field
58	name="confirm_password"
59	:validators="{
60	onChangeListenTo: ['password'],
61	onChange: ({ value, fieldApi }) =>
62	value !== fieldApi.form.getFieldValue('password') ? 'Passwords do not match' : undefined
63	}"
64	>
65	```
66
67	- Implement `async-debounce-ms` at the field or validator level to throttle expensive asynchronous validation calls like API checks [source](./references/docs/framework/vue/guides/validation.md)
68
69	```vue
70	<form.Field
71	name="username"
72	:async-debounce-ms="500"
73	:validators="{
74	onChangeAsync: async ({ value }) => checkUsername(value)
75	}"
76	>
77	```
78
79	- Parse Standard Schemas manually within `onSubmit` to retrieve transformed values, as the form state preserves the raw input data [source](./references/docs/framework/vue/guides/submission-handling.md)
80
81	```ts
82	const form = useForm({
83	onSubmit: ({ value }) => {
84	// schema.parse converts string to number if

People who liked this also viewed

6 picks

Type

tanstack-vue-form-skilld

173stars8forks

View on GitHub

How to install tanstack-vue-form-skilld?

skilld-dev/vue-ecosystem-skills/tanstack-vue-form-skilld

$npx -y skills add skilld-dev/vue-ecosystem-skills --skill tanstack-vue-form-skilld

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# TanStack/form `@tanstack/vue-form@1.29.1`
2	Tags: latest: 1.29.1
3
4	References: [Docs](./references/docs/_INDEX.md)
5	## API Changes
6
7	This section documents version-specific API changes for `@tanstack/vue-form`.
8
9	- BREAKING: `field.errors` — v1.28.0 flattens errors by default (`[error]` not `[[error]]`), use `disableErrorFlat: true` to restore old nested behavior [source](./references/releases/@tanstack/vue-form@1.28.0.md)
10
11	- DEPRECATED: `field.getValue()` — use `field.state.value` instead as direct accessor methods on FieldApi are deprecated in favor of state access [source](./references/docs/reference/classes/FieldApi.md)
12
13	- NEW: `field.parseValueWithSchema()` — validates field value against Standard Schema V1 without affecting internal field error state [source](./references/docs/reference/classes/FieldApi.md)
14
15	- NEW: `form.parseValuesWithSchema()` — form-level Standard Schema V1 validation helper for third-party schemas like Zod or Valibot [source](./references/docs/reference/classes/FormApi.md)
16
17	- NEW: `formOptions()` — helper to define reusable, type-safe form options with inference outside of the `useForm` hook [source](./references/docs/reference/functions/formOptions.md)
18
19	- NEW: `Field` component — declarative Vue component alternative to `useField` for defining form fields directly in templates [source](./references/docs/framework/vue/reference/variables/Field.md)
20
21	- NEW: `Subscribe` component — Vue component for fine-grained subscriptions to form or field state changes to optimize re-renders [source](./references/docs/framework/vue/reference/interfaces/VueFormApi.md)
22
23	- NEW: `useStore()` — Vue hook providing direct, reactive access to the underlying TanStack Store state for the form or field [source](./references/docs/framework/vue/reference/functions/useStore.md)
24
25	- NEW: `resetField()` — `FormApi` method to reset a specific field's value and metadata back to its default state [source](./references/docs/reference/classes/FormApi.md)
26
27	- NEW: `clearFieldValues()` — `FormApi` utility to efficiently remove all items from an array field's data [source](./references/docs/reference/classes/FormApi.md)
28
29	- NEW: `setErrorMap()` — allows manual overriding of the internal validation error map for custom validation logic [source](./references/docs/reference/classes/FieldApi.md)
30
31	- NEW: `StandardSchemaV1` — native support for the Standard Schema validation protocol across all validator fields [source](./references/docs/reference/type-aliases/StandardSchemaV1.md)
32
33	- NEW: `mode` option — `UseFieldOptions` now supports explicit `'value'` or `'array'` modes for better type safety in complex forms
34
35	- NEW: `disableErrorFlat` — new option in `FieldApiOptions` to opt-out of automatic error flattening introduced in v1.28.0 [source](./references/releases/@tanstack/vue-form@1.28.0.md)
36
37	Also changed: `resetFieldMeta()` new helper · `insertFieldValue()` array utility · `moveFieldValues()` array utility · `swapFieldValues()` array utility · `FieldApi.getInfo()` metadata helper · `VueFieldApi` interface stabilization · `VueFormApi` interface stabilization
38
39	## Best Practices
40
41	- Use `formOptions()` to define type-safe, reusable form configurations that can be shared across components or used for better type inference [source](./references/docs/reference/functions/formOptions.md)
42
43	```ts
44	const options = formOptions({
45	defaultValues: { email: '' },
46	validators: {
47	onChange: z.object({ email: z.string().email() })
48	}
49	})
50
51	const form = useForm(options)
52	```
53
54	- Link field validations with `onChangeListenTo` to trigger re-validation when dependent field values change, such as password confirmations [source](./references/docs/framework/vue/guides/linked-fields.md)
55
56	```vue
57	<form.Field
58	name="confirm_password"
59	:validators="{
60	onChangeListenTo: ['password'],
61	onChange: ({ value, fieldApi }) =>
62	value !== fieldApi.form.getFieldValue('password') ? 'Passwords do not match' : undefined
63	}"
64	>
65	```
66
67	- Implement `async-debounce-ms` at the field or validator level to throttle expensive asynchronous validation calls like API checks [source](./references/docs/framework/vue/guides/validation.md)
68
69	```vue
70	<form.Field
71	name="username"
72	:async-debounce-ms="500"
73	:validators="{
74	onChangeAsync: async ({ value }) => checkUsername(value)
75	}"
76	>
77	```
78
79	- Parse Standard Schemas manually within `onSubmit` to retrieve transformed values, as the form state preserves the raw input data [source](./references/docs/framework/vue/guides/submission-handling.md)
80
81	```ts
82	const form = useForm({
83	onSubmit: ({ value }) => {
84	// schema.parse converts string to number if

People who liked this also viewed

6 picks

Type