All right, enough setup—let's write some code! We will start with a very simple form so that our users can fill out their personal information. Nothing crazy, just baby steps.

We are going to add three fields to our form. A firstName input, a lastName input, and an email input. Finally, we will add a Submit button.

Remember back when we installed Bootstrap? This is where it comes out to shine. All of the classes that we are going to add to our markup will get magically styled by Bootstrap.

Make these changes to your App.vue file:

<template>
  <div id="app" class="container py-4">
    <div class="row">
      <div class="col-12">
        <form>
          <div class="form-group">
            <label>First Name:</label>
            <input type="text" class="form-control">
          </div>

          <div class="form-group">
            <label>Last Name:</label>
            <input type="text" class="form-control">
          </div>
 
          <div class="form-group">
            <label>Email:</label>
            <input type="email" class="form-control">
          </div>

          <div class="form-group">
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

In the previous code example, we have set up a container with row. Inside this row, we have populated it with three different inputs, two text types (one for the first and one for the last name), and an email type input. Finally, we added <button>, which will serve as the main way to submit the form.

Save your file and check out your browser. If you still have the server running, you should see the changes reflected automatically. Okay, I agree it's a little underwhelming, but I did say we're starting with a simple example, and this is as simple as it gets!

The form is fully functional, and you can even click the Submit button for it to submit to itself and accomplish absolutely nothing. Neat! But let's spice this up with some Vue.