Does Nuxt UI ship its own form library?
I'm coming from React and always needed a UI library + form library ( e.g. React Hook Form ) + a custom schema parser ( e.g. Zod )
I thought Vue people would be using https://vee-validate.logaretm.com/v4/ as their form library but it seems with Nuxt UI you only need a custom schema parser.
Is this correct? đ Maybe Nuxt UI is using vee validate under the hood? Is Nuxt UI capable of handling complex forms, e.g. field arrays with indices?
5 Replies
Hi @Garzec. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Nuxt UI does not ship its own form validation library. Instead, it provides a flexible
<UForm> component that integrates with popular schema validation libraries such as Zod, Valibot, Yup, Joi, and Superstruct. You are responsible for installing and providing the schema validation library you want to useâNuxt UI does not include one by default. There is no indication in the knowledge sources that Nuxt UI uses vee-validate under the hood, nor is vee-validate mentioned as a dependency or integration.
The Nuxt UI <UForm> component is designed to work seamlessly with its own <UFormField> and input components, handling validation, error display, and submission. You can use either schema-based validation (with the libraries above) or custom validation logic via the validate prop. Error messages are automatically displayed in the relevant <UFormField> components based on the schema or custom validation output. This means you do not need a separate form library like React Hook FormâNuxt UI's form system is built-in and works out of the box with your chosen schema validator Form component.
Regarding complex forms, Nuxt UI supports advanced use cases such as nested forms and field arrays. The documentation provides examples of handling lists of items (field arrays) using nested <UForm> components and dynamic state, including adding and removing items by index. Validation for these arrays can be handled using your schema library, and errors are mapped to the correct fields using dot notation (e.g., items.0.description) Form Input Events Form Schema Validation.
Summary:
- Nuxt UI does not use vee-validate or ship its own validation library.
- You only need to bring your own schema parser (e.g., Zod, Yup, etc.).
- Nuxt UI's form system is capable of handling complex forms, including field arrays and nested structures, without needing an additional form library.
If you need more advanced features, you can always extend the system with custom logic, but for most use cases, Nuxt UI's built-in form handling is sufficient and streamlined for Vue/Nuxt projects.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@164630818822684683> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai yeah so with Nuxt UI we don't need additional libraries like Vee Validate right
Let me check the knowledge base for you again. One moment! :books:
----------------------
That's correctâyou do not need additional libraries like Vee Validate when using Nuxt UI. Nuxt UI provides its own
<UForm> and <UFormField> components for form handling and validation. You simply bring your own schema validation library (such as Zod, Yup, Valibot, Joi, or Superstruct), and Nuxt UI handles the integration, validation, and error display. Vee Validate is not used or required by Nuxt UI, nor is it mentioned as a dependency or integration in the documentation Form component Form Schema Validation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@164630818822684683> Kapa.ai is still learning and improving, please let me know how I did by reacting below.