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 },
.....