Create a Simple Vue.js Login Form — an Example

Image for post
Image for post
Photo by Joel & Jasmin Førestbird on Unsplash

Login forms are a part of most web apps.

We can create one easily.

In this article, we’ll look at how to create a login 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('/login', (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 login route to get the request data.

req.body has the parsed JSON data.

We should add logic for user validation when we create a production app.

Login Form Front End

We add the login form in our Vue app.

To do that, we can write:

<template>
<div id="app">
<form @submit.prevent="login">
<input v-model="username" placeholder="username">
<input v-model="password" placeholder="password" type="password">
<input type="submit" value="log in">
</form>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
username: "",
password: ""
};
},
methods: {
async login() {
const { username, password } = this;
const res = await fetch(
"https://SomberHandsomePhysics--five-nine.repl.co/login",
{
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ username, password })
}
);
const data = await res.json();
console.log(data);
}
}
};
</script>

We created the login form in the template.

v-model binds the data to the reactive properties we initialized in the data method.

The input with type submit will trigger the submit event.

We listen to the submit event with submit.prevent to call preventDefault automatically.

This way, we can submit our login credentials with JavaScript.

Then in the login method, we called fetch to make a request to the login route we created.

The method property has the request method.

headers has the request headers. We need to set Content-Type to application/json so that we can submit JSON.

The body has the requests body.

Then we get back the response with res.json() .

When we type in something and click ‘log in’, we should get a response logged.

Conclusion

We can create a simple login form with Vue and Express easily.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store