Building custom input controls

So far, our input components are fairly simple wrappers around standard HTML input elements in order to reduce duplication. However, we are yet to define the Typeahead.vue and MultiSelect.vue components, which need to go beyond the standard functionality of a HTML input element. 

Now, there are plenty of third-party components that would do the job we want without us going to the extent of building them ourselves. However, it isn't always appropriate to use someone else's component if it doesn't quite look or behave the way we want. It's also quite easy and fun to build our own, and definitely something worth learning for times when you can't find a ready-rolled component to do the job you want.

Building a custom typeahead control

Create a ClientApp/components/shared/Typeahead.vue file and then start off the template section with the following:

<template>
  <form-input-base:label="label">
    <divclass="typeahead">
      ...
    </div>
...