In this tutorial, we are going to create responsive Login & Signup UI screens using the Bootstrap 4 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 4
- 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
yarn global add @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-animated-ui
Answer Vue CLI questions with following choices.
Head over to project folder.
cd vue-animated-ui
Start to see the latest created Vue app on the browser window.
npm run serve
Adding Bootstrap 4 in Vue.js
To use the Bootstrap UI components, we need to install the Bootstrap module in our Vue app.
npm install bootstrap
yarn add 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>
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 4 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>
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>
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 install vue-router
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 4
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">
<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>
<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 4.
You can download the full code from this GitHub repository.
