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.

@laserhybiz
Copy link
Author

@pascalbaljet is this something you’d consider merging?

@pascalbaljet
Copy link
Member

Yes, I like it! Could you add tests and implement it for the other adapters as well? Thanks!

@pascalbaljet pascalbaljet added the needs more info/work Needs more info from the author or additional work to get merged label Nov 27, 2025
@laserhybiz
Copy link
Author

@pascalbaljet I’ve implemented this for the React adapter and added tests for both Vue and React. the tests are currently failing because the svelte implementation is still missing.

I don’t have any experience with svelte, could you help with that part? otherwise, I’ll try to make some time to dig into it myself.

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

Labels

needs more info/work Needs more info from the author or additional work to get merged

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants