Our CreateProduct.vue page is now complete, but the vast majority of its complexity has been abstracted away into a set of reusable custom input components. We are still to define these, but they include FormInput.vue, FormTextArea.vue, MultiSelect.vue, and Typeahead.vue. As a quick recap, the idea here is to reduce duplication. When rendering a single form field with Bootstrap styling, we tend to have multiple nested div elements with different classes, a label, an input of some kind, and a validation message. We also need some logic in order to work out which class to apply to the input to give immediate feedback as to whether the input is valid or not—this would also be duplicated, at least at the containing component level.
As an example, without our custom components, if we were to render a text input field, we'd need the following...
