Post Detail

Di bagian kedua ini kita masih dihalaman frontend, yang dimana dibutuhkan sebuah package yang bernama vue-router yang dimana vue-router difungsikan untuk pemetaan sebuah alamat url di framework javascript, dengan vue-router kita bisa memetakan contoh router login ke sebuah komponen vuejs.

Package Vue-Router

Seperti biasa kita masuk ke project yang telah kita buat pada tahap #1 yaitu kita jalankan syntak run dev

cd frontend
npm run dev

Setelah project kita jalan, maka tahapan selanjutnya kita install vue-router dengan menjalankan perintah 

npm install vue-router@4

Tunggu proses installasi sampai dengan selesai, pastikan tidak ada error ya. Setelah proses installasi vue-router selesai, kita lanjutkan dengan membuat sebuah folder dengan nama folder router under folder src/router dan kita buat sebuah file dibawah folder router dengan nama file src/router/index.js dan isikan kodingan seperti berikut ini

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

const routes = [
    {
        path:'/',
        name: 'login',
        component: () => import ("../views/Login.vue"),
        meta: {
            requiresAuth: false
        }
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
});

router.beforeEach((to, from, next) => {
    next()
});
  

export default router;

Kalo kita baca kodingan diatas yang dimana ada component yang harus disiapkan yaitu component login dan kalo kita pahami bersama, kita sama sekali belum menyiapkan hal tersebut maka dari itu mari kita siapkan dengan langkah membuat file login src/views/Login.vue dengan isian sebagai berikut.

<template>
    <div class="center">
        <h1>Login</h1>
        <form method="post">
            <div class="txt_field">
                <input type="text" required>
                <span></span>
                <label>Username</label>
            </div>
            <div class="txt_field">
                <input type="password" required>
                <span></span>
                <label>Password</label>
            </div>
            <div class="pass">Forgot Password</div>
            <input type="submit" value="Login">
            <div class="signup_link">
                Not a member? <a href="#">Signup</a>
            </div>
        </form>
    </div>
</template>
<script>
export default {
    name: 'Login',
    mounted() {
        document.body.classList.add('login')
    }
}
</script>
<style>
.login{
    margin: 0;
    padding: 0;
    font-family: montserrat;
    background: linear-gradient(120deg,#2980b9, #8e44ad);
    height: 100vh;
    overflow: hidden;
}

.center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    background: white;
    border-radius: 10px;
}

.center h1{
    text-align: center;
    padding: 0 0 20px 0;
    border-bottom: 1px solid silver;
}

.center form{
    padding: 0 40px;
    box-sizing: border-box;
}

form .txt_field{
    position: relative;
    border-bottom: 2px solid #adadad;
    margin: 30px 0;
}

.txt_field input{
    width:  100%;
    padding: 0 5px;
    height: 40px;
    font-size: 16px;
    border: none;
    background: none;
    outline: none;
}

.txt_field label{
    position: absolute;
    top: 50%;
    left: 5px;
    color: #adadad;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
    transition: .5s;
}

.txt_field span::before{
    content: '';
    position: absolute;
    top: 40px;
    left: 0;
    width: 0%;
    height: 2px;
    background: #2691d9;
    transition: .5s;
}

.txt_field input:focus ~ label,
.txt_field input:valid ~label{
    top: -5px;
    color: #2691d9;
}

.txt_field input:focus ~ span::before,
.txt_field input:valid ~span::before{
    width: 100%;
}

.pass{
    margin: -5px 0 20px 5px;
    color: #a6a6a6;
    cursor: pointer;
}

.pass:hover{
    text-decoration: uderline;
}

input[type="submit"]{
    width: 100%;
    height: 50px;
    border: 1px solid;
    background: #2691d9;
    border-radius: 25px;
    font-size: 18px;
    color: #e9f4fb;
    font-weight: 700;
    cursor: pointer;
    outline: none;
}

input[type="submit"]:hover{
    border-color: #2691d9;
    transition: .5s;
}
.signup_link{
    margin: 30px 0;
    text-align: center;
    font-size: 16px;
}
.signup_link a{
    color: #2691d9;
    text-decoration: none;
}
.signup_link a:hover{
    text-decoration: underline;
}
</style>

Setelah kodingan dicomponent login selesai maka tahapan selanjutnya kita update pada App.vue menjadi seperti ini.

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

Setelah sedikit kodingan ditambahkan masih dilanjut pada file src/main.js update kodingan menjadi berikut ini.

import { createApp } from 'vue'
import router from './router'
import App from './App.vue'

const app = createApp(App)

app.use(router)
app.mount('#app')

Jika tahapan tidak ada yang mis harusnya ketika kita akses project/aplikasinya maka akan menjadi seperti ini.

Demikianlah artikel bagian kedua, semoga masih mengikuti artikel-artikel yang saya buat ini. Dan semoga ilmunya berkah buat kalian - kalian yang masih belajar vuejs.