Vue 2 Tutorial- Create Login Signup UI In Vue 2 With Bootstrap

In this Vue 2 tutorial, we are going to learn how to create responsive Login & Signup UI screens using the Bootstrap CSS framework in the Vue.js app.

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

 

Let’s see now what contents we are going to cover in this Vue guide:

  1. Prerequisites
  2. Generate Vue App With Vue CLI
  3. Adding Bootstrap
  4. Adding Global CSS In Vue.js Project
  5. Create Vue Login UI
  6. Build Sign Up Template
  7. Forgot Password Screen In Vue
  8. Enable Router
  9. Implement Vue Navigation With Bootstrap
  10. Conclusion

 

Step 1- Vue.js Login & Signup UI Example

There is no rocket science in this step to follow. We simply need to have the following tools on our system and we are all good to get started with this tutorial:

  • Vue CLI
  • Vue
  • Bootstrap
  • Code Editor

 

Step 2- Generate Vue App With Vue CLI

For the development of Vue, we have to run the following command to install Vue CLI:

npm install -g @vue/cli

 

We have to make sure which vue-cli version has been installed in our system:

vue --version

 

Now, We, now, generate a new Vue.js project by running the command from Vue CLI:

vue create vue-login-signup-ui

 

We head over to the project folder:

cd vue-login-signup-ui

 

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 the above error for invoking the app, we have to update the “scripts”: [] array in the 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 the multi-error warning, we have to add the following code in the vue.config.js file:

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

 

Now, we have to start the latest created Vue app on the browser window:

npm run serve

 

Step 3- Adding Bootstrap In Vue.js

To use the Bootstrap Ui components, we need to install the Bootstrap module in our Vue app using the below command:

npm install bootstrap

 

Then, we have to import the Bootstrap path in the main.js file. It makes the 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 allows us to add some useful icons to our Vue app:

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

 

Step 4- Adding Global CSS In Vue.js Project

Let’s see how to add global styles via CSS in a Vue.js project.

Firstly, we create a CSS folder inside the src/assets folder after we create the main.css file in it.

Then, we have to 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')

 

Here, we will add the common style of our primary authentication components in the 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;
}

 

Step 5- Create User Login UI In Vue

Designing and developing a login screen is a bit time-consuming task and requires some additional skills for a software developer. As we know, the login component allows us to access an application. It contains some strong web development fundamentals such as binding to extract the data from the login form.

We are going to learn how to build a beautiful login form in the Vue.js app.

Now, we will create a Login.vue file in the 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

 

Step 6- Build Sign Up Template

Signing up in simple terms means creating a new account or registering in an app. It could be signing up for any new web portal or for a newsletter. When we visit any new website, we need to create an account using the name, email, and password.

In this step, we will create an eye-catching registration UI screen in Vue using the Bootstrap 5 Form Component.

Then, we create components/Signup.vue and paste the given 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

 

 

Step 7- Forgot Password Screen In Vue

The “Forgot Password” screen is used to recover any password that we forgot for any specific account for the app.

Then, we create components/ForgotPassword.vue and paste the given 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

 

Step 8- Enable Vue Router

Here, we will enable the router in the Vue app. These routes will allow us to navigate from one page to another. So, firstly, we install the Vue router package in the app:

npm add vue-router@^3.1.6

 

Now, we add the below-given 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

 

Step 9- Implement Vue Navigation With Bootstrap

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

We will include the 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>

 

Conclusion

So, friends, we have seen how to create beautiful UI screens for the Vue Authentication process. We also explored how to create some beautiful Login, Signup and Forgot Password templates with Bootstrap.

 

Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *