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 devThe 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>
