Vue-Form: Is there a TypeScript pattern for creating reusable form components?

[spaansba]

I'm trying to create reusable Vue components that accept a form from useForm() but struggling with TypeScript patterns.

Example

<script setup lang="ts">
// How do I properly type this?
interface Props {
  form: any 
  name: string
}

const { form, name } = defineProps<Props>()
</script>

<template>
  <form.Field v-slot="{ field }" :name="name">
    <input 
      :value="field.state.value"
      @input="(e) => field.handleChange((e.target as HTMLInputElement).value)"
    />
  </form.Field>
</template>

What I want to achieve:

Remove boilerplate from actual forms by wrapping all my reusable components with a Field component

Question:

Is there an established TypeScript pattern for this in Vue? I noticed createFormHookContexts was added for React in #1179, so I'm wondering if there's a Vue equivalent or recommended approach.

[mkeyy0]

I guess it's a related issue #1464, there are no available alternatives for this in Vue, which is quite sad :( , I ran into the same issue, want to decompose the form, but it is blocked by this Vue issue: vuejs/core#8553