Create Login Signup UI Screens in Vue 2 with Bootstrap 5

Last updated on: by Digamber
In this tutorial, we are going to create responsive Login & Signup UI screens using the Bootstrap CSS framework in the Vue.js application.

We will create a Login screen, Sign up screen, and Forgot Password screen from scratch.

Bootstrap is a free and open-source CSS based UI framework, and It is used for rapid front-end development.

It offers plenty of UI components that are 100% responsive and can work on any device size smoothly. It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

Vue.js is a robust progressive open-source JavaScript framework, and It is used use by web developers for creating excellent user interfaces and single-page applications.

It makes app development quite simple and straightforward. The primary factor of Vue is that it is lightweight, flexible, modular, and highly performant.

Let’s start creating Login and Registration user-interface templates for Vue.js.

Vue.js Login & Signup UI Example

You need to have following tools and frameworks ready to get started with this tutorial:

  • Vue CLI
  • Vue
  • Bootstrap
  • Code Editor

Generate Vue App with Vue CLI

The Vue CLI offers the standard tooling option for swift development in Vue, run the command to install Vue CLI.

npm install -g @vue/cli

Make sure which vue-cli version has been installed in your development system:

vue --version

Generate a new Vue.js project by running the command from Vue CLI.

vue create vue-login-signup-ui

Head over to project folder.

cd vue-login-signup-ui

Node.js Gatsby error – “digital envelope routines::unsupported …”

Error: digital envelope routines::unsupported
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'

To remove above error for invoking the app, make sure to update the "scripts": [] array in package.json file.

"scripts": {
    "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    "lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
},

To remove multi-word error warning, add the following code in vue.config.js file.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
})

Start to see the latest created Vue app on the browser window.

npm run serve

Adding Bootstrap in Vue.js

To use the Bootstrap UI components, we need to install the Bootstrap module in our Vue app.

npm install bootstrap

Import Bootstrap path in the main.js file. It makes Bootstrap module available throughout our 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')

We also need to define the Font Awesome icon CDN path in the public/index.html. It allow us to add some useful icons in our Vue app.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Adding Global CSS in Vue.js Project

Let’s look at the most asked question regarding Vue that how to add global styles via CSS in a Vue.js project.

Create a css folder inside the src/assets folder then create the main.css file in it.

Define the global CSS path inside the main.js file just below the Bootstrap path.

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import 'bootstrap/dist/css/bootstrap.min.css'
import '@/assets/css/main.css'
Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Add the common style of our primary authentication components in assets/css/main.css file.

* {
  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 User Login UI in Vue

Designing and developing a login screen a bit time consuming task and requires some additional skills for a software developer. As we know, the login component allows you to access an application. It contains some strong web development fundamentals such as creating HTML forms, routing to navigate to some other screen, and two-way data-binding to extract the data from the login form.

We’re going to learn how to build a beautiful login form in the Vue.js application.

Create a Login.vue file in components folder and add the following code inside the components/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="#"><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>

Create User Login UI in Vue

Build Sign up Template

Well, sign up in simple terms means to create a new account or register in an application. It could be signing up for any web portal or even for a newsletter. When you visit any new website, you need to create an account using the name, email, and password.

In this step, we are going to create an eye-catching registration UI screen in Vue using the Bootstrap 5 Form component.

Create components/Signup.vue and paste the given below code inside the 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>
<script>
    export default {
        data() {
            return {}
        }
    }
</script>

Build Vue Sign up Template

Forgot Password Screen in Vue

“Forgot password” screen is used to recover any password that you forgot for any specific account for the application.

Create components/ForgotPassword.vue and paste the given below code inside the 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>

Forgot password in Vue

Enable Vue Router

Next, we enable the router in the vue app, these routes will allow us to navigate from one page to another page. So, first install the vue router package in the app.

npm add vue-router@^3.1.6

Add the following code inside the router/index.js file.

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
  const routes = [
  {
    path: '/',
    name: 'signup',
    component: () => import('../components/Signup.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

Implement Vue Navigation with Bootstrap

Finally, we will create the simple and beautiful navigation bar that will allow us jump from one template to another template in Vue app.

Include the given below code inside 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>

Summary

We just created beautiful UI screes for Vue authentication process, we explored how to create some beautiful Login, Signup and Forgot password templates with Bootstrap.

You can download the full code from this GitHub repository.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.