Create a Simple Vue.js Registration Form
Tags: vue, javascript, webdev, programming
Published: 2021-01-20 03:05:26

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


Registrations forms are a part of many web apps.

We can create one easily.

In this article, we’ll look at how to create a registration form with Vue and Express.

### Back End

We can create a simple login form that takes some data in the back end.

To do that, we create an Express app by installing some packages:

```
npm i express cors body-parser
```

Then we can use them by writing:

```
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors')
const app = express();
app.use(cors())
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.post('/register', (req, res) => {
  res.json(req.body);
});

app.listen(3000, () => console.log('server started'));
```

The `cors` package lets us do cross-domain communication.

We used it with `app.use(cors())` .

`bodyParser` parses the JSON request body that we’ll submit from the front end.

`bodyParser.json()` lets us parse JSON.

We also have a `register` route to get the request data.

`req.body` has the parsed JSON data.

If we need logic for checking for data, we can add them.

### Register Form Front End

After we added the back end for accepting the registration data, we can add the registration form with Vue.js.

To do that, we can write:

```
<template>
  <div id="app">
    <form @submit.prevent="login">
      <div>
        <label for="username">username</label>
        <input name="username" v-model="username" placeholder="username">
      </div>
      <div>
        <label for="password">password</label>
        <input name="password" v-model="password" placeholder="password" type="password">
      </div>
      <div>
        <label for="firstName">first name</label>
        <input name="firstName" v-model="firstName" placeholder="first name">
      </div>
      <div>
        <label for="lastName">last name</label>
        <input name="lastName" v-model="lastName" placeholder="last name">
      </div>
      <div>
        <label for="age">age</label>
        <input name="age" v-model="age" placeholder="age" type="number">
      </div>
      <div>
        <label for="address">address</label>
        <input name="address" v-model="address" placeholder="address">
      </div>
      <input type="submit" value="register">
    </form>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      username: "",
      password: "",
      firstName: "",
      lastName: "",
      age: "",
      address: ""
    };
  },
  methods: {
    async login() {
      const { username, password, firstName, lastName, age, address } = this;
      const res = await fetch(
        "https://SomberHandsomePhysics--five-nine.repl.co/register",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            username,
            password,
            firstName,
            lastName,
            age,
            address
          })
        }
      );
      const data = await res.json();
      console.log(data);
    }
  }
};
</script>
```

We added a registration form with the `form` element.

The `submit.prevent` listen runs the `login` method on submit and runs `preventDefault` at the same time.

The form fields are created by the `label` and `input` tags.

`for` has the `name` attribute value of the input field.

`v-model` binds to the values that we submit.

We also set the `type` attribute of some inputs.

`password` is for password inputs.

`number` is for number inputs.

The `login` method calls `fetch` to make a POST request to the back end.

We get all the reactive properties we want to submit in the first line.

Then we put them all in the JSON string.

`headers` must have the `Content-Type` set to `application/json` to submit the JSON.

Then we get back the response from the `register` route once the request is made.

### Conclusion

We can create a registration form with Vue.js with the `v-model` directive and the `fetch` function to make requests.