Taking a look at App.vue, let's start with the smallest possible component that we can create. If you look carefully, you will see a repeating pattern in the code—this is usually a good sign that something could make for a good component!

Within our <form> element, we have three different text inputs. Two of them are of type text, and one of them is of type email. Looks like we will need some way to assign these values to the type attribute. A prop object could be a simple solution!

As a quick reminder, here's the current code for the form:

<div class="form-group">
  <label>First Name:</label>
  <input v-model="form.firstName" type="text" class="form-control">
</div>
<div class="form-group">
  <label>Last Name:</label>
  <input v-model="form.lastName" type="text" class="form-control">
</div>
<div class="form-group">
  <label>Email:</label>
  <input v-model="form.email" type="email" class="form-control">
</div>

Go ahead and create a new file inside the src/components folder, naming it BaseInput.vue. Personally, I like to name my very basic input components starting with Base; that way, I know that it is the simplest possible form of an input that I can find in my application. 

If I ever need to make a component that extends or uses Base in some way, then I can simply import the BaseInput component, and make some adjustments! Do feel free, however, to use any naming convention that you prefer. If you want some actual style guidelines and best practices for naming components and such, refer to the official guide here: https://vuejs.org/v2/style-guide/.

Let's copy over the first input from App.vue into our new component inside the <template> tags, so that we have a base to work on:

<template>
  <div class="form-group">
    <label>Name:</label>
    <input v-model="form.firstName" type="text" class="form-control">
  </div>
</template>
<script>
export default {
    
}
</script>

The first thing we need to do is figure out how to get rid of the hardcoded values; the purpose of extracting code into components is, after all, for them to be dynamic and reusable.

Let's create a prop object to hold the value of label (with the name string):

<script>
export default {
  props: {
    label: {
      type: String,
      required: true
    }
  }
}
</script>

We are going to use the extended way to declare properties, with object notation. This way, we can ensure that anyone using our component will at least get yelled at by the console in the browser if they forget to define the label.

Now, let's go back to the template and actually replace this value with the newly created prop object:

<template>
  <div class="form-group">
    <label>{{ label }}</label>
    <input v-model="form.firstName" type="text" class="form-control">
  </div>
</template>

One more to go, what about the type? We may want to use this (and we will) for email, and eventually password fields.

Let's create a new prop object for this, and bind it, like before:

props: {
  label: {
    type: String,
    required: true
  },
  type: {
    type: String,
    default: 'text',
    validator(value) {
      return ['text', 'email', 'password'].includes(value);
    }
  }
}

Our new type of property has a default value, which will be used in the event that the prop is missing from the component when it's implemented. 

validator is a function that, well—validates! It takes a single argument, the value that is getting passed into the property, and it has to return a Boolean to verify that the value is acceptable for the property (validator validates!). 

In this particular case, we're just checking that it is one of the three choices that we will allow for this component: text, email, or password.

Now that we are set, let's update <input>:

<input v-model="form.firstName" :type="type" class="form-control">

So far, so good! Except that there is one thing still missing, which we have to refactor. Can you spot it? 

So far, we have seen how to break down the form into components. Let's now take a deeper look at v-model, and its importance when creating dynamic components.