Generic form on `T` access with `keyof T`

[ThibaudDauce]

Version:

• @inertiajs/vue3 version: 1.2.0

Describe the problem:

When I try to access my form on a generic model T with a key: keyof T, Typescript raised an issue.

Steps to reproduce:

<template>
  <div>
    <!-- Working -->
    <div>{{ form[key] }}</div>

    <!-- Working -->
    <div>{{ model[genericKey] }}</div>

    <!-- Type 'keyof T' cannot be used to index type 'DistributeRef<InertiaForm<T>> -->
    <div>{{ genericForm[genericKey] }}</div>
  </div>
</template>

<script setup lang="ts" generic="T extends object">
import { InertiaForm, useForm } from '@inertiajs/vue3';

const props = defineProps<{
  model: T;
  genericKey: keyof T;
}>();

// Test with non generic default values
const defaultValues = { name: 'Thibaud' };
const form = useForm(defaultValues);
const key = 'name' as keyof typeof defaultValues;

const genericForm: InertiaForm<T> = useForm(props.model);
</script>

[pascalbaljet]

I've tried multiple times over the past six months to address this, but I keep ending up with the same result. It appears to be a limitation in Vue's DistributeRef implementation. I'll leave the issue open because it would be great have it fixed. I just wanted to note that attempts have been made :)

[HichemTab-tech]

Hi, just my 2 cents: I think this is more of a TypeScript limitation than something Inertia can really fix.

The issue seems to come from the conditional type used in DistributeRef<T>. When generics are involved, TypeScript won’t properly resolve it during indexed access.

For example:

type DistributeRef<T> = T extends { value: infer V } ? V : T

function demo<T>(obj: DistributeRef<T>, key: keyof T) {
  console.log(obj[key]) // error
  console.log((obj as T)[key]) // good !
}

Even though this looks like it should work, TS can’t safely figure it out because the type still depends on T.

So I guess in this case the only practical solution is to use the as cast :").

[pascalbaljet]

I'm closing this one. As I mentioned, I've tried multiple approaches and it consistently comes down to a limitation in Vue's DistributeRef type handling with generics. Not something we can fix on the Inertia side unfortunately.