Implementing a custom input component

Creating reusable custom components is a core part of Vue, but for the components to actually be useful, we have to actually use them!

Open up your App.vue file, and let's replace the three <div class="form-group"> elements with our custom component.

First things first: what we have to do is import the component to our file. Let's get that out of the way. Add the following import to the top of the <script> element, shown as follows:

import BaseInput from '@/components/BaseInput';

Just importing the file is not enough; we actually have to add the component to the component's property on the file, so that we can then use it inside our template. We currently do not have such a property inside our Vue instance, so let's create one between name and data():

...
components: { BaseInput },
...

Now...