Skip to content

[3.x] Add optimistic prop to <Form> component#2881

Merged
pascalbaljet merged 3 commits into
3.xfrom
form-component-optimistic
Feb 11, 2026
Merged

[3.x] Add optimistic prop to <Form> component#2881
pascalbaljet merged 3 commits into
3.xfrom
form-component-optimistic

Conversation

@pascalbaljet
Copy link
Copy Markdown
Member

This PR adds an optimistic prop to the <Form> component. The callback receives both the current page props and the form data being submitted.

<template>
  <Form
    action="/todos"
    method="post"
    :optimistic="(props, data) => ({
      todos: [...props.todos, { id: Date.now(), name: data.name, done: false }],
    })"
    #default="{ processing }"
  >
    <input name="name" />
    <button type="submit" :disabled="processing">Add Todo</button>
  </Form>
</template>

The formData argument is useful because the <Form> component manages data internally from form inputs, so you don't have access to it in a closure like you would with useForm().

@pascalbaljet pascalbaljet added the next major release We need to consider this for the next major release, perhaps because of a breaking change label Feb 11, 2026
@pascalbaljet pascalbaljet merged commit 7d1bc0e into 3.x Feb 11, 2026
@pascalbaljet pascalbaljet deleted the form-component-optimistic branch February 11, 2026 12:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

next major release We need to consider this for the next major release, perhaps because of a breaking change

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant