Skip to content

Conversation

@laserhybiz
Copy link

@laserhybiz laserhybiz commented Oct 29, 2025

This PR adds the ability to inject form state and methods into descendant components using Vue's provide/inject API.

This is useful when using wrapper components which encapsulates form functionalities.

Before:
Form state is only accessible via slot props or template refs and has to be passed down to children

<!-- Parent.vue -->
<Form
  action="/users"
  method="post"
  #default="{
    errors,
  }"
>
  <Input name="name" :error="errors.name" />
</Form>

<!-- Input.vue -->
<script setup>
defineProps({
  name: {
    type: String,
    required: true,
  },
  error: {
    type: String,
    default: null,
  },
})
</script>

<template>
  <input type="text" :name="name" />

  <div v-if="error">
    {{ error }}
  </div>
</template>

After:
All form state is accessible in any descendant component

<!-- Parent.vue -->
<Form
  action="/users"
  method="post"
>
  <Input name="name" />
</Form>

<!-- Input.vue -->
<script setup>
import { useFormContext } from '@inertiajs/vue3'

defineProps({
  name: {
    type: String,
    required: true,
  },
})

const form = useFormContext()
</script>

<template>
  <input type="text" :name="name" />

  <div v-if="form.errors[name]">
    {{ form.errors[name] }}
  </div>
</template>

The useFormContext hook returns the same interface as the Form's slot props and template ref, including all state (errors, isDirty, processing, etc.) and methods (submit, reset, clearErrors, etc.).

I'll add the tests if this is approved.

@laserhybiz
Copy link
Author

I guess I will also have to add this to the other adapters if it's approved.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant