Build Vue 2 Login & Signup UI Auth Template with Bootstrap

This guide will teach you how to create login and signup user interface components in the Vue js application using the special bootstrap package from the absolute beginning.

Authentication service is the primary functionality in every web and mobile application; user interfaces give the pragmatic way to collect auth details dynamically.

Ideally, user authentication is made up of a login screen, signup screen, password recovery page, password update screen so on and so forth.

In order to access the app, a user must signup first and then use the login credentials to access the app. Creating an agile user authentication requires the accumulation of the front-end and backend simultaneously.

To create a simple login and signup UI in vue is exorbitantly easy; you can use the bootstrap library to eloquently build an aesthetically top-notch user registration and login user interface template.

We will use the Bootstrap UI components to create the mobile-friendly, responsive user authentication UI in Vue.

Create Signin and Signup UI Components in Vue with Bootstrap

  • Step 1: Configure Vue CLI
  • Step 2: Install Vue Project
  • Step 3: Add Bootstrap Library
  • Step 4: Create and Register Auth Components
  • Step 5: Create Routes & Navigation
  • Step 6: Login Auth UI
  • Step 7: Create Signup UI
  • Step 8: Start Vue Application

Configure Vue CLI

First, start with installing the latest Vue CLI tool on your system.

npm install -g @vue/cli

Install Vue Project

Now you are ready to install the new Vue app, skip this step if the app was already created.

vue create vue-auth-ui

Next, step inside the app.

cd vue-auth-ui

Vue Gatsby Error

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"
},

Fix Multi Word Error

In order to fix multi-word error, insert the given code in vue.config.js file.

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

Add Bootstrap Library

Install Bootstrap package into the Vue app, and it will proliferate the lucid UI modules globally in your vue app.

npm install bootstrap

Register the package into the src/main.vue file, thereafter it will work with high fidelity with vue.

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

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

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

Create and Register Auth Components

Head over to the components folder, create two new template files, SigninScreen.vue and SignupScreen.vue; these files will be the locus of auth UI screens.

Update components/SigninScreen.vue file.

<template>
    <h2>Vue Login UI Screen</h2>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        }
    }
</script>

Update components/SignupScreen.vue file.

<template>
    <h2>Vue Sing Up UI Screen</h2>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        }
    }
</script>

Create Routes & Navigation

In the next step, we will create the routes for login and signup pages, install the vue router package.

npm install vue-router

Enabling routing and navigation in vue is easy; import VueRouter service, inject it into the Vue.use() method, then create router instance from VueRouter object, within the VueRouter create routes array, in this array every object, represent the route for navigating within the app.

Thereafter, get into the src/main.js and add the code into file.

import Vue from 'vue';
import App from './App.vue';
import 'bootstrap/dist/css/bootstrap.min.css';

// router services
import VueRouter from 'vue-router'
Vue.use(VueRouter)


const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    { 
      path: '/signup',
      name: 'signup',
      component: () => import('./components/SignupScreen.vue')
    },
    { 
      path: '/signin',
      name: 'signin',
      component: () => import('./components/SigninScreen.vue')
    }
  ]
});

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

Open src/App.vue file and place the router-view directive in this file.

<template>
   <router-view />
</template>

Login Auth UI in Vue

Use bootstrap form control module to build the login or signin form in vue template, open the components/SigninScreen.vue file, and add the code.

<template>
    <main class="form-signin">
        <div class="card">
               <div class="card-body">
                    <form>
                        <h2 class="h3 mb-3 fw-normal text-center">Please sign in</h2>

                        <div class="form-group">
                            <label>Email address</label>
                            <input type="email" class="form-control form-control-lg" placeholder="Email address" />
                        </div>

                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" class="form-control form-control-lg" placeholder="Password"/>
                        </div>

                        <div class="checkbox mb-3">
                             <label><input type="checkbox" value="remember-me"> Remember me</label>
                        </div>

                        <router-link class="w-100 btn btn-lg btn-primary" type="submit" to="/signup">Sign in</router-link>
                    </form>
                </div>
        </div>  
        <p class="mt-3 mb-3 text-muted text-center">© 20202025</p>
    </main>      
</template>

<script>
    export default {
        data() {
            return {}
        },
        methods: {
            
        }
    }
</script>

<style lang="css">
    body {
        display: flex;
        padding-top: 60px;
        padding-bottom: 60px;        
        align-items: center;
        background-color: #f6f6f6;
    }
    .form-signin {
        width: 100%;
        max-width: 450px;
        margin: auto;
    }
    label {
        font-weight: 600;
    }
</style>

Create Signup UI in Vue

Creating a user registration page in vue is almost identical to the previous step; you need to add few more form input elements. So, open and update the code in components/SignupScreen.vue file.

<template>
    <main class="form-signin">
        <div class="card">
               <div class="card-body">
                    <form>
                        <h2 class="h3 mb-3 fw-normal text-center">Please sign up</h2>

                        <div class="form-group">
                            <label>First Name</label>
                            <input type="text" class="form-control form-control-lg" placeholder="First name"/>
                        </div>

                        <div class="form-group">
                            <label>Last Name</label>
                            <input type="text" class="form-control form-control-lg" placeholder="Last name"/>
                        </div>

                        <div class="form-group">
                            <label>Email address</label>
                            <input type="email" class="form-control form-control-lg" placeholder="Email address" />
                        </div>

                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" class="form-control form-control-lg" placeholder="Password"/>
                        </div>                        

                        <router-link class="w-100 btn btn-lg btn-primary" type="submit" to="/signin">Sign up</router-link>
                    </form>
                </div>
        </div>  
        <p class="mt-3 mb-3 text-muted text-center">© 20202025</p>
    </main>      
</template>

<script>
    export default {
        data() {
            return {}
        },
        methods: {
            
        }
    }
</script>

<style lang="css">
    body {
        display: flex;
        padding-top: 60px;
        padding-bottom: 60px;        
        align-items: center;
        background-color: #f6f6f6;
    }
    .form-signin {
        width: 100%;
        max-width: 450px;
        margin: auto;
    }
    label {
        font-weight: 600;
    }
</style>

Start Vue Application

Lastly, execute command to run the vue application.

npm run serve

Open this url in the browser’s address bar and view app on the browser.

http://localhost:8080

Crete Login & Signup UI Pages in Vue

Conclusion

From now on, if you are ever given the task to create a robust user authentication system, you can take the reference of these AUTH templates to incorporate in your project.

Bootstrap’s sheer audacity for building rich UI is on another level. It was released years ago, and it still has precedence over other blatant CSS frameworks. We hope you loved the confluence of bootstrap and Vue and liked how we highlighted the nuances of the vue UI auth example.

So, that’s all that we have, the Vue login form and signup form tutorial is over.