This document discusses considerations for building forms with Vue.js. It outlines 15 points to focus on, beginning with good structure as the most important thing. Other considerations include consistent aesthetics, ease of customization, minimum styling for different states, emitting the same data type accepted, using the @input and @change events appropriately, supporting unidirectional data flow, and consistent validations. The document emphasizes building forms progressively, beginning with structure and accessibility, then presentation and styling, and finally JavaScript and interaction.

1. Forms, Components &
Considerations
A look at forms with the Vue.js

2. 18.2

3. Every dev, product, sprint, etc has
its own beginning… Day 0

6. …

9. Common! It is Thursday!!!

10. And comes the Friday!!!

12. And we have REALLY COMPLEX form controls

14. 1. Where is the tag?

15. 2. Where is the tag?

16. 3. How much cleaner is this?

18. 4. Nested
Forms
●
●
●

19. COMMANDMENT 1:
It always begins with a good
structure… single most important
thing.

20. COMMANDMENT 2:
Make sure that your component
has good styling & aesthetics…
That’s the next step of progressive
enhancement.

21. 5. Consistent
aesthetics
Needs for consistent aesthetics
paves the way for next important
consideration which is Ease of
customization.

22. 6. Ease of Style
Customization
● No hard-coded values for height
and colors
● Easy to change font-size
● BEM like flat selectors for style
overriding
● Exposing CSS variables for
common elements
● No pre-specified margins

23. 7. Minimum and Viable Styling for state
● Default
● Error
● Focus and blur state
● Disabled state
● Read-only state
If nothing else, do this.

24. COMMANDMENT 3:
Once, you are happy, then think
about interaction & JavaScript…

25. 8. Focus and Blur event
● Most fundamental need that it
can get.
● If nothing else, do this.
● Trick: Use for
non-focusable elements.

26. 9. Emit what you accept
Rule is Simple. If a component accepts a string, then it should
emit a string on change. If component accepts a date object,
then it should emit a date object. However, if component
accepts a date as as string, then do not emit value of date as a
Date object on change.

27. 10. Stick to :value and @input binding

28. v-model is just a syntax sugar

29. 11. Use @input and @change events
Input event is fired repeatedly while Change event is fired less often than
input event. Input event matters to auto-complete whereas Change event
may matter more for multi-select.

30. 12. Do not emit @input event from the value watcher
Read this as: Do never fire @input event on
changing the value programmatically.

32. Legacy antipatterns exists even today

33. 13. Support for unidirectional/one-way data flow

34. 14. Consistent form validations

35. 15. Native form input events

36. https://stackoverflow.com/q/50861726/5723098

37. Making Forms work is one thing
● Accessibility
● Aesthetics
● Validations
● Usability

38. Building forms progressively
1. Structure and accessibility
2. Presentation and Styling
3. JavaScript and Interaction

39. Transcript
https://blog.webf.zone/

40. Thank You!