Learn, How to build Login and Signup system in vuejs with responsive bootstrap 4 UI Screen design, Vuejs is Fast and clean system to build web applications. So We build Login, Signup and forgot password UI Screen from scratch.

Main 3 things we will use to build –

Vuejs: is a robust progressive open-source JavaScript framework, and It’s mainly use by modern web developers for building excellent user interfaces and one-page  web apps.

Bootstrap 4: is a open-source or free to use CSS3 based UI framework technology, & It’s used for faster and responsive front-end development. It provide many of User Interface components which are 100% responsive and can work on any device size smoothly.

Font awesome 5: Font Awesome is free and open source icons library used by many web developers.  It’s faster and easy technology to integrate icons in any website. Icons elements use with inline <i> and <span> elements.

Table of Contents

  • Prerequisites
  • Generate Vue Web app with Vue CLI
  • Install Bootstrap 4
  • Install Font awesome 5
  • Adding Global CSS3 in Vue.js Project folder
  • Create Views Template – Login, Signup and Forgot Password
  • Enable Router
  • Implement Vue Navigation
  • Final Summary

Things Required to build

  • Visual Code Editor (Any code editor with terminal)
  • Vuejs CLI and Vuejs 2
  • Node js preinstalled ( You must have node js installed in your system)

Generate Vue Application with Vue CLI

Run below command to install Vue CLI

npm install -g @vue/cli

# or 

yarn global add @vue/cli

Confirm vue-cli version installed in your development system

vue --version

Createa new Vue.js project by following command

vue create myapp

Select and create new app with following manual selections

# ? Please pick a preset: Manually select features
# ? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
# ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
# ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
# ? Pick a linter / formatter config: Basic
# ? Pick additional lint features: Lint on save
# ? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
# ? Save this as a preset for future projects? (y/N) No

Go to to project (myapp) folder

cd myapp

Run the following command to start the localhost server and see your created project Vue app on the browser

npm run serve

Install and add Bootstrap 4 in Vue.js application

Run the following command and instal Bootstrap 4 in our app then we can use the Bootstrap 4 UI components

npm install bootstrap

# or

yarn add bootstrap

Provide and Import Bootstrap 4 path into main.js file. It will make Bootstrap 4 module available in our project app.

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')

Install and add Font Awesome 5 in Vue.js application

Run the following command one by one  and instal Font Awesome 5 in our app then we can use the Font Awesome 5 icons components

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/vue-fontawesome
npm i --save @fortawesome/fontawesome-free

Provide and Import Fontawesome 5 path into main.js file. It will make Font awesome 5 module available in our project app.

import { library } from '@fortawesome/fontawesome-svg-core'
import { faFontAwesome } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import '@fortawesome/fontawesome-free/css/all.css'
import '@fortawesome/fontawesome-free/js/all.js'

library.add(faFontAwesome)
Vue.component('font-awesome-icon', FontAwesomeIcon)

Create and add Global main CSS in our Vuejs Project

Create a main.css file under under  src/assets folder. Ex – src – assets – css – main.css

Now Define a main.css file path under the main.js file with bootstrap and foontawesome file path.

import Vue from 'vue'
import App from './App.vue'
import router from './router'

import 'bootstrap/dist/css/bootstrap.min.css'

import { library } from '@fortawesome/fontawesome-svg-core' import { faFontAwesome } from '@fortawesome/free-brands-svg-icons' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' 
import '@fortawesome/fontawesome-free/css/all.css' 
import '@fortawesome/fontawesome-free/js/all.js' 
library.add(faFontAwesome) 
Vue.component('font-awesome-icon', FontAwesomeIcon)
import '@/assets/css/main.css'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Add css style elements to main.css file in assets/css/main.css.

* {
  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;
}

Create Login.vue UI

Create a Login.vue file in views folder and add the following html tags inside the views/Login.vue file

<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="#"><font-awesome-icon :icon="['fab', 'google']" /></a></li>
                    <li><a href="#"><font-awesome-icon :icon="['fab', 'facebook']" /></a></li>
                    <li><a href="#"><font-awesome-icon :icon="['fab', 'twitter']" /></a></li>
                </ul>
            </div>
        </form>
    </div>
</template>
<script>
export default {
  data () {
    return {}
  }
}
</script>

It will look like below screen –

Create Signup.vue UI

Create a Signup.vue file in views folder and add the following html tags inside the views/Signup.vue file

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

Signup.vue will look like below screen –

Create ForgotPassword.vue UI

Create a ForgotPassword.vue file in views folder and add the following html tags inside the views/ForgotPassword.vue file

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

ForgotPassword.vue will look like below screen –

Enable route for new created files in vue Router

Here we need enable route the router file. This will add navigation from one page to another page.

Add the below code under the router/index.js file.

{
    path: '/signup',
    name: 'signup',
    component: () => import('../views/Signup.vue')
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/Login.vue')
  },
  {
    path: '/forgotpassword',
    name: 'forgotpassword',
    component: () => import('../views/ForgotPassword.vue')
  }

Implement Vue Nav in App.js file

Add the below code under App.js 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://artificialtopic.com/build-user-frontend-register-system-with-vuejs-framework/" target="_blank">
           My App
        </a>
        <ul class="nav navbar-nav flex-row float-right">
<li class="nav-item"> <router-link class="nav-link pr-3" to="/">Home</router-link> </li>
<li class="nav-item"> <router-link class="nav-link pr-3" to="/about">About</router-link> </li>

          <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="nav-link" to="/signup">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>

Summary

Above steps will create beautiful and responsive UI Screens, in some cases you will stuck and face some issue like – plugin dependancy, Format issue and other. If you stuck in coding feel free to connect with us here on messenger –  Artificial Topic

Tagged in: