Vue js login authentication and registration form; In this tutorial, how to create simple login and registration form in vuejs app.
Vue Js Login and Registration Forms Tutorial
- Step 1 – Create New VUE JS App
- Step 2 – Install Bootstrap 4
- Step 3 – Import 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
Run the following command on terminal to create new vue js app:
vue create my-app
Step 2 – Install Bootstrap 4
Run the following command on terminal to install bootstrap package in your vue js app:
cd my-app npm install bootstrap or yarn add bootstrap
Step 3 – Import Components in Main.js
Go to /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
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
Create login and registration components in your vue js app.
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
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
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.