Description: I'm working on a Vue/Nuxt project where we typically create a single component that handles all inputs, their state, validation, and submission to the API.
While this approach works, it often leads to large components with hundreds of lines of code due to complex validation rules and business logic.
I'm considering a more modular approach, where each input is an independent component, like this:
<form>
<select-options @select="data1"/>
<input-address @value="data2"/>
<input-phone @value="data3"/>
<input-mail @value="data4"/>
</form>
// check if every required inputs aren't emty
if(!data1 || !data2 || !data3 || !data4) return
Pros of this approach:
- ✅ Each input manages its own state and errors.
- ✅ A field only emits its value if it is valid.
- ✅ The parent form only aggregates validated values before submission.
- ✅ Smaller, more reusable components.
Cons:
- ❌ More complex coordination between the parent and child components (e.g., how to ensure all fields are valid?).
- ❌ Increased number of events and synchronization logic.
- ❌ Potential complexity if cross-field validation is needed.
On the other hand, a centralized approach:
- ✅ Provides a unified way to handle validation and errors.
- ✅ Keeps all business rules in one place.
- ✅ Simplifies submission logic.
But:
- ❌ Results in a bloated, hard-to-maintain component.
- ❌ Reduces input reusability across different forms.
Question: What are the best practices for handling this in Vue/Nuxt? Should we favor a modular approach with independent inputs or a centralized approach with a master form? Have you encountered similar challenges, and how did you solve them?
