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

The purpose of forms in a web application is to capture some user input and be able to do something with it. In our example, we still don't have any way to access the user's input with JavaScript for our Vuetiful plans—so, let's start with that.

Please note that you do not necessarily have to wrap up your form's data inside a secondary object, but, I have found it to be cleaner—especially when you start adding other data properties to your component, which may not necessarily be related to your form.

Create a new data property on the instance of your App.vue file. Inside of it, we're going to declare a form object, which will, in turn, hold a property for each one of our inputs:

<script>
export default {
  name: 'app',
  data() {
    return {
      form: {
        firstName: &apos...

As it currently is, the form is getting submitted to the same URL when you click the Submit button. This is not Vue magic—this is just default <form> behavior, especially since we didn't specify an action attribute on the tag.

In most real-world scenarios, you'll want to perform a couple of operations before submitting a form. The most common would be validating some inputs, or perhaps even overriding the default submit behavior with an asynchronous call using a library such as Axios. 

First, we need to make sure that, when the user clicks the Submit button, we prevent the form from going out on its own. We also want to bind a new method to it being clicked.

Let's bind to the form's submit event first. Remember that we want to add the .prevent modifier to the event so that, when the form is submitted, the...

The next step in our form is to actually have the form send the user's data to our servers. For the sake of example, the data is not going to be actually stored anywhere, but we will look at the steps of creating the POST call that most forms will use for transferring the data to an API or server endpoint.

Axios is a fantastic and popular library for sending and receiving data from servers. I personally recommend it as a go-to whenever you need to make any HTTP calls from your Vue apps. You can find the official GitHub page here: github.com/axios/axios.

Follow the next set of steps to get Axios ready on your project:

1. Fire up your Terminal and run the following command:

> npm install axios

2. We are going to need an API endpoint to make our calls to. Since we don't have any servers at hand—and to keep things really simple—we are...

In this chapter, we have taken the first steps to create a simple data-gathering form. We styled it using Bootstrap and we hooked into the <form> events. Finally, we used Axios and Mockoon to send the data to a dummy backend for testing.

In the next chapter, we will take a look into building reusable form components harnessing the power of Vue.