New <Form> component $form object type reflection bad in Intelij IDE

[RickKukiela]

I just started messing with the new <Form> component.

Following the docs, I applied the attribute v-slot="$form" and set up the :initialValues / :resolver methods as shown in the example.

I'm using PHPStorm (my back end is PHP) and it generally handles Nuxt / Vue side fairly well (its just a fancier version of WebStorm). The issue I'm having is in the template code PHPStorm is complaining about the use of the $form variable. Here is what I'm seeing:

The arrows I added show what comes up when I hover the $form reference and you can see the IDE doesn't think that there is any property named name (which makes sense because I added that).

Is there a "type" I can import that would make my IDE stop complaining about this? I really don't like suppressing IDE errors if it can be avoided.

[EdwinvanDessel]

Unfortunately I do not have the answer. Just to remark that I run into the same issue, of course, in Visual Studio Code. An it is really annoying to look at each form being riddles with red spiral lines. Plus the name of the file, the directory it is in and all the directories above turn red. I know, first world problems but still, really annoying

[RickKukiela]

Aye! @EdwinvanDessel I figured out a work around for this. I'm on my phone rn but I'll post instructions when I'm at my desk for you or anyone else looking to get this working!

[RickKukiela]

OK! Here is my workaround:

1. Create a folder called types (adjacent from your pages folder) and place a file named index.d.ts there:
   

2. Place the following code inside that file:

import {type FormFieldState} from '@primevue/forms';

export { };

declare global {
    interface PrimevueFormState {
        [key: string]: FormFieldState;
    }
    interface FormFieldErrors {
        [key: string]: FormFieldErrorType[];
    }
    type FormFieldErrorType = {
        message?: String;
    }
}

3. Typecast your <Form> component slots like this:

<Form v-slot="$form:PrimevueFormState" :initialValues :resolver @submit="onFormSubmit">

(Basically just add :PrimevueFormState to $form in the v-slot attribute value)

Note:

You should not need to import that type file anywhere. I guess that folder/file combo is a built-in location which is autoloaded in Nuxt.

---

Regarding child-component utilization:

My application is setup to have form entry components that comprise of a "group" of inputs and each input is also a custom wrapper component so I need access to that $form slot in all of the child components within that form. When doing this, all I have to do in each custom component is to define a prop I name form and typecast it to PrimevueFormState (like we do on the main form), for example: defineProps<{ form: PrimevueFormState }>();. At the top level I pass $form to the children as the form prop and recursively do so for children of children if needed. In the child components, when I need to use the $form object, I use the passed-in version without the $ like so:

<Message :class="{'error-msg': true, 'show-error': form[name]?.invalid }"
    severity="error" size="small" variant="simple">
        {{ form[name]?.error?.message ?? 'Error' }}
</Message>

(I'm not using $form here rather I'm using the defined prop form which is passed in from the parent component via props and is typecast to PrimevueFormState!)

I really hope this helps!

[EdwinvanDessel]

Thanks a lot, Rick! That really did the trick

[RickKukiela]

No problem! I'm happy it worked for you. I too am not a fan of red underlines in my code and file tree!