Create and Run:

To get started quickly, you can use create-nuxt-app .
Make sure you have installed npm:

npm init nuxt-app login
cd login
npm i axios
npm run dev

The application is now running on http://localhost:3000 . Well done!

Structure:

api/index.js:
export default {
    API_URL:"https://coinmaphiring.coinmap.tech/"
}
layouts/layout.vue:
<template>
  <div>
    <Header />
    <Nuxt />
    <Footer />
  </div>
</template>
components/Header.vue:
<template>
  <div class="header">
    <div class="container">
      <nav class="navbar row navbar-expand-md">
        <div class="container">
          <nuxt-link to="/" class="navbar-brand">
            <img class="img-fluid" src="img/logo.png" />
          </nuxt-link>
          <button
            type="button"
            class="navbar-toggler"
            data-bs-toggle="collapse"
            data-bs-target="#navbarCollapse"
          >
            <span class="navbar-toggler-icon"></span>
          </button>    
          <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav w-100 justify-content-end">
              <li class="nav-item active">
                <nuxt-link class="nav-link text-white" to="/">Login</nuxt-link>
              </li>
              <li class="nav-item">
                <nuxt-link class="nav-link text-white" to="/about">About</nuxt-link></li>
                <li class="nav-item">
                  <nuxt-link class="nav-link text-white" to="/contact">Contact</nuxt-link></li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  </div>
</template>

<script>
export default {
    name:"Header"
}
</script>

<style>
.navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.header{
    background-color: #1d2842;
}
a.nuxt-link-exact-active {
  font-weight: bold;
}
</style>
components/Footer.vue:
components/Login.vue:
<template>
  <div class="login">
    <div class="col-md-3 mx-auto py-5 px-3">
      <h3 class="text-white">Login</h3>
      <input type="email" v-model="email" id="email" class="form-control my-3" placeholder="Email">
      <input type="password" v-model="password" id="inputPassword" class="form-control my-3" placeholder="Password">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
        <label class="form-check-label text-white" for="flexCheckDefault">
          Remember me
        </label>
        <a class="float-end text-decoration-none" href="#">Forgot password?</a>
      </div>
      <div v-if="isProgress" class="spinner-border text-primary my-4" role="status">
          <span class="visually-hidden">Loading...</span>
      </div>
      <button v-else v-on:click="login" class="btn w-100 my-4 btn-login text-white fw-bold" type="submit">Sign in</button>
      <div class="text-center">
        <span class="text-white">Need an account? </span><a class="text-decoration-none" href="">Register now</a>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import api from '../api/index';
export default {
name:"Login",
data(){
  return {
    isProgress:false,
    email:'',
    password:''
  }
},
methods:{
login:function(){
  if(this.email.length==0){
    alert("email is not allowed to be empty");
    return;
  }
  if(this.password.length==0){
    alert("password is not allowed to be empty");
    return;
  }
  this.isProgress=true;
  var $this=this;
  axios({
    method: 'post',
    url: api.API_URL+'login',
    data: {
      email:$this.email,
      password:$this.password
    }
  }).then(function (response) {
      if(response.data.error_code=="SUCCESS"){
        $this.$router.push('/successful')
      }else{
        alert(response.data.message)
      }
      $this.isProgress=false;
  }).catch(function (error) {
      alert(error);
      $this.isProgress=false;
  });
}
}
}
</script>

<style>
.login{
  background-color: #0f1735;
}
.btn-login{
  background-color: #9a3192;
  border: none;
}

</style>
pages/index.vue:
<template>
  <Login />
</template>

<script>
import Login from '../components/Login.vue';

export default {
  layout: "layout",
  name: 'IndexPage',
  components:{Login}
}
</script>
pages/successful.vue:
<template>
  <div class="successful">
    <div class="col-md-3 mx-auto py-5 px-3">
        <div class="text-white">
            <span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle" viewBox="0 0 16 16">
                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
                    <path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z" />
                </svg></span> <span class="fw-bold">Successful</span>
        </div>
        <div class="text-white">You can now use all features on the platform</div>
    </div>
  </div>
</template>

<script>
export default {
name:"SuccessfulPage",
layout: "layout",
}
</script>

<style>
.successful{
    background-color: #0f1735;
}
</style>

Video Demo and Source Code:

 

Source Code