How to Add Transition Animation for Form Error Messages in Nuxt UI?

[Red-Asuka]

Package

v4.x

Description

Summary

I'm trying to add smooth transition animations (fade in/out) for form validation error messages using @formkit/auto-animate, but it doesn't work with Nuxt UI's UFormField component.

For reference, the same @formkit/auto-animate setup works perfectly with shadcn-vue Form components.

Environment

• Nuxt UI: v4.0.1
• Nuxt: v4.1.3
• Vue: v3.5.22
• @formkit/auto-animate: v0.9.0 (configured as Nuxt module)

Expected Behavior

When form validation fails, error messages should:

• ✅ Fade in smoothly instead of appearing abruptly
• ✅ Fade out smoothly when corrected
• ✅ Animate height changes

Current Behavior

Error messages appear/disappear instantly without any transition, regardless of where I place v-auto-animate:

• ❌ On UFormField directly
• ❌ On parent UForm
• ❌ In UFormField's default slot wrapped with div
• ❌ Using programmatic API useAutoAnimate()

Question

What is the recommended way to add transition animations for form error messages in Nuxt UI?

Is there:

1. A built-in way to enable error animations?
2. A specific slot or prop for customizing error rendering?
3. A CSS-only approach that works with Nuxt UI's structure?
4. Support for Vue's <Transition> component?

Additional Context

• The same v-auto-animate setup works on shadcn-vue forms
• v-auto-animate does work for other animations in my Nuxt UI app (e.g., form status transitions)
• I suspect the issue is that error messages are rendered as indirect children inside UFormField, making them undetectable by auto-animate

Any guidance would be greatly appreciated! 🙏