Skip to content

TanStack Form Vue - default formId is not SSR-safe #2254

Description

@DamianGlowala

Describe the bug

When binding the default form ID (in e.g. the Vue template) that TanStack Form produces using uuid(), there is a hydration mismatch due to this value not being SSR-safe. It would be great to replace the uuid() call with useId() Vue provides (see https://vuejs.org/api/composition-api-helpers.html#useid).

Your minimal, reproducible example

n/a

Steps to reproduce

Create simplest possible form using useForm, add a form tag in the Vue template and bind default form ID to it (e.g. <form :id="myForm.formId">...</form>). Observe how you are getting hydration errors as a different value is computed on the server vs on the client.

Expected behavior

SSR-safe default form ID generated by TanStack Form (in case user does not provide their own)

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

n/a

TanStack Form adapter

vue-form

TanStack Form version

1.33.2

TypeScript version

6.0.3

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions