Vue.js login and registration form example; In this tutorial, you will learn how to create simple login and registration form in vuejs app.
This tutorial will guide you step by step on how to implement simple login and registration forms in Vue js app using bootstrap ui.
How to Create Login and Registration Form in VUE JS
Just follow the following steps and create login and registration form in vue js app:
- Step 1 – Create New VUE JS App
- Step 2 – Install Bootstrap 4
- Step 3 – Add Components in Main.js
- Step 4 – Add Global CSS
- Step 5 – Create Components
- Step 6 – Enable Vue Router
- Step 7 – Update App.vue
Step 1 – Create New VUE JS App
In this step, open your terminal and execute the following command to create new vue js app:
vue create my-app
Step 2 – Install Bootstrap 4
In this step, open your terminal and execute the following command to install bootstrap package in your vue js app:
cd my-app npm install bootstrap or yarn add bootstrap
Step 3 – Add Components in Main.js
In this step, visit /src directory and open main.js file. Then Import components in main.js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import 'bootstrap/dist/css/bootstrap.min.css'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
Step 4 – Add Global CSS
In this step, Create a css folder inside the src/assets folder then create the main.css file in it. And the following code into it:
* {
box-sizing: border-box;
}
body {
background: #2554FF !important;
min-height: 100vh;
display: flex;
font-weight: 400;
}
body,
html,
.App,
.vue-tempalte,
.vertical-center {
width: 100%;
height: 100%;
}
.navbar-light {
background-color: #ffffff;
box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
}
.vertical-center {
display: flex;
text-align: left;
justify-content: center;
flex-direction: column;
}
.inner-block {
width: 450px;
margin: auto;
background: #ffffff;
box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
padding: 40px 55px 45px 55px;
border-radius: 15px;
transition: all .3s;
}
.vertical-center .form-control:focus {
border-color: #2554FF;
box-shadow: none;
}
.vertical-center h3 {
text-align: center;
margin: 0;
line-height: 1;
padding-bottom: 20px;
}
label {
font-weight: 500;
}
.forgot-password,
.forgot-password a {
text-align: right;
font-size: 13px;
padding-top: 10px;
color: #7a7a7a;
margin: 0;
}
.forgot-password a {
color: #2554FF;
}
.social-icons {
text-align: center;
font-family: "Open Sans";
font-weight: 300;
font-size: 1.5em;
color: #222222;
}
.social-icons ul {
list-style: none;
margin: 0;
padding: 0;
}
.social-icons ul li {
display: inline-block;
zoom: 1;
width: 65px;
vertical-align: middle;
border: 1px solid #e3e8f9;
font-size: 15px;
height: 40px;
line-height: 40px;
margin-right: 5px;
background: #f4f6ff;
}
.social-icons ul li a {
display: block;
font-size: 1.4em;
margin: 0 5px;
text-decoration: none;
}
.social-icons ul li a i {
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.social-icons ul li a:focus i,
.social-icons ul li a:active i {
transition: none;
color: #222222;
}
Step 5 – Create Components
In this step, you need to create login and registration components in your vue js app.
So, visit components directory and create login.vue file. Then add the following code into it:
<template>
<div class="vue-tempalte">
<form>
<h3>Sign In</h3>
<div class="form-group">
<label>Email address</label>
<input type="email" class="form-control form-control-lg" />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control form-control-lg" />
</div>
<button type="submit" class="btn btn-dark btn-lg btn-block">Sign In</button>
<p class="forgot-password text-right mt-2 mb-4">
<router-link to="/forgot-password">Forgot password ?</router-link>
</p>
<div class="social-icons">
<ul>
<li><a href="#"><i class="fa fa-google"></i></a></li>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
</ul>
</div>
</form>
</div>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
Then, visit components directory and create registration.vue file. Then add the following code into it:
<template>
<div class="vue-tempalte">
<form>
<h3>Sign Up</h3>
<div class="form-group">
<label>Full Name</label>
<input type="text" class="form-control form-control-lg"/>
</div>
<div class="form-group">
<label>Email address</label>
<input type="email" class="form-control form-control-lg" />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control form-control-lg" />
</div>
<button type="submit" class="btn btn-dark btn-lg btn-block">Sign Up</button>
<p class="forgot-password text-right">
Already registered
<router-link :to="{name: 'login'}">sign in?</router-link>
</p>
</form>
</div>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
Then, visit components directory and create ForgotPassword.vue file. Then add the following code into it:
<template>
<div class="vue-tempalte">
<form>
<h3>Forgot Password</h3>
<div class="form-group">
<label>Email address</label>
<input type="email" class="form-control form-control-lg" />
</div>
<button type="submit" class="btn btn-dark btn-lg btn-block">Reset password</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
Step 6 – Enable Vue Router
In this step, you need to enable the router in the vue app. So visit router/ directory and open index.js file then add the following code into it:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'signup',
component: () => import('../components/Registration.vue')
},
{
path: '/login',
name: 'login',
component: () => import('../components/Login.vue')
},
{
path: '/forgot-password',
name: 'forgot-password',
component: () => import('../components/ForgotPassword.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
Step 7 – Update App.vue
In this step, you need to add the following code into the app.vue file:
<template>
<div class="vue-tempalte">
<!-- Navigation -->
<nav class="navbar shadow bg-white rounded justify-content-between flex-nowrap flex-row fixed-top">
<div class="container">
<a class="navbar-brand float-left" href="https://www.positronx.io" target="_blank">
positronX.io
</a>
<ul class="nav navbar-nav flex-row float-right">
<li class="nav-item">
<router-link class="nav-link pr-3" to="/login">Sign in</router-link>
</li>
<li class="nav-item">
<router-link class="btn btn-outline-primary" to="/">Sign up</router-link>
</li>
</ul>
</div>
</nav>
<!-- Main -->
<div class="App">
<div class="vertical-center">
<div class="inner-block">
<router-view />
</div>
</div>
</div>
</div>
</template>
Conclusion
vue.js simple login and registration form example. In this tutorial, you have learned How to create simple login and registration form in vuejs app.
