What files do I need to modify to get Laravel to recognize a new type?

Question

I'm practicing Laravel using a Laravel Breeze app. A task I have assigned myself: Adding a postal code to the existing User model (including the registration form). I'm starting with the frontend and working backwards.

I have modified my index.d.ts file so that contains the following:

export interface User {
    id: number;
    name: string;
    email: string;
    email_verified_at: string;
    postal_code: string;
}

export type PageProps<T extends Record<string, unknown> = Record<string, unknown>> = T & {
    auth: {
        user: User;
    };
};

I have also cloned the email field in the Register.vue file and started to modify it:

        <div class="mt-4">
            <InputLabel for="postal_code" value="Postal Code" />

            <TextInput
                id="postal_code"
                type="email"
                class="mt-1 block w-full"
                v-model="form.email"
                required
                autocomplete="postal-code"
            />

            <InputError class="mt-2" :message="form.errors.email" />
        </div>

The problem comes when I change type="email" to type="postal_code" in that second file.

The field vanishes from the form!

I've tried rerunning npm run dev and also tried creating the backend infrastructure for the field and reinstalling the app from scratch, but it seems like the new TS field type stubbornly refuses to be found. There is no error popping up in my browser console -- just a silent failure.

Anybody know what's going on here? I'm assuming I just need to register my new TS type somewhere else.

(Sorry, I'm definitely not a frontend guy, so my TS is extremely rusty. Likewise, I tend to do more Symfony than Laravel. This is a practice project aimed at correcting that imbalance a little.)

Answer 1

There isn't a type "postal_code" for the input tag in HTML, so when you're setting it to that the browser doesn't recognise it and probably ignores the input or doesn't render it the way you want it to.

type="text" should fix this for you, so it will be:

<div class="mt-4">
    <InputLabel for="postal_code" value="Postal Code" />

    <TextInput
        id="postal_code"
        type="text"
        class="mt-1 block w-full"
        v-model="form.email" 
        required
        autocomplete="postal-code"
    />

    <InputError class="mt-2" :message="form.errors.postal_code" />  <!-- Change this line to show postal_code errors -->
</div>

That should fix the input but you should also change the v-model to be v-model="form.postal_code" to bind it and handle any error messages related to it correctly. Hope this helps!